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

Product 1: Forkcast Diner App

Due to the confidential agreement, I can't put all my work online. Please contact to request the complete case study for the dinner app. Thanks!


Product 2: Internal Admin Portal - Menu Editor

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

Case Study:

1. Identify Use cases and Scenarios

Important research questions:

  • Who will be the core users for this editor?
  • From restaurant’s perspective, In what situation a restaurant would want to contact us and make changes on their menu?

Result:

  • The core role would be Forkcast people who is in charge of answering restaurant’s requests and making changes on menu editor.
  • All the request can be generalized to three core types: 1, change price; 2, deactivate/remove certain items; 3, change orders of items on the menu.

2. Information Architecture

This diagram present the entities and related functionalities for the menu editor. I reorganized all the entities in different groups by their uses logic, and define the related functions by using CRUD analysis. 

3. Identify Design Goals

  • Ability to find unique categories by search and sorting.
  • Ability to edit multiple items at same time
  • Simplify the process of editing option groups(order process)

 


4. Wireframing and Design Iterations

  • The first version of wireframes focused on the menu editor's structures and the basic functions. The goal was to transform business and user requirements into visual content, and to cover all the functionalities that can serve users' needs.
  • The second version focused more on the UI prioritization, features and design style. This version better realized design assumptions and ideas. 
  • The third version focused on unifying and simplifying the design style, which we decided to use material design because it's user friendly and may reduce a lot of work for developers. At the same time, finalizing the UI elements, designing micro interactions, and building specific user flows such as advanced search, multi-items editing, and multi-tasks managing, etc. 

5. Interaction Design

- Contextual Tool Prototype

Contextual tool is a implement for different purposes of editing and multi-items editing. The 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.

 

- Advanced Search Prototype

The advanced search is an implement for identifying a group of items that meet some complicated criterias. This is a powerful tool to save editors' time and reduce mistakes because one restaurant could have hundreds of meal items and ingredients. The inspiration comes from Mac OS's advanced search.



- Option Groups Editing Prototype

This is the flow for building a meal items' order process and editing the options that are available for a specific meal item.