CARD SORT

After gathering and analyzing the research and understanding the persona’s needs and pain points, I did an open card sort where users categorized what made sense to them. I have omitted some navigations and added in extra navigations such as “rewards program” and “promotions” as this is what the research has pointed out.

From the mental models of the card sorting, it has 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. With that I made sure those mental models were carried over onto the site map.

SITE MAP

Following of the persona, Everett needs an organized and understandable navigation with an easy way to find promotions and menu items. I also kept the number of navigation links to a minimum to fit for a small mobile screen.

PROPOSED SOLUTION

Simplify the mobile ordering process
Make the navigation more clear and obvious
Create a loyalty program on the mobile app so customers can conveniently redeem their rewards

DESIGN EXPLORATION

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

COMPETITORS

I looked at the following competitors’ mobile app to see how they visually represented mobile food menus and ordering process.

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

UI 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.

USER INTERFACE 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.

LOCATIONS (Copy) (Copy) (Copy) (Copy) (Copy) (Copy) (Copy) (Copy)

MENU (Copy) (Copy) (Copy) (Copy) (Copy) (Copy) (Copy) (Copy)

REWARDS (Copy) (Copy) (Copy) (Copy) (Copy) (Copy) (Copy) (Copy)

CREATE ACCOUNT (Copy) (Copy) (Copy) (Copy) (Copy) (Copy) (Copy) (Copy)

CHECKOUT (Copy) (Copy) (Copy) (Copy) (Copy) (Copy) (Copy) (Copy)

**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