2-click Food Reorder

Research and design: 2 weeks

Designed a simple, clean and clear order history experience for restaurant customers. The final design allows the user to add previously ordered items to their cart in 2 clicks.

Research

Order history was the number one feature request from our customers for a long time. Users would like to reorder items that they've previously ordered and get exactly what they’ve ordered before.

In a highly customizable menu, it's often a lot of work to build a specific item. Hence, reorder helps users get the same food faster and improves customer satisfaction. I was asked to design a clear, simple and neat experience that allows users to reorder food effortlessly.

Co-design

Digging deeper, what are users' difficulties in reordering food? I did a design test with four participants to test out four different apps, asking them to buy whatever food they want the first day and reorder the same food again the next day. Some findings are summarized below:

This testing result helped me view this problem more heuristically. I created a rough user journey to mark out all potential user pain points.

Two of the biggest challenges in this project were finding a proper touchpoint and optimizing the information display to show just enough information so that the user recognizes the item as the one they want to reorder.

Concept

Instead of jumping into any detailed design, I took a step back to think about all the potential touchpoints of this feature.

The last concept was selected because it provides more flexibility by showing multiple items at one time and can be found easily on the home screen (instead of hiding under a hamburger icon).

The next challenge was to optimize the information display for the user's decision-making process. Since the user can click an item in their order history to see the item's details anyway, I tried to restrict the reorder menu to show only the essential pieces of information.

Then, I started exporing broadly in different directions and then narrowed them down to the final two concepts.

The concept with a timeline on the left side was very self-explanatory and clearly communicates the history concept to users, so it stood out the most to me.

Detailed design

In user surveys, I saw a lot of quotes like "I want to reorder the same salad I had this Monday." For most people, it's hard to recall the exact date but easy for them to express it as a relative date like "yesterday".

Orders placed in the same week will be displayed as "yesterday", "Monday", etc. to match people's recall. Otherwise, we display the date in a skeuomorphic way that mimics the Apple/Google calendar date displays to try to take advantage of a familiar presentation.

In post-testing interviews, I collected responses that convinced me that people are more likely to remember what the food looks like than what it was called. To make reordering even easier, I moved the image to the left side of the description to match people's left-to-right reading habits.

Also, the image provides a nice visual break from the two pieces of text.

Only two lines of ingredients are displayed with the rationale that the first few ingredients are more valuable and memorable. This allows the design to to be used to present items at various customization levels. For example, coffee (no ingredient list, no customization) and "build your own" (huge ingredient list, built from scratch).

Final Design

With this design, reordering the exact same item is just two clicks. Every item's information is optimized for the best reading experience and least cognitive load.

Currently, this feature is under implementation for eatsa and 2 of eatsa’s customers (Wow Bao and Ro̅ti)