The personalized food ordering app that learns what you like, and finds what you love

Yumeng Ji
Yumeng Ji
Jan 14, 2018 · Unlisted
Redesigned Diner App / Click to go to prototype

My role: Product & UX designer

Time: from July 2016 to April 2017

I’m responsible for conceiving and conducting user research, interviews, surveys, and translating them into sitemaps, wireframes and prototypes. I also design the overall functionality of the product and iterate upon it to ensure a great user experience.

Testimonial from my manager:

“She is amazingly fast and precise, not only in seeing UX patterns emerging from business requirements, but also in finding detailed, creative solutions, which are executed in time and budget at a superb quality. With her solid design skills and an impressive set of UX design methods as her toolkit, Yumeng could manage it to create very complex user flows with ease.”

— Stevan Lazic, CTO at Forkcast

What exactly did I do there?

Let me walk you through some of my work through two parts:

  • Part I: Forkcast Diner App optimization.
  • Part II: Forkcast Internal Admin Portal App Redesign — Simplify internal work process for Forkcast Staff on

Part I: Forkcast Diner App optimization

1. User Research

I conducted user interview and contextual inquiry with real users to understand their pleasure, pain points and behaviors. And then created personas accordingly.

Research Analysis:

According to the user analysis, the essential problem of using a food ordering app is diners are struggling in making decisions on ordering food. The reason behind it is, firstly, there are too many options and it’s hard to find a difference between them, secondly, the apps don’t provide enough reliable resources for them to make decision. This pain point would highly reduce diners’ passion to use an app.

The common characteristics of all types of diners are they all rely on reliable resources to make decisions. The resources includes their personal experience, friends recommendation, and personal judgement.

Thus, if we want to serve all different types of diners better, provide more reliable resources to help them making decision would be our first priority to improve the current app.

2. Optimize Order Experience for Users

Old App Order Flow:

The Problem: Order journey was lengthy and inconvenient.

  • The user journey is too long to approach a task.
  • The navigation is not flexible enough to make changes.
  • It’s easy to get lost when users go deep in an order flow because of the overwhelmed options.
  • No indicators to tell users which steps they are in and how many steps to finish.

New Design Overview:

Design Decisions:

Menu Page:

1, Clarify the UI hierarchy by adjusting font size and colors

2, Implement segmented control toggle to clarify navigation.

3, Replace the reward circle to meal item image to better communicate meal item’s information

Order Page:

1, Singularize the long user flow to one scrolling action area.

2, Clarify the UI hierarchy by adjusting font size and colors

3, Highlight the action buttons to keep user informative about their progress

4, Use floating window realize easy overview and reduce confusion.

Checkout Page:

1, Clarify the UI hierarchy by adjusting font size and colors

2, Replace the floating action button to a bar sticky to the bottom.

3, Implement a new control bar to allow users easily switch between Delivery and Pick-Up.

Part II: Simplify Internal Work Process for Forkcast Staff

Internal Admin Portal — Restaurant Menu Editor

What is it?

Menu editor is an internal using tool to manage restaurants’ menu mainly based on restaurants’ demands and Forkcast’s needs. This is a task-driven platform that requests complex operations for single elements.

Who will use it?

The core role would be Forkcast staff who are in charge of answering restaurant’s requests and making changes on restaurant menu on Forkcast diner app.

Old Menu Editor:

The Problem:

  • It’s time consuming because it only allows users editing one item at one time. When users want to operate changes for multiple items, it’s painful to go through all of the items one by one.
  • The UI is busy and hard to follow.

Design Challenges

  • Apply common operations for multiple elements at one time.
  • Apply complex operations for single elements.
  • Build a strong search system to enhance accuracy and reduce repeating work.

Design Process:

1. Identify Scenarios and Use cases:

  • From restaurants’ perspective, in what situation they would want to contact Forkcast to make changes on their menu?
  • From Forkcast’s perspective, In what situation they would want to make changes on restaurants’ menu?

All the requests can be generalized to three core types:

  • Deactivate/remove certain items.
  • Change price on meal item, ingredients and add-ons, etc
  • Change sequence of items on the menu.

2. Information Architecture and Basic Functionalities

The menu editor is a information management and task driven platform. I worked closely with developers to build a rigorous structure for logical operation and relative elements prioritization. Based on the structure, we came up with the basic functions for this platform by CRUD analysis.

3. Design Iterations and Solutions

First iteration:

Implement all the elements and basic functions onto wireframes and reflect the prioritization by UI hierarchy.

Second Iteration:

Simplify user interface according to material design guideline, and explore creative interactions and features for problem solving.

My team decided to use material design as the main style because it’s simple and clear. Also, considering the business constrains and the time needed, material design is a perfect template for both developer and designer to rely on.

Third Iteration:

This is the final iteration that focuses on solutions for design challenges and aim to provide a fast, efficient and accurate work flow for users.

Solution 1: Contextual Tool

Contextual tool is an implement for different purposes of editing and multi-items editing. It allows Forkcast staff to implement complex requests from restaurants in a flash.

The action button(the pen’s icon) is altering by colors and hidden tools according to different tasks. The green pen button collects tools for the entire group managing. When users select multiple items in a certain group, the green button will turn to blue and provide different tools for editing the specific items.

Contextual Tool Prototype:

Solution 2: Advanced Search

The advanced search is an implement for identifying a group of items that meets complex criteria.

This search tool is inspired by the macOS’s advanced search system. Users can use arbitrary combination of three criteria groups to find all the items that matches a complex requests. This is a powerful tool to save editors’ time and improve the accuracy of search. It also have a “History” feature to store all the search result for editors to reuse.

Advanced Search Prototype:

Solution 3: Meal Item Editor

Meal item editor is the tool to build the sequence when order a meal item, and to edit the available options for each order step.

Meal Item Editor Prototype:

Collaborating with Developers


Wireframe Annotations:


Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store