Because there exist countless variations in the size, brew location and roast type, etc. of coffee, finding the right coffee is like looking for a needle in a haystack. But don’t worry. Joey is here to help you find that needle! From now on, let Joey act as your personal barista, making your coffee selection process all the more convenient.
Basics
Role
UX/UI Designer - participated in every step throughout the project
Team
Collaborated with two other UX designers
Problem
If you have ever purchased coffee at a store, you must have run into a situation where you stare at a shelf full of coffee blankly, not knowing which one to buy. It’s a world of information to sort through; choices galore, and there is nobody around you to help you pick. Then after carefully considering all the possibilities, your brain tells you “ah this bean seems alright.” Was it though?
How can we educate users so that they
become coffee experts themselves
Assumption
Before we initiated our research process, we came up with a few assumptions about how our users feel when buying and brewing coffee.
1. Users care about the quality of beans.
2. Users care about brewing methods.
3. Users don’t want to spend a lot of time purchasing coffee beans.
4. Users don’t enjoy doing research on coffee beans.
5. Users enjoy brewing coffee at home.
6. Users are overwhelmed by the variety of coffee beans.
7. Users feel embarrassed to ask for coffee suggestions.
8. Users typically stick to one type of coffee.
9. Users like to be given suggestions for coffee.
Research
User Survey
Joey aspires to make people’s lives easier. So, it is essential that we engage with our potential users to discover their needs. To collect information from a sample of individuals in a systematic way, we wrote out questionnaires on Google Surveys and sent them out to close relatives and friends who enjoys drinking coffee. In total, we received approximately 15+ responses from people above the age of 19.
Here are some of the questions and the responses we received through the survey:
Couple takeaways from these surveys were 1) 96% of respondents have experience brewing coffee from home, 2) most people use a traditional coffee maker at home, 3) majority chooses coffee based on its flavour and roast.
Persona
After analyzing the data from user research, we created a generalized persona to better understand our potential users’ goals and needs. This persona was created based on a number of assumptions that were mentioned above. It played an essential role of keeping us in the loop throughout the project.
Our persona is about Jane Grath who is a graduate student wanting to start brewing coffee at home but doesn't know where to begin.
Experience Map
Using the persona, we were able to create an experience map. We used sharpie and sticky notes to work collaboratively as a team. The experience map allowed us to identify when and where our users would run into problems and gauge what our most viable product (MVP) would be.
Ideation
Joey Design
We focused on creating an MVP that meets the user’s core needs. Our approach was to create a product that implements a questionnaire. That is, users need to answer a series of questions asked by Joey to be matched with their perfect coffee. We began ideating, knowing what our main feature of the product should look like. Finally, we came up with two different designs for Joey and tested out which design works better.
First design uses a Chatbot
The goal for this design was to provide a personalized and engaging experience for our users. During the onboarding flow, Joey’s chatbot asks 10 questions to users. Based on these questions, Joey will find the perfect coffee for them. We wanted our users to feel as if they were interacting and having a conversation with a personal barista.
However, after testing out our prototype, we found out that the questions were not relatable to the users, the process rather took long, and people had trouble navigating through the app.
Second design uses a navigation bar
The navigation bar has three buttons: “Explore”, “Joey” and “Favorites”. This design will provide more options and freedom for our users. We wanted to give our users the freedom to browse for coffee beans, take simple but more relatable quiz to find their perfect coffee, and quickly see which coffee they matched up previously.
Joey Design Decision Making
We listed out the pros and cons of the two designs. We noticed that the first design was creative, but it took away the simplicity and functionality of the app. Chatbot got too wordy and could potentially overwhelm our users. In addition, when users want to find another type of coffee, they might feel that going through the entire Q&A process again is redundant.
Taking into consideration the pros and cons, we reached an agreement that we will move forward with the second design. The user flow of the second design provides easy access to relevant information. After all, the goal of this product is to quickly and straightforwardly find a type of coffee that our users will enjoy.
Wireframing
Greyscale Wireframe
We proceeded with the second design, and created a grey scale wireframe accordingly. Grey scale wireframe, which is a visual guide representing the skeletal framework of an app, helps us organize the interface elements. This wireframing step facilitates the design process because it emphasizes the functionality and structure of the app rather than the aesthetics.
Usability Testing
Another benefit of greyscale wireframe is that it allows us to quickly test the app without having to dive into the details. To check if our wireframe makes sense, we conducted usability testing on five different random people at a coffee. We asked them what changes and improvements are needed for better understanding of the wireframe.
Main Takeaways
The layout of the explore screen
needs improvement
Users wants to know
how many
questions are left when
answering
the questionnaires
Coffee details screen needs
better organization
High Fidelity Wireframe V1
Taking users' feedback into consideration, we jumped onto Sketchapp and created a Hi-Fi wireframe. A Hi-Fi wireframe builds on a greyscale wireframe. Its objective is to make an app visually appealing by adding colors and images, and improves content by including more realistic or actual information. Our Hi-Fi wireframe was completed using 2D quirky playful icons, simple navigation, organized contents, and well-established questions.
Usability Testing + Iteration
After creating a high fidelity wireframe, we conducted another usability test. From this usability test, we found out that our app needs onboarding screens, explanation during questionnaires, and eCommerce functionality to make transactions available.
Why Joey needed onboarding screens
To users, using a new application is like meeting someone for the first time. First impression is everything. You might connect with that someone instantly or the initial interaction can be completely awkward. We discovered during the usability testing that users felt completely awkward and lost without onboarding screens. So to ensure that Joey provides great first impression and help users connect instantly, onboarding screens were established. Onboarding screens will educate users about what benefits they will get out of Joey.
Why Joey's questionnaire needed an explanation
Our targeted audience includes people with zero knowledge of coffee. To prevent confusion during the questionnaire, we included a pop-up screen that provides a guide for the process. This screen can be accessed by clicking the question mark button on the top right hand corner.
Why Joey needed e-commerce
One common question we were asked from our users was “Can I buy this coffee straight from Joey?” Users wanted to purchase their perfect coffee right away once they discovered it on Joey. To solve their pain point, we decided to include an e-commerce functionality to Joey. Our most viable product's (MVP) goal was to help users find their coffee. But now, it is also to help them buy their coffee straight from their home.
Including E-commerce
“American consumers [drink] on average about two cups of coffee per day
[and] the majority of the coffee [are] consumed at home” Statista USA
E-commerce was a completely a new challenge. We treated Joey’s e-commerce functionality like another project. The big challenge of e-commerce is converting visitors into buyers. As user experience designers, we needed to make the transaction process easy and convenient. Even a slight inconvenience or lag in the process could greatly decrease the chance of a purchase. Keeping this in mind, we began to brainstorm.
My team and I all had history of purchasing an item online. Using our personal experience as a guide, we wrote down a list of companies that offered pleasant checkout experience. Top 5 companies were:
These five companies had totally different approaches for the checkout process. To find out which is more suitable for Joey, we broke down the checkout experience from these companies. We came up with the following conclusions:
Time is money. To increase sales conversion and to reduce customer abandonment, checkout process needs to be easy and speedy. We wanted to design a process where users didn’t give up in the middle.
Final E-Commerce Design
Final Interactive Design
Designing Joey has been a challenging but rewarding journey. This project definitely took longer than expected, especially prototyping and visual design phases. We wanted to incorporate the feedback we had received from the initial chatbot design, and it required a lot of effort and time to come up with and decide on a new design. Hopefully with the learnings from this experience, I will be able to move through these steps faster in my future projects.
Checkout Joey's Website
Back to Top
