Arroyo Bikes and Gears
Capstone Fall 2020
E-Commerce mobile product design for Arroyo Bikes and Gears
Arroyo Bike and Gears is a bicycle company that needs help improving conversion, by enhancing the browse to the checkout experience. This project was my second capstone from Fall 2020, where partial business goals, user research, and survey data were briefed by Springboard, I generated a persona, prototyped high-fidelity wireframes, and conducted user testing to solve the problem statement.
For eight weeks, I worked as UX Designer and used Sketch, Figma, Principle, and Miro to complete this project
With 90 billable design hours at my disposal, I designed a solution based on my competitor research, persona, and user testing results
High Fidelity Prototype
Increase conversion by addressing high bounce rates
The business goal for Arroyo is to increase revenue. In my project briefing, the product manager identified that requiring account registration at checkout and not providing a comparison tool led to Arroyo’s high bounce rate. Keeping the business goal and target user in mind, I create an end-to-end storyboard to understand how the user interacts with Arroyo’s mobile web experience.
Solution Must Meet PM Requirements
Must create a guest checkout
Data shows 70% of the users abandon their cart at the account registration page. Rather than having users sign up for an account before checkout, I designed a guest checkout solution that allows users to bypass the signup flow.
Enhance product comparison tool
Data shows most users open an average of 7 item pages, then abandon the site without moving any product into the shopping cart. The guiding hypothesis is that the user is unable to determine which product is best when comparing bicycle features. The comparison tool will be a big focus when it comes to user testing.
User Persona
Building on Arroyo’s core demographic of a high-income earning, millennial male, I used discovery phase research to identify “Jason“ as the target persona.
High Achiever: action-oriented, his desire to purchase a bike is driven by a strong personal ambition to adapt to a new lifestyle.
Analytical: he gathers information at length, rather than making an on-the-whim decision.
Quality of Life: he treats the purchase as an investment because he values the positive impact it has on his well-being.
Job To Be Done
As a first-time Arroyo user, I want to make a well-informed investment in my new bicycle, so that I feel confident about my purchase.
User Storyboard
Jason’s bike purchase experience with Arroyo is heavily influenced by how well the comparison tool works. His decision-making process is data-driven and guided by extensive reviews, he needs an informative and intuitive comparison tool to complete the purchase.
End-to-end shopping experience flowchart
I quickly created a user flowchart to map out the shopping experience. The step helped me visualize key decision points and identify essential features before starting my wireframe sketches.
User flow from browsing, product comparison tool, cart creation, and checkout.
User testing pinpoints Comparison Tool screen functionality
I recruited five participants for two rounds of user testings, one round with low-fidelity and another with high-fidelity wireframes. Each test included a mix of questions and tasks for participants to complete. The objective is to observe the project manager’s guiding hypothesis was correct: does introducing a comparison tool and guest checkout feature increase conversion at checkout?
Low-Fidelity wireframes targeted critical screens to confirm the hypothesis and meet business requirements
Screens from L to R: Browse Product, Add to Comparison, Comparison Tool, and Before Checkout
User Testing Insights
Users expressed frustration over navigational gestures while using Comparison Tool
Confusion over horizontal and vertical scrolling to view more product listings and specs
Category listing of bicycle parts on the left column needs additional context or supporting images
Provide call-to-action for each product listing to purchase
Guest Checkout needs to be more prominent, offer an incentive to register new accounts when possible
Users still under the impression logging in is a prerequisite for checkout
“Where can I Sign Up?”
Guest Checkout should be the easiest route for a user to complete a transaction, so why not move it to a more prominent location?
Conduct second round of testing with high-fidelity wireframes
Screens from L to R: Browse Product, Add to Comparison, Comparison Tool, and Before Checkout
High-Fidelity Wireframe Iteration Highlights
Project Results Highlights
My main project goal was to design a solution that meets Arroyo’s business requirements by providing guest checkout and comparison tool features to increase Arroyo’s revenue. User data indicates that users responded well to the guest checkout option and showed optimism towards the account registry. However, the testing data contradicted one aspect of the project manager’s hypothesis: the optimal number for product comparison was, in fact, a lot lower than expected.
Users show preferences for guest checkout
Users find guest checkout approachable with low commitment to complete transactions. 80% of test participants selected guest checkout, 20% intrigued by incentive and opt-in for account sign up during testing.
Testing results much lower than PM data
PM states “50% of users open an average of 7 item pages abandons cart”, yet my testing shows users are only comfortable with comparing up to 4 products at once. Users may start their research with more products at hand, but their goal is to narrow them down to the best result. My testing indicates 4 is the optimal number for product comparison.
Reflection and Takeaways
Effective Project Planning
Writing down a solid concrete project plan forced me to be honest with myself when setting strategic and actionable goals towards my deadline. I planned out my weekly deliverables every Sunday night and made a habit of referring back to my project plan every morning. This helped me stay on track and avoid surprises down the road.
Balance User Needs vs. Business Goals
At its core, UX is about finding “what can I do to enhance user’s overall satisfaction?” But while usability and interface aesthetics are essential, this capstone helped me practice design thinking with a business mindset. Connecting with users and testing the hypothesis was crucial to finding the right balance between the user’s core needs and Arroyo’s business objectives.