Coffee Collab
Conceptual Design and UX process
Starting from conceptual design to post-evaluation, a thorough UX process was done comprising of wireframes, prototyping, and user testing for the fictional e-commerce brand Coffee Collab
Goal
Coffee consumption is at an all time high along with the rapid growth of specialty coffee shops offering a wide selection of different varieties from around the world. Unfortunately, most people don't have the time or the means to visit a coffee shop everyday to enjoy the higher quality and selection provided. An online solution is to have coffee delivered straight to the customers home, with the aim of using a one time ordering system or subscription based method. The variety provided by this coffee curator will be international to support smaller producers and also provide a wider selection to customers.
Background
Coffee Collab curates the best coffee domestically and internationally. For a monthly subscription customers will receive a coffee box of hand selected coffees from the around the world. Customers can also shop for coffee and coffee supplies from the online store.
Role
UI/UX Designer
Tools
- Sketch (High Fidelity Visual Design and Wireframe)
- Invision (Interactive Prototype)
- Canvas Flip (Interactive Prototype, Heat mapping tools, and Video Recording of User tests)
Research
I began with a simple background search on coffee drinkers in the U.S. and the online options available to them. Getting an understanding of the target age group of most coffee drinkers helps to gain a better understanding of the users typical needs. Gaining insight on the amount of coffee consumption typically consumed, and online shopping helps shape the options that will be given to users on the ordering page and the frequency of delivery options needed.
Competitive Analysis
A brief search on coffee delivery sites available on the web was conducted. Most sites were lacking a subscription based form of ordering. They also lacked a form of coffee curating and only provided coffees that were available from that specific shop and not from other specialty coffee providers.
Key Findings
35% of people ages 18-24 and 42% percent of ages 25-39 drink specialty coffee daily
National average is 3 cups a day for the average drinker in the United States
Millennials driving an upward trend of gourmet coffee consumptions with 43% of them drinking gourmet coffee
Of the coffee drinkers who make their coffee at home, 73% get their coffee from the supermarket, while 3% order online
Users
To understand the users perspective, informal interviews were conducted with potential customers ranging from ages 25-64 years old. In the interviews the users expectations and goals were assessed with questions pertaining to coffee consumption, and online shopping
Assumptions and Painpoints
- People are happier with subscription based ordering if they can customize the frequency, amount, and variety of products
- Users are open to the idea of a one-stop solution to select and home deliver their coffee products
- Most users are willing to try a variety of coffees from different vendors
- Drinkers want to able to make coffee in their own home
Personas
After speaking to the interviewees personas were created based on addressing the user's conventional requirements for the product. These personas addressed the users wants, needs, and pain points that the potential website will need to solve based on the persona's character, behavior, attitude, skills.
Solving
After understanding what users appreciated, as well as deficiencies that were existing in current products, the user flow mapping will help visualize features with the intent of addressing these user's needs. The end goal for this webpage, like any e-commerce, is for users to understand the intent immediately, locate and explore products, and complete the check out process, all the while helping them recover from errors.
User Flow
- Home page will immediately offer a search function as well as explore option for users to easily locate products.
- Users can locate the subscription page immediately from the homepage
- Explore product page will offer users the ability to edit the amount of product, delivery times and filter by location.
- Shopping cart page, shipping, and billing pages will all provide efficient ways of continuing or exiting the process.
Solution
Design
Simple wireframes were created with the users goals in mind and accomplishing important tasks . Locating the subscriptions, exploring products, selecting quantity/ delivery times, viewing cart, and check out were all critical tasks that needed the most streamlined solutions.
Create
Color
The analogous color scheme was largely inspired by the idea of coffee from around the world, its natural origins, and a mix of your modern city coffee shop. The contrasting ideas, mixing fresh organic coffee, with modern industrial city coffee shops are evoked in the mood board and color scheme. The monochromatic color scheme of orange will serve as an accents on the site, great for call to action buttons, and text, since it is an energetic and more passionate color.
Bringing to Life
Moodboard
Full Logo
The Coffee Collab logo will have a modern touch with hard lines and ordered text. The coffee bean symbolizing a flower will evoke a feeling of freshness and earthiness like the coffee itself.
Web Logo
The full logo will be used for branding purposes, such as merchandise like mugs, hats, tshirts, ect. The condensed logo will primarily be used on web interfaces
Design
Abril Fatface is a heavier titling font which will hold color and contrast well. The curves add a refined touch and will draw the users attention for headers and logos.
Roboto will be used for the majority of text fields and descriptions. Its rigidity and geometric feel give a sense of modernity and contrasts efficiently with the soft curves of the Abril Fatface font.
Mockups
Using the wireframes and design inspirations from the mood board, mockups were created using Sketch. Users can move through each design on the Invision App.
Bringing it to the Users
One goal prior to the usability testing was keeping the navigation simple so the users that were interviewed and observed testing the website can complete the use task given to them. Users should be able to move from the home-page efficiently, and explore the interface effortlessly. Locating the product, subscription page, and moving through the check-out pages will be milestones the users will need to complete.
Usability Testing
- After being on the homepage do you understand the intent of the website?
- Locate the subscriptions for different coffee products
- How do you find products on the homepage?
- Try moving to the product page, do you understand the filters, what will happen when you put it on location?
- How would you edit your selections on the product page?
- Are you able to locate the product page and add an item to your cart?
- Go through the check out forms and place the final order
A brief questionnaire of 8 questions and the users grading of items on a linert scale will be used to collect quantitative data after users have completed usability tasks.
As users moved through their use tasks given to them, the time spent on each page was recorded as well as heat map data recording attempted clicks and mouse lingering.
What it tells us...
Heat map data shows where users attempted to click. This user located most metaphors such as the shopping cart and the drop down menus. The explore is key to moving to the next product page.
- Users neglect the “Explore” button and go first to the product drop down, and seem to be neglecting the subscription selections.
- Users stuck on home page and go back and forth between drop downs.
- The most time spent on the Category page, need users to move faster to Product page
- Users go back and forth between check out pages and ask questions about “Wallet” and “New Customer”
Interpret and Effect Change
Written observations and comments were recorded by users during the evaluation process and user task prompts. Users comments and intrigues about certain features serve as quantitative data that shed light on possible pain points existing in the design.
User Comments
- “I’m usually use to going to the product pages through a drop down menu”
- “What happens if I enter my address wrong?"
- How do you find products on the homepage?
- “I'm usually use to seeing a product rating or be able to give my own rating when ordering”
- “I like that I can see what my order is on the side while I am checking out!”
- " I would probably click the back button on my browser if I wanted to go back on the check out page."
Along with users comments, quantitate data through the survey, and heat mapping, design heuristics and common practices were taken into account to narrow down possible solutions to the problems identified.
Design Heuristics
Based on “Ten Usability Heuristics“ Jakob Nielson and ‘The Design of Everyday Things” by Don Norman
Recognition vs Recall
Users recognizing the product menu as a way to move onto the product page
Affordance
Subscription lack affordance, does not appear to be clickable to move to the next page
Visibility
User’s not using breadcrumbs to move to the previous pages on the check out, due to lack of visibility
Help Users Recover
Need to show users what will happen if they enter their address or miss filling out a box during check out
Applying the Feedback
Final Design Iterations
Final Prototype
Click below to interact with the final prototype on Invision
My projects
