Published on | Prototyping: From UX to Front End — Medium Hui Tan

Responsive Web / Hybrid App

Client:

Nextdish provides on-demand food delivery service. They deliver delicious, healthy, ready-to-eat dinner from their kitchen to your door. Use zip code 94566 to get in their website.

My role: UX/UI Designer

Time: 2016–2017

Defining design principle

Talking to my client, I immediately fell in love with their mission to bring back delightful dinner time to family and friends, which is exactly what I’ve been looking for as a working mom. We both wanted a product (software) that people could use with minimal effort so that they spend most of the time enjoying the food. With several brainstorming sessions, we identified our design principles:

Our product must be lightweight. Preparing dinner could be stressful, ordering online doesn’t have to.
The interface should be inviting and elegant.
Create consistent experience across multiple devices, from desktop to mobile.
Make the food shine.

Exploring user experience

After meeting with my client and did research on the user needs, I began with paper and pen to sketch out my ideas. Paper and pen are probably the best starting point, and as a designer, I found sketching always enjoyable and inspiring.

Before diving in to design details, I took time to go through a few iterations with site maps and user flows. Then I fully discussed with my client to make sure we went forward to the right direction.

Onboarding process

The first impression was crucial for a product, especially for a startup product. So we were so dedicated on the onboarding flow design that we talked about a lot of ideas of how to welcome users the best way.

Because nextdish provided local food service, we didn’t serve all of the users at the beginning. We used zip code to let the users know before they dug deep into the website. It’s important to let users who were not in the service area feel welcomed as well, so we designed the waitlist and give them special discount to get them involved.

Welcome flow for both in service area users and out of service area users

We put many thoughts on the landing(welcome) page for the purpose of letting the user feel invited and stimulated.

Landing page design

Menu design

By clicking a dish photo on the menu, it will open up an pop-up page overlay. User could easily slide up or down to other dishes, or close the page to get back to the menu. The whole idea is to let users browse menu and dishes quickly and smoothly, without switching over the pages back and forth.

Actually, one of our design principles “our product must be lightweight” was not officially the most important one until we confirmed the design for this page. Then we felt stronger about the meaning of lightweight and extened it to the whole design process.

A few explorations of display dish, we chose the left one. Cause we want use don’t completely feel they leave the menu, and let the shopping bag button separated from close button to prevent click mistakes.

We built our information architecture super flat to clarify user’s path and make the most important features stand out. We put checkout flow on one single page; we didn’t have too many choices of dishes, but we did change our menu daily; no matter at which spot the user was, it wouldn’t take more than two taps/clicks to get back to the menu.

Creating user interface

To create an elegant look, I chose the artistic Freight Disp Black as our titles paired with the classic Helvetica Neue as our texts.

We wanted the color palette to be warm, inviting and as comfortable as possible. Coral red worked great with white and gray, a bit of gold added perfect amount of delicate flavor.

Responsive web graphic element

To make the food shine, I highlighted food photos instead of UI elements，so that they wouldn’t compete against each other. I used solid button for the most important action in one page, ghost button for the other actions.

Some of high fidelity screens

Designing App

I have been thinking about the design style of the hybrid app since I started this project, should it be following iOS or Android guidelines? The responsive web design gave me a new perspective, I decided to focus on the design hierarchy from our web and emphasize our own personality as long as it works on multi devices.

Wireframe

Screens

Cohesive design style

Prototype

Shipping

After dozens of prototype tests, I started collaborating with marketing and editor team on promoting our product and preparing for launch. Then we launched our product at Pleasanton, San Ramon and Dublin.

After launch, the iteration is going on

Thanks to social network groups, we could collect user feedback and quickly implemented our ideas. According to our users’ behavior, we adjusted our delivery time, optimized our checkout flow etc.

Welcome to visit nextdish.com if you are interested.

Designing nextdish was originally published in Prototyping: From UX to Front End on Medium, where people are continuing the conversation by highlighting and responding to this story.

Designing nextdish

Cool stuff, every week

More Articles