UI/UX Strategy, Design, & Research
APP
DESIGN
A fictitious project as part of the Google UX Certification Course.
PROJECT OVERVIEW
THE CHALLENGE
Restaurant A had no way for customers to order delivery or take-out without doing it over the phone.
THE GOAL
Design an app for Restaurant A so users can order online with a seamless user-experience, and not have to phone in their order.
Research
Ideate
Design
Prototype
TOOLS
Figma
Adobe Photoshop
TIMELINE
2 months
ROLE
UI/UX Designer
RESEARCH
THE APPROACH
I conducted user interviews to understand user behavior with online take-out or delivery ordering. I also conducted a competitive analysis to see the trends in the market for restaurant ordering apps.
THE GOALS
-
Learn the reasons a user does or doesn't order online
-
Identify pain points or unmet needs that users face when trying to ordering online
-
Learn about competitors strengths and weaknesses
USER INTERVIEWS
In these user interviews, I wanted to discover the online food ordering habits of participants. I asked why they order online and how often, what restaurants they usually order from, what pain points they run into on their ordering journey, and what features they've used that they like and why.
THE FINDINGS
-
Majority of participants expressed they like to order online 2+ days a week
-
Participants expressed they like the apps that reward them for their orders
-
Participants said they order online mostly after a long day when they don't want to cook
-
Participants expressed they like to see images of the food when they order online
-
Some challenges the participants ran into were during checkout and delivery
-
The most common restaurants are in the competitive analysis below
WIREFRAMES
SKETCHES
I quickly jotted my ideas down with paper wireframes. I wanted to prioritize a quick and easy ordering process by adding an order button at the top of the page. I also wanted to highlight popular menu items right away.
.png)
USER PERSONA
I wanted to discover the online food ordering habits of participants that regularly order take-out or delivery. Here is a persona to showcase who will be using the app.
STRENGTHS
-
Rewards point system with each order through the app for free items
-
Provides detailed nutritional information and images
-
Easy to navigate
WEAKNESSES
-
Delivery through third party for additional cost
-
Must use app to get rewards
WEAKNESSES
-
No rewards program
STRENGTHS
-
Large images of menu items
-
Easy ordering features on items
-
Smooth check out process
STRENGTHS
-
Images of all menu items plus add on available
-
Easy ordering system
-
Rewards available
WEAKNESSES
-
Delivery through third party for additional cost
COMPETITIVE ANALYSIS
It is important to get a big picture of the market by conducting market research to understand what we know, what we don't know, and if there are any relevant trends. The insights I gathered from market research will help me create user journeys and wireframes. I looked into the restaurants that were most common during the interviews, plus a few more to get a larger scope.
THE FINDINGS
-
Most fast food apps provide a rewards system
-
A majority of apps show images of the food
-
Some restaurants don't have an app and users order through their website
-
majority of website ordering restaurants don't offer rewards to its users
-
IDEATE
After reviewing my goals, I created information architecture, user flows and wireframes. Here is the application map I created for how this app will flow.
.png)
.png)
LOW-FI WIREFRAMES
Next I created my first set of low-fidelity digital wireframes. I adopted a user-centric approach by addressing user needs and prioritized useful buttons and images. My goals revolved around crafting emphasizing important elements like order buttons, menu items and images. From the IA, I wanted to create an intuitive navigation system so users could find the food items they want quickly and order effortlessly.
PROTOTYPE
I finalized all the high-fidelity pages and created a scaled down version of it the app for my final prototype.
DESIGN
DESIGN SYSTEM
When putting my design concepts together, I created the design system for the app basesd on Restaurant A's branding.
MOCK-UPS
Based on insights from my first usability study and low-fidelity wireframes, I started on my mock-up designs. I included a favorites section on the homepage for users to easily add top items to their order. I also added a checkbox for users to click if their shipping and billing address is the same for faster check out. A main objective was to get the users to find a menu item, customize it as needed, and proceed through the check-out process.
I considered accessibility by using different sized headings to show hierarchy, I made navigations through the design clear with visual elements for users that rely on assistive technologies, and I kept in mind using alt text for smooth screen reader access.
WEBSITE
DESIGN
This process was used on 2 website build projects
