Redesigning a Restaurant App
eCommerce • Interaction Design • Visual Design • Information Architecture • User Research
Looking to create another eCommerce system I searched for restaurant chains without current food delivery apps. I eventually came across the In-N-Out Burger mobile app, one of the few restaurant chain apps that has yet to implement functionality that enables users to pre-order food. I scrolled through the reviews (below) to get user goal inspiration.
Notice in the top two screenshots the 3-star review at the left and the 1-star review at the right. The reviews from the bottom two screenshots speak for themselves. Based on the reviews I created two sets of user goals:
As a customer I want to…
- Pre-order a pickup meal
- Order online
- Have my food delivered
- Know wait times
- Accomplish everything without signing up
- Have multiple payment options
- Check gift card balance
- Add money to gift cards
- Read nutrition facts
- Create favorite orders
- View my order history
- Track a delivery
- Track an order as it's prepared
User flow and information architecture.
Though I am showing this before the visuals, I actually created this flow after finishing the screens so I could add the button/link interactions to the architecture. At the beginning of the project I used pen and paper to create a rough version of this flow.
Low fidelity wireframes.
I have multiple art degrees, so I promise I'm neither this bad at drawing nor this bad at handwriting. But often my designs begin as chicken scratch wireframes that allow me to get visual ideas on paper as quickly as possible to tackle the user goals above. What you see here is the pen and hand desperately attempting to keep up with the brain. Since this is a solo project, the wireframes only need to be legible to me. If this was a team project, I would refine these wireframes into mid- and/or high fidelity.
Log In screen (left) and Sign Up screen (right).
One of my user experience pet peeves is forcing the user to sign up for something that has neither provided that user any value nor indicated it will provide that user any value. While forcing the user to sign up initially maximizes the number of immediate members, the percentage of active members will be lower than that of a design system that enables users to sign up only after they believe the app somehow makes their lives easier. A “Use As Guest” call-to-action (CTA) maximizes sales on all e-commerce platforms by enabling users who would otherwise be discouraged by a sign up process to make purchases.
Order screen (left) and Delivery Information screen (right).
The home screen on the current app gives the user a menu with basic website links. The Order screen on the redesign acts as the home screen where I put three pre-order CTAs. The Delivery Information screen appears when the user selects “Get Delivery” option on the Order screen.
Location screen with default (left) and location selected (right).
The Location screen appears when the user selects either “Eat In” or “Pick Up” options on the Order screen.
Menu screen (left) screen and Item Overlay screen (right).
Menu w/ Item in Bag screen (left) and Secret Menu (right).
Bag screen (left) and Payment Information (right).
Submit screen (left) and Order Confirmation (right).
Tracking screens for delivery orders.
Like any disciplined independent creative, I gave myself an arbitrary deadline, so most of the work above I completed within a two-week span. However, deadlines create limitations, which is why no perfect app exists, thus the term, "minimum viable product" (MVP). I determined that the best place to end this project is a basic demonstration of the order process, which means this app design is far from complete as a concept. Below is what the app would need to be closer to “complete,” including but not limited to:
- Delivery info confirmation overlay
- Back button in certain places
- Error messages
- Account management
- Order history
- Restaurant hours added to Locations screen
- Functionality on burger orders enabling users to add or subtract ingredients and to choose between raw and grilled onions
- Nutrition facts
- Add and/or edit gift card functionality
- Multiple payment options added to Payment Information screen, including a gift card option, which would include functionality to either type in a card number or select a gift card on file for users with accounts