Company: CompanyBox
Team members:
Role: UX Researcher and Designer
Timeline: 6 months
Responsibilities:
Designing, organizing, moderating, and analyzing user testing and stakeholder interviews.
Creating wireframes and userflows for new box builder experience.
Creating presentations to collect all team updates and communicate current project status to the client.
OBJECTIVE
CompanyBox’s box builder tool allows customers to strengthen their brands through custom-printed cardboard boxes, packaging, mailers, shippers, displays, and more. Several user challenges existed in the current builder that created a confusing buying experience and sometimes caused users to order products incorrectly. Our goal was to improve customer experience and user success by designing a more robust and customer-centric product flow and box builder.
RESULT
Customized template library, providing users the ability to apply a pre-designed template for a quicker, easier way to design their boxes
A Company Box branded interface providing consistency through the purchasing process
Additional product options including tissue paper, labels, and inserts
Better filtering options, additional functionality, and enhanced views
Two-sided preview of inside and outside the box
Revamped 2D view to allow more interactions with the 2D flattened box, as well as ruler guides and grid for more precise designing
Revamped 3D view to allow more interactions with 3D view of box, as well as connecting 3D view to the user’s interactions with the 2D view
PROCESS
Competitor Analysis
To explore potential experiences and features to be included in the box builder redesign I conducted an analysis of similar tools. The points noted below were used to open up discussions of future plans with the client.
Current Site User Testing
To assess the usability of the current box builder tool I designed a test that asked users to find a specific product, add text and artwork in the correct orientation, and to add a specified number of the item to their cart.
Example product participants were asked to recreate:
Users view of box builder with elements added in correct orientation:
Users struggled to imagine which direction the elements would appear on the box using the flatlay view alone.
User Testing Results
Through testing major issues in the experience were found including
3D designer understanding
No user understood they could rotate the 3D viewer. When asked to place image on back of box none were fully confident they had placed it correctly
Tools and element placement
All users hesitated to find the tool kit initially
All users selected a background with white and lost their first piece of clip art in the background as all clip art is white by default. Multiple users kept that piece in the design all the way through checkout
All users struggled somewhat with moving the placed artwork. They could not tell when it was selected, noticed strange behaviors when attempting to deselect.
CompanyBox Stakeholder Interviews
Our team requested to interview the CompanyBox graphic design team as they were responsible for correcting any accidents in ordered customer designs. The graphic design team was helpful in pin pointing the most common user issues.
Top user experience challenges identified by CompanyBox Graphic Designers
Centering: Although a centering tool is available, many users do not see it. Only orders that are obviously not centered are edited by the team. As a result users are upset when their final product arrives off-center.
Low Resolution Images: Users commonly upload an image at an acceptable resolution then enlarge it to the point of unacceptable resolution. These users are disappointed and confused when they receive products with pixelated imagery.
Color Correction: Many users are not familiar with the difference between RGB and CMYK. They expect the color they choose to print exactly as it appears online and are disappointed when they receive a final product that does not meet their branding standards.
Offline Designing: Around half of all orders are designed offline. Half of these have at least one major mistake that must be corrected which costs time on part of the graphic design team.
CompanyBox Customer Interview
Our team also requested to speak with a regular CompanyBox customer. We were able to speak with the owner of a small cosmetics brand that used CompanyBox for their product packaging.
In summary this user requested improvements to the precise design element placement, sizing, and editing would allow more independence during the design process. This user requested further precision in the following elements:
Centering: Although a centering option is available, it was not obvious and went unused by the customer.
Measuring: The customer would like the ability to measure the location of elements placed in specific locations that are not centered.
Font Size: Font size reading does not change once text is enlarged by stretching, making it difficult to use a specific font size.
Mirroring: While there are options to flip elements, the user would like a “mirroring” tool.
Site Crashing: Customer experienced website crashing.
Through our conversations with first-time users, regular customers, and the graphic design team, our team began to focus around the goals of informing, clarifying, and communicating.
Our team distilled the found information into five themes. We pulled quotes and found supporting evidence to communicate our findings to the client.
Wireframes - Product Selection
Through our initial conversations with users, our team found that users not only struggled when using the box-builder itself but also when selecting the needed product. Users criticized the organization of all products listed on one page and the lack of explanation in product details.
The wireframes below detail our proposed updates to the user experience before entering the box builder.
Box Builder Wireframes
The wireframes below detail our teams proposals to improve the organization of options in the box-builder and the proposed new features.
Initial Consumer Experience Reflow
Our team detailed the reasoning for the changes to the original flow to account for scenarios such as continuing to design a work-in-progress, uploading a design from offline, and ordering a sample product.
Final Design
The final tool can be found here featuring the updates detailed below.
