Instead of merely imagining how the mobile ordering process should be, to minimize designer’s bias, I have conducted an in-depth process in empathizing with the end user.

User Persona

Starting with the user persona, I have depicted a typical user who frequently uses the mobile ordering app, would be a 9-5 busy single young professional who relies a lot on eating-out.

User Scenario

A details user scenario was depicted to help us understand a typical user flow.

Further on, we empathize with the user by mapping out how she says, thinks, does and feels during the mobile ordering process. In the journey map, we understand more how she feels in every step, and what opportunities and pain points are there.

With all these basic data, we can map out the user flow to help us organize each screen of the mobile ordering app interface.

Based on the user flow, I have created the mobile ordering process with a low-fidelity wireframe on Figma. With these wireframes, it has become clear which assets is needed. I have quickly created a logo for the brand, the menu graphics, and promotional banners.

In this project, the user testing was carried out with Maze (https://maze.co/). Maze is a easy tool to create up to 7 user tasks and question, so that we can track how users interact with the prototype on Figma. Based on my Maze testing results and participating at other colleagues’ Maze tests, I have found that the key for a sloid, well-founded Maze testing is to keep each user task (each block) concise, give short and clear instruction, limited the scope to one simple task, and ask open-end questions to allow users express their opinion freely.

Here's the blocks I have created:

11 responses were received with a usability score of 73/100. Direct Success Rate of completing the tasks in each block commonly ranges from 80% to 100%, except Block 3. Overall, experience was rated positively.

The Maze user testing has helped us discover these problems:

- Bad choice of wordings in block 3;

- Misleading button “choose food” in the screen after user has chosen a food item, causing misclick;

- 1 tester using Samsung device had abandoned the test as it was only optimized for iPhone users;

To address the pain points identified, the prototype was revised, with the misleading button removed.

As an interesting add-on, I have created a 3D poster of the burger set using Adobe Dimension and Fantastic Fold. One may not believe it, every piece in the poster did not exist for real! Even the burger box package was created in an Adobe web-based application called Fantastic Fold, and I have folded the box into the angles I want. As Fantastic Fold is still in beta stage, we had so much fun folding the boxes when it was dancing like crazy whenever a slight angle was wrong!

Take a look at the following process video, see how I have created this sense in Adobe Dimension, from environment, to lighting, and arranging the items!