What is it?
Food To-Go allows Stanford students to explore on-campus food options and make pick-up orders from a centralized, mobile app.
Team
Seth Nguyen
Roles
User Researcher
User Experience Designer
User Interface Designer
Timeline
December 2021
Tools
Figma
Problem
The current design is outdated and contains many design flaws and inconsistencies that create an unpleasant user experience and a low customer retention rate.
Goals
Create a design system to improve aesthetic consistency and redesign features to create an easier and more intuitive user interface.
Food To-Go
I conducted user interviews on various Stanford undergraduates who frequented non-dining hall, on-campus options at least twice a week
Defining the Problem
User Pain Points
90% of interviewees mentioned low visual satisfaction
Some users said that they were unable to view options if they were not on campus
Most users said the app limited exploration and wished that it was easier to find new places to eat
Insights
Most users seemed to like the concept of the app, especially since COVID had limited communication about which food locations were still open and if they operated at certain hours.
The interviews also revealed that even if the app reduced wait time by a few minutes, some users still didn't use the app because of its difficulty to use.
Establishing a Design System
In order to improve consistency and branding, I used the Stanford's color, cardinal red, as a highlight while using neutrals as primary colors. Though this was a solo project, this step would be helpful in communicating absolutes to a team of developers and other designers. Still, it was helpful in defining rules for myself while I redesigned the app. Brainstorming
Before prototyping, I created a user flow so that I could get a general sense of how users navigated through the app. Afterwards, I started sketching wireframes to decide which designs worked best for each page. Then, I created wireframes and began applying the colors and typography listed above. 
The Redesign
01. Onboarding and Sign In
I’ve redesigned the welcome page to have a friendlier and cleaner appearance. I’ve also added a feature that allows users to directly and easily navigate between the sign-in and login pages. Users have the option of signing up with email, Facebook, Google, or Apple.
02. Location Settings
Now, you can edit your address no matter where you are, allowing you to explore options even if you’re off-campus. You can also save and edit a list of your most-used locations so that you don’t have to manually type it in each time you make an order.
03. Home Page
The home page now lists food categories and lists of restaurants so that the user can explore all of their food options. Under each restaurant, there is an estimated time for delivery, the distance to its location, a short description of the food that they provide, and a rating of up to five stars based on customer feedback.
As for the filter tab, I’ve also added a price filter that ranges from one dollar sign to four dollar signs and a rating filter that ranges from one star to five stars. Other features that I would add include a distance filter and an estimated time filter.
04. Navigation
At the bottom of the screen is a navigation bar so that users can easily travel between different pages of the app without having to completely exit another. This navigation bar features a home page, favorites page, orders page, and profile page.
The orders page tracks all previous and current orders and also includes a “saved for later” tab.
The favorites page allows users to quickly navigate to their favorite restaurants or favorite meals that they’ve ordered.
The profile page allows users to edit personal information and includes payments, settings, help, and log-out option.
05. Ordering
After selecting the desired restaurant, the user has the option of delivery or pickup (located at the top right corner). Each restaurant’s page includes customer ratings, distance to its location, estimated time of delivery, reviews, deals, and its menu.
To add to your cart, simply tap on the desired item and customize your order.
Before checking out, review your order on the “My Cart” page.
On the checkout page, users can choose to either pick up their food or have it delivered, change their payment method, apply discounts, and review the cost of their order.
After placing an order, you will be assigned a delivery person, who you can contact through message or call. This screen also keeps the user updated on the state of their order.