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
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.
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.
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.
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.
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
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
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.
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.
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.
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.
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
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.
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.
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.
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.
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.
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.
Based on “Ten Usability Heuristics“ Jakob Nielson and ‘The Design of Everyday Things” by Don Norman
Users recognizing the product menu as a way to move onto the product page
Subscription lack affordance, does not appear to be clickable to move to the next page
User’s not using breadcrumbs to move to the previous pages on the check out, due to lack of visibility
Need to show users what will happen if they enter their address or miss filling out a box during check out