PackLane Editor Redesign: Usability Improvements
PackLane’s editor interface is set up with tools, icons and operator controls that initially provides users with the ability to design the packaging for their products. However, there are a few pain points or usability issues that users may run into.
Product
SAAS design editor
Skills
User Interviews
Persona Building
Empathy Mapping
Closed Card Sort
Information Architecture
Wireframing & Protyping
UI Style Guide
Usability Test
PROBLEM
After brief user interviews to test current editor and after a content audit of the editor against the 12 industry usability principles, 3 key usability issues were identified.
-
Manuals to support Conceptual Model
Lack of a readily available and evident comprehensive manual. This is highlighted in the fact that the website/editor doesn’t offer a conspicuous manual that allows the user (especially a beginner) to grasp the tools. This can lead to time consuming tasks of finding out how the interface works.
-
User Control and Mapping
Sample view window does not maximize consistently, affecting user control, mapping and design consistency. While the user edits and creates their packaging, live edits are made in the sample window, on the top right corner of the interface. While this allows the user to see changes and can toggle the view, it doesn’t seem to have any maximizing feature which raises issues with mapping and user freedom. Additionally, in PackLane's promo video, the sample window has a “maximize” icon, however in the editor itself this icon is not visible or is inconsistently visible. In short, this may be a problem with interface consistency.
-
Accessibility
Furthermore, it could be argued that it insufficiently meets accessibility best practices as the failure to maximize the sample may be a pain point for those with vision impairments.
DISCOVERY & DATA SYNTHESIS
PROTO-PERSONAS
EMPATHY MAPS
CLOSED CARD SORT
To set out to developing personas associated with the use of the site's design editor, first a lightweight approach is devised. This allows for the alignment of general assumptions about the users and for getting a bird's eye view of their desires.
In this stage, a closed card sort was conducted to capture users' expectation and mental models on how the editor's information architecture was supposed to look and feel in their view.
This was an in-person, closed card sorting exercise.
See images below
Summary of Discovery
As it relates to similarities and patterns, both users who took part in the closed card sort session highlighted that ambiguity is a characteristic of a few of the sub-categories. This may highlight some need to rethink naming conventions for menu items. User 1 expressed more external thoughts as they organized the deck. User 1 also had slightly more experience with design software tools as opposed to User 2. This is valuable insight especially since Packlane’s proto-personas (Shanice and Luke) were markedly beginners to designing product packages. They had stated that a facilitative interface is paramount for them. Seeing User 2's card sorting informs the mental modeling for this user base. This was reflected in the fact User 2 took more time to organize and sort their cards.
CONCEPTING
USER FLOW
The user flow diagram, below, showcases the steps that the user takes to build a simple product design. This diagram highlights how the user logs in and then can start their work. However, if the user does not log in successfully, they are prompted to retry or recreate whichever credential that may be incorrect. The medium fidelity wireframe below shows the login, the homepage and the design interface.
As the user flows through the process, they are prompted to select the product package details such as dimensions. If this is not satisfied, it branches of to the process by which the user may upload their own byline. Nonetheless, if the user chooses a dimension of 4 x 4 x 4, the dieline appears on the art board as illustrated on the 3rd wireframe.
Then, after the user is finished with their design, they can finalize it by expanding the finished product view and hitting “save and continue”. If not, return to make additional changes are assumed.
In terms of improvements, a login section in the process flow is added which is reflected in the wireframe in Part 2. Additionally, a sample box is highlighted to view what the designing process would look like in 3d. The categories and subcategories from the card sort are also added in the final wireframe.
WIREFRAMES (MID & HI- FIDELITY
After fielding user input and expectations, I incorporated their feedback. Below is a comparison of the current design editor with the wireframes highlight user feedback
PROTOTYPING & USER TEST
In this phase, I escalate to the Prototyping stage using Figma to create connections between UI components and to give an idea of what the interaction design would look like.
After prototyping, I brought in two users to test the interface by giving them different scenarios reflective of the pain points that were mentioned earlier. For this test, the maximization feature was highlighted.
WHAT I'VE LEARNED
Insights
-
User Onboarding: A seamless onboarding process is crucial. While users appreciate the ease of signing up or logging in, confirmation of the success of this action is paramount. The user can’t be left wondering if it went through.
-
Clarity in Tools: Usability issues such as unclear upload mechanisms and the lack of a comprehensive guide highlight the importance of clarity in UX design. Ensuring users can intuitively understand and leverage the tools available is essential.
-
Live Feedback: The sample view window provides real-time updatesbut lacks adaptability. Enhancing this feature could improve user satisfaction by allowing for a more detailed and interactive editing experience.
-
Persona-Driven Design: Crafting detailed personas helped me empathize with different user needs and design tailored solutions. This approach reinforced the importance of understanding end users in creating effective UX solutions.