Improving the Buying Experience Through UX
I worked with a high-end outdoor goods retailer to increase the % of sales coming from digital channels. The deliverable? A new mobile eCommerce portal to connect with modern buyers.
.png)
In 2020 a huge upswing in eCommerce made mobile buying a priority.
Problem
Marketing drives adequate website traffic, but the amount of products browsed, total page time, click-thru-rates, and completed purchase numbers all lag projections.
Process
Taking on a user centric approach I first briefed myself on case studies, analytics, and secondary research. I then moved to primary research exploring the industry, competitors, and user base where I began to explore possible solutions aligning with user needs, stakeholder wishes, and engineering limitations.
Solution
Analyze and redesign the mobile eCommerce portal, creating an involved and engaging buyer experience that is based on user-centric design, consumable information, and intentional interaction.
My Role
As the UI/UX designer and researcher on this project I researched the target market, designed solutions, tested prototypes, and synthesized findings to observe the solution's effectiveness. Working closely with engineering and other departmental stakeholders I was able to present my research findings and create a mobile solution centered around fulfilling both user and stakeholder needs.
Primary and Secondary Research
For the design to be thoughtful and well-executed it must be informed. My first step was to conduct thorough research within the industry and consumer base, examine how top-tier outdoor focused retail competitors approach eCommerce, and explore how and why certain companies in the space were standing out.
User and Stakeholder Interviews
In order to align business goals and user needs I held both user and stakeholder interviews.
.png)
Testing Performed = Moderated Usability Testing
Location = Remote via Zoom & Google Meets
Participants = 10 total (6 male, 4 Female)
Test Quality = High Fidelity Clickable Prototype
Goal = Observe users interacting with the newly implemented design and red-routes.
User feedback and insights
-
Users want to check their order status regularly.
-
Shipping options need to be presented earlier on in the checkout process.
-
Clearer / more defined labels need to be incorporated into the Compare Table.
-
The “Favorites” feature is greatly missed by users familiar with this eCommerce standby.
Empathy Mapping
Focusing on user pains, motivations, actions, and thoughts provided insight into the benefits of an improved search and checkout process.
Persona
Who are our users? What do they care about? Why are these individuals looking to purchase? These questions were examined during persona building and target market identification.
User Flows
After gaining a better understanding of the users motivations, behavior, and goals the user flows and red-routes were identified. User flows were outlined to visualize the users journey, uncover bottlenecks, and provide insight into how users navigate.
Wireframes
The first low fidelity mock-ups created were wireframes which I constructed using the basis of user flows, competitive analysis, and user research.
Guerilla Usability Testing
Testing Performed = Guerilla Usability Testing
Location = Outside local bicycle retailer (Downtown Seattle)
Participants = 5 total ( 3 male, 2 Female )
Test Quality = Low Fidelity Clickable Prototype
Goal = Validate design decisions and bring light to design issues and potential for improvement and change based upon user feedback.
High Fidelity Design
The first iteration of high fidelity design began as I added brand color, typography, logos, and high quality product photos to my approved wireframes.
1:1 Moderated Usability Testing
Round One
Testing Performed = Moderated Usability Testing
Location = Remote via Zoom meetings
Participants = 10 total (6 male, 4 Female)
Test Quality = High Fidelity Clickable Prototype
Goal = Observe users interacting with the newly implemented design and red-routes.
Testing Findings
Round One
Priority 1 - Critical
1. Users were unable to find their preferred payment method.
2. Participants found it difficult to checkout from the comparison page.
Priority 2 - Major
1. Prices were lost amongst other content.
2. Product page is busy and cluttered.
Priority 3 - Minor
1. Landing page doesn't "grab" user attention.
2. Users looked to save and share favorites.
3. Order confirmation page and number were not clearly defined
High Fidelity Iteration
This next set of high fidelity iterations was focused on simplifying design elements and interactions to respond to the themes identified during testing and internal review.
Reflection & Future Direction
The competition for consumer dollars is intense and in industries that lack strong competitive differentiators, the lack of engaging UX or falling short of user brand expectations can hinder sales. Unsurprisingly, usability can be the deciding factor when someone goes to make an online purchase.
But with the help of user centric design and close collaboration with stakeholders + the product and engineering teams, Relic Bicycles new and improved eCommerce platform now consists of a better buying experience that benefits from:
1:1 Moderated Usability Testing
Round Two
Test Findings
Round Two
Collaboration and Implementation
Priority 1 - Critical
1. Order confirmation page and number were not clearly defined.
Priority 2 - Major
1. There was no way to enter a coupon.
Priority 3 - Minor
1. Potential to include share and save features.
1. Increased cart to checkout rate by 18%
2. Reduced screens in checkout flow by 50%
3. An intuitive product comparison feature
4. The ability to use diverse payment options
5. Integration of clear CTA's & Accessible Product Search
Future directions would consist of gathering user feedback after launch, continued usability testing, and making sure future updates stay compatible and consistent with internal standards and the design system.
