Designed for Coffee Enthusiasts
BrewTonic
A coffee maker e-commerce website
Original Hypothesis
With hundreds of coffee machine brands and products on the market, it can be a haunting task for consumers to select a desired coffee machine. People may have very specific requirements and preferences when it comes to how their morning cup of coffee is prepared. For our coffee machine E-commerce site, how we can stand out from competitors, and how we can provide consumers with essential information through product comparison and recommendation features will be extremely crucial to increase the conversion rate.
Problem
The client has shared data that shows 50% of users open on average 7 item pages and then abandon the site without moving any items into the cart. Your PM’s hypothesis is that users are unable to determine which coffee machine is best based on relative features.
Additionally, 70% of users who place an item in the cart do not purchase any product. Data shows that users abandon the cart at the registration page. Right now, users must make an account to purchase. Your PM wants you to design a guest checkout to solve this. The guest checkout must capture email.
Solution
Simplify Checkout: Minimize the number of steps in the checkout process. Implement guest checkout options and offer auto-fill features to streamline the experience.
Trust Signals: Incorporate trust-building elements such as customer reviews, security badges, and clear privacy policies to establish credibility and trust with your audience.
Payment Options: Offer diverse payment methods to accommodate various customer preferences. Provide a secure and user-friendly checkout process.
Product Comparison: provide essential specifications of coffee makers that users would want to compare and create a clear and intuitive interface for the comparison feature.
Objective
One of the successes of E-commerce websites is high conversion rate and high rate of repeat customers. Thus, I seek to create a solution that will drive up the conversion rate.
Based on the brief from the client, one of the reasons guests leave the website is because they are unable to make a decision.
If I can provide an optimal experience for production comparison and smooth checkout experience, it will help with the problem. My design will focus on the product comparison screen and the checkout screen.
Research
Secondary Research
Through academic studies, articles, and industry reports, I learned about the pain points and trends in the current E-commerce industry and Direct-To-Consumer brands.
Main factors causing consumers to abandons the shopping carts:
1. Poor product information page with low quality images.
2. Users were not able to compare the products side by side.
3. Users don’t trust the seller and not sure if the payment methods secure enough.
4. Not enough reviews from other consumers.
5. Complex Checkout and sign up process may also cause users to abandon shopping carts.
Competitive Research
Meet the users
Based on the research and interviews, I identified two personas for the BrewTonic Ecommerce Website.
Persona 1 - John Parker represents sophisticated coffee lovers with particular preferences for coffee makers .
Persona 2 - Sara Kim represents busy working professionals with a household of 4 and consumes a lot of coffee.
How Might We
Can I reframe the problem?
I’ve gathered a lot of helpful information from secondary research, and competitive analysis, but I needed some direction on how to truly solve the problem. By asking the critical questions, I seek to solve the problems I defined through the next stage of the project.
How Might We
help users filter product efficiently.
allow users to compare different coffee makers.
provide a quick and secure checkout experience.
Key Insights:
Not enough information and specs about the product can be a major reason for low conversion rate.
To make a purchase decision, users will want to compare several items.
A lot of first time buyers may prefer the guest checkout feature.
Users tend to look at the ratings and reviews with photos.
Ideate
User Flow
The purpose of the user flows are to identify the critical paths users tend to follow while using the theme park app. The process ties directly to the red routes I am developing in the next phases.
Wireframe
During the sketching and wireframe phase of the design process, I determined on one main red routes based on the MVP. The product comparison and checkout flow. With a few quick hand sketches as a start, I moved onto the low fidelity screens via Figma. With my efficiency in the Figma program, I could quickly develop my design.
Usability Testing
I conducted 5 usability tests to get a sense of how these high-fidelity designs would hold up with real users.
My initial objectives and goals were to identify the following:
· Initial impressions of home screen and the shop product screen.
· Uncover usability problems in the “product filter” flow.
· Uncover usability problems in the “Purchase product” red route.
· Uncover usability problems in the “product comparison” red route.
· Find out where do users tend to loose patient and abandon the shopping cart.
Main Tasks for Participants:
The participants were given three main tasks.
• Task 1: Shop for coffee makers and add product to comparison.
• Task 2: Compare product and detailed product information.
• Task 3: Go to shopping cart and guest checkout.
Round # 1 - Critical Issues
Participants can see and understand the “compare” icon appearing under each product. Once clicked, there is no message or indication that they’ve added the product into the comparison page. • Add the shopping cart screen, there is no way for users to access the comparison page. Determine whether users expect to use the feature or not.
Shopping Cart: Guests should be able to edit product quantities. Understanding whether they are getting a on sale item is important. If guests want to go back and view the product detail page again, they should be able to do so easily.
Product Filter: participants usually have previous experiences with the filter function and understand how they could use them to speed up and narrow their searches. Currently, only popular filters are shown. Consider whether a full feature filter is needed.
Branding
Brand LOGO:
Color Palette
The color scheme is inspired by the coffee beans and coffee grounds. The coffee plant is green in color, but the coffee beans, which are seeds, in dark brown color. The coffee colors are a series of neutral colors. In comparison, the vibrant green color will pop on the screen and draw users’ attention.
Mood Board
● Brand personality — an expert in the field who is always knowledgeable about the very latest trends and best products related to coffee machines.
● Brand attributes
○ Savvy
○ Focused
○ Serious
○ Dependable
Font Family
Components
Design
High Fidelity Screens
At this stage, I started to develop and polish the final visual designs of the red routes based on the style guide I created. In the meantime, as I continue to iterate on the design, I also updated the style guides to better reflect the final design of the product.
Key Screens
Prototyping
With the high fidelity screens and animation design, I get to build a more functional and interactive prototype and make the theme park app come to life. The prototype can demonstrate to users how the product would look and feel.
Testing
Usability Testing
I conducted 5 usability tests to get a sense of how these high-fidelity designs would hold up with real users.
My initial objectives and goals were to identify the following:
· Initial impressions of home screen and the shop product screen.
· Uncover usability problems in the “product filter” flow.
· Uncover usability problems in the “Purchase product” red route.
· Uncover usability problems in the “product comparison” red route.
· Find out where do users tend to loose patient and abandon the shopping cart.
Main Tasks for Participants:
The participants were given three main tasks.
• Task 1: Shop for coffee makers and add product to comparison.
• Task 2: Compare product and detailed product information.
• Task 3: Go to shopping cart and guest checkout.
Round # 1 - Critical Issues
Participants appreciate the “compare product” feature during their shopping process. However, some more investigation and revision are needed to make the comparison feature more user-friendly. Participants can see and understand the “compare” icon appearing under each product. Once clicked, there is no message or indication that they’ve added the product into the comparison page.
Shopping Cart: participants can understand the coffee makers they added into the shopping cart. The key is to provide flexibility and clear information before they decide to check out. Provide payment options and shipping options before they check out. Guest checkout option is a must.
Home Page: users can see the “shop now” big button, call for action. But they tend to have different preferences in terms of how they want to start their shopping experience. Some users may click on the deals first, others may click on the shop button first.
Reflect, and Iterate
Updated Screens
In this part of the process, I synthesized the testing sessions into a detailed report, and prioritized the feedbacks that make the most impact to the user experience. Below are the updated screens.
Conclusion
Goals Accomplished
The product comparison feature provides important information users wanted to view.
Guest checkout option provided users with the easy checkout experience.
The product detail screen provides images, videos, ratings, and user reviews to users.
The shopping cart works well and allows users to edit the product.
Key Learnings
The initial research phase takes longer than expected as I was trying to identify problems to be solved and narrow down my focus.
The user interviews are challenging in the beginning, but getting easier with more interviews about the topic. It is crucial to ask the right questions to the users.
Having design system set up at the early phase of a project will save time during the prototyping phase.
Prototyping is the most exciting part of the design process, as all the design and screens are coming together.
