Cherry Street Coffee House

iOS app redesign for E-Commerce
 
 
 

Client: Cherry Street Coffee House

My Roles: UI Designer, Information Architect, Project Manager

Duration: 2 week sprint

Tools: Sketch, LucidChart, Adobe PhotoShop & Illustrator

 
cherryst_sign.jpg
 
light_gray_bg1.jpg
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. 

20200105_103227.jpg
 

 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.

 
 
 
light_gray_bg1.jpg
HOW WE GOT TO THE SOLUTION
 
20200106_124959.jpg

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

 
light_gray_bg1.jpg
 

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

 
 
p3_competitors2.png
 
 
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.

 
 
ui_styleguide_all.png
 
light_gray_bg1.jpg
 

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

 
p3_SUSscore1.png
 
light_gray_bg1.jpg
 

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