FORKCAST

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

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.

“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: Optimize order experience for users on Forkcast Diner App.
  • Part II: Simplify internal work process for Forkcast Staff on Internal Admin Portal App.

Part I: Optimize Order Experience for Users

Forkcast Diner App

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

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:

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

Sitemaps:

Wireframe Annotations:

Thanks!