Lyftie
Team: 2 People
Tools: Figma
Time Frame: 3 Weeks
Context
Lyftie is a major tech company with several products including ride-sharing, short-term housing rentals, social networking and shopping products. They want to invest in a food delivery app that can compete with companies like UberEats or Grubhub.
Design Process
Sprint 1: Research
Sprint 2: Define
Sprint 3: Ideate
Sprint 4: Decide
Studio Critique
Sprint 5: Prototype
Heuristic Evaluations
My partner and I tested the usability of an app or website’s interface by rating them based off of a set of heuristics or evaluation, and looking at the app from the user’s standpoint. We used Jacob Neilson’s 10 Heuristics as our point of reference.
Since we were creating a new delivery app, we needed to see where users were struggling in the flow of using a product so that our product could meet their needs.
We didn’t place an order and test the delivery process of the apps as we were working with limited resources.
We compared two competing delivery apps: Caviar and Chowbus.
Journey Maps
Journey map of Caviar. Done by me.
Journey map for Caviar. Done by teammate.
Journey map of Caviar. Done by me.
Once we had completed the heuristic evaluation, we then created journey maps to help us visualize the process we went through when using the apps.
This helped create a timeline to see how we each felt about the process, and what opportunities we could work on going forward.
Affinity Map
After completing the journey map, we created an affinity diagram, where we organized the information into groups so that we could discover recurring themes or issues.
Design Problems
We identified a variety of problems and possible solutions to help us develop a problem statement.
Design Problem
Users unable to always swipe back a page
Design Problem
FAQ not obvious
Design Problem
No efficient way to delete an item
Design Problem
Users can’t order different from different restaurants at once
Design Problem
Reviews aren’t helpful and can’t be edited or changed after being submitted
Design Problem
Don’t differentiate buttons with different actions
Solution
Make it possible to swipe back on all pages
Solution
Have a “need help” button
Solution
Add a delete button along next to cancel button
Solution
Add a “continue” button if you want to order from several restaurants at once
Solution
Have a section where customers can review a restaurant, not just leave rating
Solution
Change the buttons/copy to differentiate actions
Problem Statement
We found some recurring problems while making the above list:
Not Friendly to New Users
Problem Statement 1
“What can we do to help new users place an order?”
✔︎
Cannot Order for a Large Group of People
Problem Statement 2
"What can we do to encourage groups of people (schools, work, parties) to order food?"
✗
Final Problem Statement
"What can we do to help new users get help easily when using our app?"
Chosen Features
Other Ideas
Ideas For App Features
-
"Need help" notification button that pops up every time app is opened
-
Live tutorial
-
Link to commonly used coupons
-
Menu with keywords and link to tutorial video on homepage
-
Food restrictions form during sign up
-
Food restrictions filters
-
Large icon/warning for restaurants with food restrictions
-
Button option to order from several restaurants
-
Option to have popup suggestions to explain each tool (can be changed on account page)
-
Mini wallet or some way of using several payment options that are on the user's phone
-
Type in number when selecting quantities instead of using an arrow
User Flows
There were two pathways that a user could potentially take:
User Flow 1 – Onboarding Process, Video Tutorial, and “Need Help” Feature
-
Fill out account information during sign up
-
Option to watch a tutorial video after
-
Opportunity skip the sign up process in case they wanted to get a feel for the app before creating an account
-
Can watch the video tutorial later on by clicking on the “Need Help” button
User Flow 2 – Creating Account After Signing In As Guest
-
Accessed by clicking on Account link
-
We ultimately decided to prioritize the onboarding process and Need Help feature
Wireframes
My partner and I each did wireframes for different screens separately. This allowed each of us to explore our own ideas freely. We then reviewed our designs together.
Account Information Screen
Address Screen
Video Tutorial Popup Screen
Flow Using Wireframes
We regrouped and reviewed each other’s work and redesigned some of the wireframes to have consistent layouts, before organizing them into a flowchart to help us visualize the process.
Style Guide
Primary Color
HEX: #F19E51
-
Orange for affordability and inviting atmosphere
-
For buttons and background
Secondary Color
HEX: #CE6022
-
Darker orange for subtle contrast
-
Reddish hue more warm and has food connotations
-
For icons, will be used for animation when clicking on buttons
Gradient
HEX: #CE6022
to
HEX: #F19E51
-
Simple but creates sense of depth
-
More interesting than a single color but not distracting
-
For pages with less content
First Iteration of Prototypes
Screens Created by Me
Account Information Screen
Video Tutorial Screen
Video Tutorial Screen Version 2
Need Help Screen
Screens Created by My Teammate
Sign Up Screen
Sign Up Screen Version 2
Home Screen
Final Iteration of Prototypes
My role consisted of cleaning up the layout and fonts. My partner worked primarily on developing our presentation. We then each reviewed each other's work.
Sign Up Screen
Account Information Screen
Video Tutorial Screen
Need Help Screen
Home Screen
Animation Showing Onboarding Process, Video Tutorial & Need Help Feature
Animation Showing Signing In As A Guest
Next Steps
Additional Screens
Develop a prototype of the Map and Find Your Address screens
Interactive Input Fields
Make it possible to type into input fields in Account Information and Need Help screens