Client:
Case Study
Role:
UX Designer
Project Duration:
1.5 Weeks
Tools:
Sketch, InVision, Miro, Mural, Slack, Trello, Keynote, Google Forms, Google Sheets
Project Summary
The client, a Californian electric bike company, needed a to increase their conversion rate on their e-commerce site. The goal was find users with the means to buy an expensive E-bike and reinforce that purchasing process with a strong product website.
The Client
GreenBike, an electric bike company, started in Tel Aviv back in 2005 and became the leading e-bike company in Israel.
The company now owns a workshop in California to serve customers and uphold warranty services. In addition to bike products, their website offers instructional videos, some customer reviews, and offers registration for test rides.
Evaluating the Product
I wanted to understand the current iteration of the client’s website and browse every screen as a hypothetical E-bike customer.
Items were not clearly advertised on any of the customer product menus.
The lack of organization of the site’s information and products was without a doubt going to be a pain point when shopping the site in my upcoming user tests.
Violation / Issue / Severity 1 - 4
Learnability -
User confused where to find E-bike products. [ 3 ]
Memorability -
User is technically disoriented lack of organization. [ 3 ]
Error Management -
‘Sold Out’ notifications vary in location depending on each product. [ 3 ]
Efficiency -
Finding a specific model was difficult. [ 2 ]
Competitive Analysis
The global bicycle market size was valued at USD 47.51 billion in 2017. Some brands ruling the online bike market are Specialized, Trek and Rad Power Bikes. Taking a look at what the competitor’s have to offer when it comes to feature inventory out of 22 features.
Example Features:
Search Bar
Global Navigation
Wishlists
24/7 Assistance
User Interviews
I conducted interviews with avid cyclists and people that had previously made big-ticket purchases online to identify user needs.
I heard commonalities like:
“I need my bike to reflect my personal flare”
“I will invest a good amount of money into a nice bike”
“I always do a decent amount of research on the product I’m thinking about buying. Customer reviews are usually the most helpful.”
Users also needed customer reviews, professional sales assistance and understanding their frame size to feel comfortable buying an expensive bike online.
“Users also needed customer reviews, professional sales assistance and understanding their frame size to feel comfortable buying an expensive bike online.”
The Persona
With real testimonies from people that used GreenBikes site, I compiled all of this information for a persona. I used this persona, Miles, to remind myself who I am designing for throughout the rest of the project.
Task Analysis
I then set up a series of tasks for users to complete while shopping on the GreenBikes site. The goal was to see real customer’s interactions throughout the shopping experience to identify a stronger problem.
The violations I discovered earlier were the same issues users were struggling with in my task analysis.
Half of the users did not finish the task correctly due to heuristic violations or did not feel comfortable completing the purchase towards the end of their task journey because they didn’t even know what they were buying.
Take a look at our Persona’s journey through the shopping process below.
Problem Statement
Miles, who feels nervous about purchasing an E-bike online needs a trustworthy brand website, but faces difficulty feeling confident in the shopping process on GreenBikes.
Solutions
Navigation for novice and expert users. Harnessing the excitement from beginning to end.
Better content organization to compare with competitive sites or familiarities the users expect.
An updated appearance to match the user’s expectations when purchasing an expensive bicycle.
Beginning User Flow
When beginning the design solution, I made sure to revisit the Persona and problem statement, frequently. The first thing I wanted to create was a flow our users would take, then articulate what screens to create after refining the flow.
Sketching
During a timed design studio session, I focused on 3 key design artifacts to get the ball rolling on my mockup.
A refined user flow, rough sketches of each screen the user would interact with and where information might be stored on each page (with the Homepage as a key first impression).
Testing Navigation
One of the main pain points for users was the lack of organization within the site’s navigation, testing the placement of major categories of products and company services to generate a results of user behavior was important.
Through card organizing, users unexpectedly placed several categories under ‘Homepage’.
This research told me users wanted to see a captivating Homepage and organized global navigation for the site. These results made it clear where users usually find specific site information.
Medium-Fidelity
Moving these into a digital medium-fidelity prototype, I designed roughly 23 screens in greyscale to build a prototype to test this solution on users. It was time to test my idea and retry the task from earlier.
I was very excited to see if my prototype would solve our user’s problem. I conducted usability tests in medium-fidelity to gain more insight on my design and find areas to improve the solution for users.
Usability Testing
I discovered some vital feedback after synthesizing all my interviews into an affinity map. I found things like:
“I think the site over is clean and straightforward.”
Users thought the site was missing a few things they normally see on other websites like quantity selection, less process repetition, and customer reviews on product pages.”
Users also expected the homepage would have high quality photographs of the products.
Key Insights
‘Don’t reinvent the wheel’ - Customers are used to seeing certain information on the homepage and elsewhere. Search bar will be added.
‘Purchasing an expensive item takes trust’ - Customers should have reviews available with products.
‘First impression is everything’ - When selling products that reach $1k, a website should reflect a professional tone.
‘Clean it up’ - Customers like seeing clear and structured information or visuals.
High-Fidelity Prototype
A few highlighted features were a search bar, drop down menus, a detailed supplemental footer navigation and a product filtering tool for more advanced users.
A style guide was built to reinforce the strength of the product website. Users expressed in previous iterations that the site “looked cheap” when marketing expensive bikes, so it was important to consider in my design.
The Prototype
Next Steps
Continue to evaluate the cycle e-commerce heuristics and best practices
Shoot detailed universal product shots with in quality, including key bike components
Analyze Customer Review tool with usability testing
Build a frame sizing chart tool
Perfect Help Tool with usability testing
