Enhancing User Conversion by Optimizing Checkout Interface
E-commerce
10+
Figma
Miro
Dovetail. AI
2 months
Challenge
Results
40%
Improved conversion rate
25%
Increase in user retention
“Through her research, she provided us with amazing findings as well as tips that will help us build a better shop. I highly recommend working with her!”
Alexus Parker
Creative Director | Automic Gold
Research and Heuristic Analysis
Aesthetic and Minimalist Design
The original interface presented excessive information, overwhelming users and distracting from the primary shopping tasks. Users expressed there were too many unnecessary stylistic choices that distracted from their goal and crowded the page
Match Between System and the Real World
The original design did not effectively use familiar language or concepts, making it challenging for users to relate the website's features to real-world shopping experiences.
In this example, if a user was searching for specific ring or stone, rather than finding where they could find all of the "peridot" rings, they first have to choose a ring type, when at this point they are unsure of the style they want yet.
Recognition Rather Than Recall
Essential functions and navigation options were hidden or not immediately apparent, forcing users to remember where features were located rather than recognizing them intuitively.
In the original filter system, there was no back button, nor a way for users to be specific about what they wanted to find. Once on a page of necklaces featuring rubies, there was no way to go back to change their mind. They would have to go to the hamburger drop down and begin the process again.
A Prototype for Seamless Shopping
Shop Page
About Page
User Personas
Jordan Taylor
Junior Graphic Desiner
Age: 25
Yearly Salary: 50k - 75k per year
Goals
Although they may not have a lot of disposable income, they are willing to invest in brands that speak to causes they care about.
Frustrations
They often struggle to find jewelry that reflects their gender identity and preferences.
Vanessa Steuber
Marketing Manager
Age: 34
Yearly Salary: 75k - 95k per year
Goals
Vanessa is looking for jewelry that not only complements their now developed personal style, but also reflects their values and beliefs.
Frustrations
She works long hours and commutes into her office so she doesn’t have a lot of time to go shopping in a store.
Alex Ondricka
University Professor
Age: 48
Yearly Salary: 95k - 150k per
Goals
They want the community whom they value, and the person they they love to also enjoy these same validating feelings by receiving a gift they believe speaks to their character.
Frustrations
Alex often juggles a demanding work schedule. Finding time for personal interests and shopping for meaningful jewelry can be challenging.
What did I learn from the Usability Testing?
Navigation Inconsistencies
Most respondents found the website user-friendly and had an easy time finding specific products with the new search feature. However, some users suggested improvements such as a more streamlined navigation, quicker image loading, and more consistent categorization.
Lack of Brand Values
Automic Gold is perceived as a quality jewelry brand that values inclusivity and sustainability. Respondents associated the brand with qualities such as being queer-owned, offering unique products, and being a small business. However, the brand's main commitment to ethical sourcing and inclusivity was not so easily recognizable.
Overwhelming Product Catalog
The company's product offering is well-received, with users appreciating the range of jewelry available. The option for custom jewelry was also noted, however, many users struggled to navigate the huge library of options that AG offered. User's complained that it took them a while to find what they needed, resulting in abandoned carts.
Defining the Problem
Outdated Interface: The website's outdated design made it challenging for users to navigate and locate essential features, leading to frustration and potential drop-offs during the shopping process.
Friction in the Checkout Process: Users encountered difficulties during the checkout process, such as no back button, nor a way for users to be specific about what they wanted to find, which hindered the conversion of website visitors into customers.
Lack of User Engagement: The website failed to engage users effectively about the brand's main commitment to ethical sourcing and inclusivity resulting in lower user retention rates and decreased likelihood of repeat purchases.
How can we solve the challenges users face with navigating and finding essential features in the shop?
From Concept to Execution
Ideation
Users struggled to locate specific items due to AG's extensive inventory. Each category led to an overarching list, making it difficult to narrow down or specify what they were searching for. This design flaw negatively impacted the shopping experience, creating frustration and increasing the likelihood of abandoned carts, ultimately hindering conversions and customer satisfaction.
I suggested a shopping experience inspired by other indie jewelry brands such as Mejuri or Missoma. They showcased a more intuitive shopping experience
Testing
We tested a newly designed filter system. This introduced intuitive category selections, improved visibility, and dynamic filtering options that updated results in real time. This enhancement significantly reduced cognitive load and improved the overall shopping flow. Users responded positively to the redesign, expressing appreciation for the streamlined browsing experience, faster product discovery, and the ability to go back and refine searches effortlessly.
Refining and Delivering the Solution
During testing, users were more inclined to tap the hamburger menu to start their search rather than selecting "Shop Now." This insight revealed that incorporating the filter menu both within the hamburger menu and on the shop page enhanced user flexibility, allowing them to more easily locate their desired items and improving the overall user experience.
Impact and Takeaways
The implementation of these recommendations had a significant impact on the Automic Gold's online shop, directly enhancing the shopping experience and driving key business outcomes. The proposed visual improvements, streamlined checkout process, better accessibility, and more intuitive navigation reduced friction for users, leading to increased conversions, higher engagement, and a more seamless shopping journey.
I presented these findings to the client in a comprehensive document, showcasing user insights and a detailed heuristic analysis of each step in the shopping experience. This evaluation, based on established usability principles, provided the team with a clear and actionable roadmap for improving the shop's interface and achieving measurable results.
This experience reinforced several key takeaways that will shape my future work. First, it highlighted the power of data-driven decisions, where user feedback and comprehensive UX audits directly informed design solutions. Collaborating with cross-functional teams, especially when working within technical constraints like Shopify, proved essential for ensuring seamless integration of design improvements. I also saw firsthand how a user-centered approach drives business outcomes, with improved usability leading to higher conversions and greater engagement.