Client: Cherry Street Coffee House
My Roles: UI Designer, Information Architect, Project Manager
Duration: 2 week sprint
Tools: Sketch, LucidChart, Adobe PhotoShop & Illustrator
DEFINING THE PROBLEM
OBSERVATION AND SURVEY
Coffee drinks would like a loyalty program that helps them earn and redeem rewards through the mobile app for convenience. They also found the menu to be cumbersome as the products were grouped in very specific categories. They said the search and ordering process took too long because they had to click through every category.
DISCOVERING THE PROBLEM
Through usability testing with coffee drinkers that typically order through the app for pick up we have identified these pain points and goals from them:
Frustrations:
Having to search around the app to find the correct item(s)
Language of CTA buttons aren’t clear
Long and complex ordering process
Redundant and cluttered content
Goals:
To cut down wait times with pick up orders
To easily find promotions instead of searching on the internet
To have a rewards program account on the phone in return for their customer loyalty.
HOW WE GOT TO THE SOLUTION
CARD SORT
With the frustrations of having to click through every single menu category, I conducted a few card sorts with those categories and navigation since the elements were working. It needed to be reorganized and simplified. The outcomes have shown that the majority of the participants have grouped up the different types of menu items instead of having them all under one long list.
WIREFRAMES
Our Interaction Designer, Brooke Sarcevic, converted her hand sketches into mid-fidelity wireframes and prototype.
User Needs:
Clear and categorized menu
Rewards program to accrue and redeem points for free items
Smoother and quicker mobile ordering process
BENCHMARK
I looked at the following competitors’ mobile app to see how they visually represented mobile food menus and ordering process. I wanted to understand what are on the apps that made them successful.
Discovered trends:
Use of brand colors to highlight navigations
Uses the card style to break up and contain content
Have close up of product photos to show details
USER INTERFACE DESIGN
STYLE GUIDE
Understanding what I have learned from the competitor’s analysis, with how they visually represent the menus and the hierarchy fonts and style, I have used those insights to create a user interface style guide to be used throughout multiple platforms for Cherry Street Coffee House. Brand colors that are pulled from their own branding on the official website, these will be the primary colors for usage.
PROPOSED UI DESIGN
For the high fidelity mockups, I designed out the main pages that users will interact with the most in Sketch. All the app page designs strictly follow the User Interface Style Guidelines.
Card style are utilized as containers on each page to clearly show the separated sections of information so it’s easier to understand and find what they want to access. The white background is used to help the elements and call-to-actions stand out and be more accessible.
RESULTS
With every user testing, we had each user rate on the usability of the app with the System Usability Scale. For each round we tested three participants, with a total of four rounds. The overall average scoring went up based on the task of going on the app, searching for the menu item, creating an account for the rewards program and checking out
WHAT I HAVE LEARNED
Users don’t want to scroll a lot on a mobile app and hunt around to find the menu items and product descriptions, especially when they’re constantly on the go. Product images along with descriptions is critical to save time when on the app and trying to accomplish a task
Users typically go on the app to find menu item descriptions since ingredients aren’t listed on the physical menu plaques in stores
Having a loyalty rewards program at user’s convenience gives them an incentive to continually use the mobile app for purchases