UX designer
@ Bizwise
At this startup tailored to small-business owners, I worked on improving the products section of the website editor. To quantify the user experience, I conducted Maze tests, explored problems with user interviews, and iterated through design explorations, lastly proving that the improvements are statistically significant.
Myself
6 weeks
Aug - Sep 2021
Maze
Figma
Google Trends
Bizwise is a startup that offers a suite of digital services for small-business owners. Their customers can use the website editor to create websites and promote their online presence. However, Bizwise received many internal and external complaints about showcasing products on the website.
From user research, I found that there were confusing user flows, inconsistent component usage, unclear "tech speak", and more. Through sketches and explorations, I iterated on user flows, design components, and screens. Finally, I proved that the improvements are statistically significant using the measured UX metrics. Some of the solutions are highlighted below.
Research: created research questions, conducted usability testing with small business owners, benchmarked UX metrics through Maze (task completion rate, task completion time, misclicks, and user satisfaction), analyzed whether improvements were statistically significant.
Design: designed content using Google trends and interviews, revised existing user flows, created/edited components and style guide, sketched and explored various design solutions, prototyped the new design, presented findings and designs.
Bizwise is a startup that offers a suite of digital services for small business owners. Their customers can use the website editor to create websites and promote their online presence.
The product manager received numerous internal employee and external customer complaints about the products page editor.
He asked me to improve how customers can create and edit their products online.
In order to improve something, I first need to benchmark the current system and understand it.
What are the pain points when people try to showcase their products using the web editor?
To answer the research question and make improvements, quantifying the user experience is what came to my mind.
It can measure and benchmark the current UX metrics while helping me pinpoint where people are struggling.
With Maze's usability testing tool, I obtained a wealth of insights from 25 tests.
After the Maze test, it was clear WHAT people were having trouble with. But WHY? Why are people having trouble with certain tasks?
To answer the why, I conducted remote usability testing with 3 small business owners over a call.
These main problems were found by examining the affinity diagram, UX metrics, and heat maps.
The save button is sometimes used as a next button while other times, it functions as a back button (a back button already exists). This contributes to a high misclick rate of 100% for related tasks!
Words such as "product variants", "media", and "primary button" are confusing, contributing to a high misclick rate of 52% for these tasks.
To add product options such as size or color in a matrix format, only 67% completed the task with a long completion time of 133 seconds.
All of these problems contributed to a low user satisfaction rating and an even lower learnability sub-scale, as measured by the System Usability Scale (SUS) questionnaire.
*The limitations of Maze tests:
I don't have control over who is recruited through Maze. They are not necessarily small business owners. However, there are many similarities between the Maze usability testing and interviews with business owners, indicating that many issues are universal.
Through qualitative and quantitative research, it’s observed that the products section of the web editor has poor usability and very poor learnability.
Together with the CEO and technical manager, we prioritized the problem for first-time users due to the upcoming marketing endeavors and numerous new customers.
Each keyword in the how-might-we statement is tied to a specific UX success metric.
Increasing these metrics will achieve the goal of improving the website editor.
Measured with a high task completion rate.
Measured with a short task completion time.
Measured with a low number of misclicks.
From here, a series of ideation, design exploration, and usability testing helped inform the possible designs to achieve the how-might-we.
To address the major problems, these sketches explored various ways to redesign the left bar.
Using the existing style guide, I quickly converted promising ideas to hi-fi prototypes for Maze testing.
Progress in the web editor is automatically saved.
On top of this, exploring alternative user flows (below) for categorizing products eliminates the need for a save/next button.
Exploration 1 (left):
Name, select/deselect products, and add new product for categories are on one page (Version 1)
Exploration 2 (right):
Users can add new categories on the home page and edit products on the specific category page (Version 2)
Many people were confused by "product variants". I brainstormed a few alternatives, such as product options and product variations. Using Google Trends as a guide, "product options" was found as the most used keyword.
Using the same method, I replaced these keywords:
• Product Media > Picture
• Primary button > White Button
• Call to Action> Button
Adding product options had the lowest completion rate with one of the highest misclicks.
How can I make the redesign intuitive?
Exploration 1 (left):
Similar to how Amazon does it, this design prompts users to choose a variation combination. Then they can edit the input options, price, SKU, and specifications. (Version 2)
Exploration 2 (right):
Instead of burdening the users with a product option matrix, this option allows people to add product options one by one. (Version 1)
On top of needing more clicks, people forget to change/delete pre-populated sample images or text.
Let's remove them!
The redesign prompts people to add a photo and content such as specifications.
To test the design explorations, I conducted 20 Maze tests on 2 versions and supplemented the findings with 3 usability testing interviews.
I tested for statistically significant differences between version 1, version 2, and the original.
With different users for each test, the Two-sample T Test was used for SUS scores and task time while the McNemar Exact Test was used for completion rate.
Using a 90% confidence level, version 1 is significantly better than version 2 and the original for many metrics!
Going forward, version 1 is chosen and further refined.
With the usability testing interviews, additional issues were discovered and addressed.
This includes adding a scroll down button and darkened shadow for content discovery, moving and enlarging the image search bar, replacing the drag icon, and many more!
Based on the findings from usability testing and interviews, I revised sections from the user flow level to the component level. The demos below highlight some of the major redesigns.
People can now associate price, specifications, and SKU with each product option.
This new design makes adding options simple: no more matrix addition and just one by one edits.
In addition to uploading pictures, people can now quickly find and select online stock photos to use.
With fewer clicks for this new user flow, people can quickly create categories and add products to them with a simple select/deselect.
The same UI components are used as above to edit an existing category for consistency and simplicity.
With the final design, UX metrics were measured through 30 Maze tests. Using statistical significance testing, the task completion rate was increased while misclicks and completion time were decreased!
With statistical significance, the average task completion rate, time, and misclicks per task improved!
Using a 90% confidence level, I quantified the actual improvement as a range.
With the measured UX metrics, I can confidently say that the new design is significantly better than the original!
All tasks had a higher task completion rate.
All tasks had a much shorter task completion time of half
All tasks had a much lower number of misclicks by at least half.
With a final presentation to the CEO and technical manager, this project is finished! Next, I will be creating clear and concise documentation for changes, components, and style guide updates with a hand-off meeting.
I noticed that people had trouble navigating back to home or back to previous pages during usability testing. From the Maze tests, people also complained about too many clicks and layers. After communicating this issue with the CEO, I will be spearheading the next project of navigation revamp!
While the products section of the website editor has clearer writing, the other sections are still filled with "tech speak". As such, I will be exploring and testing alternative words to use.
Having never conducted such in-depth quantitative analysis before, I experienced first-hand what was taught in class: quantitative research can lack behavioral insights and the "WHY". As such, I paired the Maze tests with interviews to obtain the missing puzzles, helping me arrive at a great design.
The toolkit is content-heavy and touches many sensitive legal topics. Through pair writing hosted by the content designer, I observed first-hand how to write simple language without losing the legal meaning as a team.
While working at this startup, I was one of the most senior designers there. As such, this project was primarily solo work with weekly presentations to the CEO and technical manager. During this project, I scoped and planned all the steps/resources needed. With almost no design guidance, this project helped me become more independent and resourceful!
.jpg)
