THE PROBLEM
The main issue with the website was that it was confusing for users to navigate to find the main product offered, the workshops.
Initial usability tests of the website had 75% of users failing to purchase a workshop.
Mosss is an interior design company that is a source for modern home renovators to learn from masters of their craft online through their workshops.
After meeting the stakeholders and their UX designer on kickoff meeting the main business challenge that they were concerned about was a high bounce rate and how they could better convert new users, defined as those that weren't professional interior designers or architects, into customers.
Research showed that there was friction in finding where to purchase a workshop.
KEY GOAL
Improve the usability of the website to ultimately convert new users.
MY ROLE
Project Manager,
UX Designer,
& UX Researcher
MAKE OF THE TEAM
A team of 2 acting as both Designers and Researchers
How would you purchase a workshop?
It seemed like a simple enough task for Lisa:
Well, minutes later into the usability test, it was anything but simple as she continued to scroll up and down the page for the 4th time business's current website with noticeable frown.
Finally I asked if she would like to continue with the task.
Her answer: No.
SOLUTION
Reduce the amount of hurdles users had to jump through just to find the workshop page.
-
Adjusted postion of call to action buttons to be more findable
-
Aligned the navigation to common patterns the users are used to
-
Reduced the amount of form fields user have to jump through to buy a workshop
Solution
Reduce the amount of hurdles users had to jump through just to purchase a workshop
-
Adjust postion of call to action buttons to be more findable
-
Align the navigation to common patterns the users are used to
-
Reduce the amount of form fields user have to jump through to buy a workshop
DEFINING THE PROBLEM
I used two methods to evaluate the website's performance: Evaluating the website from a usability perspective & Testing the current design with four new users
Due to time constraints, we only had time to test the previous design with 4 new users.
The team was juggling recruiting users for interviews, writing the research plan, and interviewing said users at the time we were running these initial usability tests.
The heuristic evaluation that we performed was a time-efficient manner to identify probable issues in the current design and usability testing the website helped identify which issues were the most problematic.
UNDERSTANDING
OUR USERS
Based off of these findings and the 5 user interviews we conducted, we mapped out what a typical experience would be for our new user, Melinda, would be in a task analysis.
When mapping out the experience I chose to do a task analysis rather than a user flow to because it would better illustrate the emotions, pain points, and pitfalls a new user would face when attempting to purchase an online workshop from Mosss which would allow both the design team and stakeholders to better empathize with new users.
Key Takeaways from Research
-
75% of users could not purchase a workshop in initial usability tests.
-
Lisa and other testers struggled to find call-to-actions on the website.
-
Users were intimidated by all the form fields they had to fill out just to purchase an online workshop.
-
Users often expected to purchase the workshop under the "Shop" section only to find a vase being sold there.
So...Where did Lisa need to go?
Lisa needed to go to the middle of the page to purchase the workshop but she ended up scrolling past it multiple times as she skimmed the page.
How might we make it so new users faced less friction in purchasing a workshop
LIke Lisa, other testers faced issues discovering the CTA, and those that did were met with the roadblocks Melinda faced in the task analysis.
To address this, I sketched multiple different designs in the low-fidelity to have multiple solutions and converged onto the idea of moving the CTA above the fold and
Before
Heuristic Evaluation showed that shop was where sign-in is traditionally
After
TITLE OF THE CALLOUT BLOCK
"Shop" renamed into "Merchandise"
"Learn From Experts" renamed to "Workshops"
CTA moved directly above the fold
A MORE FINDABLE EXPERIENCE
Like Lisa, most users struggled to find the CTA so I emphasized it by placing it above the fold next to the video.
Furthermore, I adjusted navigation by renaming the elements to be more clear since users often ended up on the wrong page.
Placing the CTA above the fold avoids situation where users like Lisa could scroll past it when skimming the page.
Renaming navigational elements. "Learn From Experts" became "Workshops" because users had so much trouble finding this page.
Furthermore, I renamed "Shop" into "Merchandise" to differentiate it from "Workshops." The "Merchandise" section was moved from where it was previously next to "Sign In" to right after membership because the heuristic evaluation revealed that as a weak point that didn't follow typical patterns users were used to.
Previous Checkout
The previous checkout had 11 form fields to fill out.
Furthermore, it asked for an address despite the fact that people would be buying an online workshop where the main value is in watching videos.
New Checkout
In initial sketches, I leaned towards an accordion menu in design
Early testing revealed that users were a bit confused on where to click so we shifted towards a tab navigation.
Further usability testing revealed that users felt uncomfortable with having the email sign-up and checkout together.
Reducing Friction at Checkout
I reduced the number of form fields that were required to be filled out from 11 to 4 including email.
The entire concept of this checkout redesign was lower the hurdles new users would have to face in purchasing the workshop.
Based on the heuristic evaluation and how users that got to the checkout page reacted, we drastically reduced the form fields by taking out the requirement to input a user's address for the online workshops.
At the time the company was running a promotion on sending a free notebook and pen to members, so they would need an address to send those gifts to.
However, since the online workshop was a wholly online experience where users watch videos to learn from experts in interior design, users expressed discomfort in giving out private information like because they felt was unnecessary.
Results
After testing the new design with 9 different users, testers could now find the call to action easily!
The success rate in purchasing a workshop increased from about 25% to about 80%!
The main changes in moving the CTA above the fold, adjusting navigation, and reducing the amount of form fields in checkout allowed users to move much more smoothly when purchasing a workshop.
Users were much quicker in getting to checkout, but there was definitely room for improvement as two of nine users did not successfully purchase a workshop.
Noticable reasons why that can be improved on were that some users did not feel secure with having the checkout and email on the same modal and that the information on the benefits of the workshop could be better presented.
Lessons Learned
Where I succeeded: I successfully identified pain points in a new user's journey in purchasing a workshop and increased the usability of the website.
Where I could do better: I could have better understood the constraints of Shopify and settled on simply suggesting cutting form fields to make it more implementable.
Working with Mosss was an educational experience to me in balancing empathy with users hopping onto a new website and business needs
Looking back in hindsight, while the checkout was successful in usability tests, I dropped the ball not thinking in the time it would take to implement a new checkout.
I pushed for an ideal user experience, but I could have made a more actionable suggestion for Mosss by pushing a simple reduction the amount of form fields in Shopify which still would have helped new users.
Nonetheless, I am proud to have been able to been a voice for new user's in their journey by advocating for a smoother experience in the purchasing process and emphasizing that users were looking to learn about actionable things they could do to improve the design of their own homes.
What Mosss had to say
"Working with Alex was a helpful experience that helped discover immediate opportunities for our product. The project gave our company valuable new insight, which we implemented within the week of their final presentations. He was admirably assertive with their needs to push the project forward. I highly recommend Alex & his expertise!"
Cyndy Alfaro, UX Designer of Mosss