Solution 2

Shorter delivery times with express service

For the users who were only concerned with long wait times, a custom order experience and express service was developed.

Introducing: Take-Out Express

Take Out Express: A food delivery option that provides prioritized delivery times. With a selection of fast and ready-to-go food options, a quick-pick ordering process, and a streamlined checkout—Take-Out guarantees fast delivery times for your favorite items.

Take-Out will offer a dedicated view of "Express Restaurants" with a prominent countdown timer informing the user of how long they have left to place an order to ensure the promised delivery time.

These "Take-Out Express" restaurants (those who opt-in) will feature "Express Items". These are the items the restaurant deems as their fastest foods to cook/prepare or are always readily available (think Big Macs at McDonald's). In other words, each restaurant's top performing products that get ordered the most on a daily basis.

By having these Express items readily accessible, the Take-Out driver will be able to head straight to the store, knowing the order will be ready when, and in some cases before, they arrive. The result is an ability to guarantee a fast delivery time for users who want their food as fast as possible.

Why is this important?

Ordering food delivery allows users to place their focus on something of greater importance. By providing these users with an option for prioritized delivery and quick ordering process, Take-Out can assure the user that they will receive their food fast and on time, while not disrupting them from what they are currently doing.

User Persona

Naomi Shad

Naomi's persona was created to understand users who are not concerned with the price of their order and, instead, would rather prioritize receiving their order as fast as possible. Naomi was designed to emulate someone who is career-driven, makes a good salary, and is always on the run with work and activities. To Naomi and users like her, it was evident that time is the most valuable currency.

Details

• • 30 years old
• • Lives in Manhattan, NY
• • Works as a Systems Engineer at HBO
• • Annual Salary: $95K

Use Case

• • Orders food delivery 2+ times a week
• • Likes to order out multiple times per week. She is consistently busy and doesn't have time to cook most nights.
• • Discovered the app through a recommendation on Twitter
• • Always has the latest apps on her phone
• • Music lover and Apple Music apologist
• • Stays busy and is always finding new hobbies
• • Heavy device user - Naomi uses her phone to do most things

To view the full version of Naomi's User Persona, including Naomi's motivations and frustrations, open the Notion project.

View Naomi's User Persona in Notion

Early Iterations / Sketches

The "Express" aspect of the app came quickly after the Trivia concept was created. This solution was something that needed to be as equally important as the Trivia feature, but also remain unobtrusive to the app and ordering process.

At the top of Screen 1 is where you can see the early version of Tabs/Filters for both Trivia and Express. These tabs give the user quick access to either option, while still allowing them to use the app normally from the home screen which would show all available restaurants, regardless if they offered Trivia or Express options.

Screen 2 shows what would appear when entering the Express tab. The timer's purpose is to notify the user of the time left to place an order and secure the delivery time that sits next to it. These Express restaurant UI cards also feature how many "Express Items" the restaurant offers.

Screen 3 is the concept of being able to "quick-pick" a bunch of items at once. This action would be helpful for busy users to quickly add multiple Express Items to their cart at once and require fewer screens and is less time consuming than competitors.

User Flows

This User Flow helped map out the fastest way for a user to order multiple items, while still being informative and upfront with restaurant details, food customization, payment methods, and order status. The main goal of this user flow was to eliminate as many ordering screens/steps as possible and allow the user to place their order and get back to something of greater importance.

Open Flowchart in Whimsical

Wireframes

The wireframes for the Express option of Take-Out indicated how multiple items could be quickly added to a user's cart. To also factor into how restaurants would handle having "Express Items," it was best to limit the user to only a few options that both the app and accompanying restaurant could rely on to have ready to deliver quickly. Again, think Big Mac's or "Dollar Menu" items at McDonald's. These are the types of items that would be fastest to deliver, and subsequently, the most popular items the restaurant offers.

View Wireframes in Whimsical

Outcome

The result of these 2 features, Take-Out Trivia and Take-Out Express are custom ordering experiences for both user's needs. These solutions alleviate two very different user frustrations in a branded app experience that feels fun and fresh, while still being able to operate efficiently as a standard food delivery app.

With these options available for every user and solving two distinct user problems. And while this is a concept project, the expectation is to see an increase in user satisfaction and the number of orders placed per user per week within a food delivery application.

Because of these two features, it encourages each user type in a different way to use the app more frequently. Users who are seeking a cheaper delivery option can play trivia, compete against friends, and climb up leaderboards in an effort to earn discounts. Users who only care about getting their food fast can do so by selecting Express options. In theory, the increase in orders due to these new features would create enough revenue to partially fund the trivia enabled discounts, as well as generate new income.

Feel free to check out the entire Notion setup I created to manage the project.

View full project wiki in Notion

Branding

Creating a new food delivery app concept required me to think about what the app's look and feel would be based around, and how the visual language of the app would tie into its purpose to create a fresh and exciting experience.

Icon / Logo

The Chinese takeout container is instantly recognizable and iconic to ordering takeout. It's fun and playful, a food takeout staple, and since it's an emoji—it can easily be shared digitally. And let's be honest—has anyone ever not been excited to order Chinese takeout (or takeout in general)? As you can see below, the answer is unequivocally no.

Name

"Let's order take-out tonight" is something we've all said more than once, and often brings a sense of child-like joy as we await our food—that is something I wanted the name of the app to bring as well.

Technically, "take-out" is a phrasal verb to indicate the "taking out" of food to then eat at home. However, due to its popularity, it is more commonly used as a noun, i.e., "I'm going to order some take-out." This type of common phrasing allows the app's name to be used in the same sense.

"Let's order some Take-Out."

In combination with the Chinese take-out container, the name "Take-Out" is a perfect counterpart to the brand.

Colors

Using the Chinese Takeout container emoji for the app logo meant that the brand's color palette also needed to playful, inviting, and meaningful. That's why all of the colors chosen were inspired by and named after prominent elements of the Chinese culture.

The color red (Red Vermilion Bird) is the primary brand color. Unlike many other cultures that hold negative connotations towards the color, the color red in Chinese culture symbolizes fortune, energy, and happiness—all of which align perfectly with the brand.

Typography

Bluu Suuperstar is a brutalist serif typeface with prominent characters and sharp lettering. Like Chinese lettering, there is nothing in the family that is smooth or comforting. Triangular wedges within the lettering keep the entire span of the family bold, sharp, and unpredictable.

Bluu Suuperstar is a typeface that quickly catches the eye, encapsulates the playfulness (trivia feature) yet seriousness (express service feature) of the brand, and stands out among other UI elements that it can appear to be cutting through—the perfect unpredictable typography to be the star of the show within Take-Out.

Purchase typeface from Black[Foundry]

Design System in Figma

It's no longer an industry secret that design systems reduce mental overhead by enabling fast design iterations, setting up long term product scalability, and implementing programmatic thinking to the design process. Even for a concept project like Take-Out, setting up a simple design system to continuously pull from kept my design process lean, fast, and focused, while tying everything together from the reuse of common UI elements across multiple screens.

The best example of this is with the menu item and leaderboard placement components I designed to be reused across multiple instances on the same screen. As you can see from the video above, menu items and placement avatars are easily able to be switched out for different items by turning the current layer "off" and the desired layer "on".

It is these types of affordances within a design system that allows for product growth and scalability, by creating a living, breathing design file that can produce many instances of the same screen with limited effort.

Is creating an entire design system overkill for a one person concept project... maybe? But with a background in Web Development, systemizing components in this way not only makes the most sense, but it is what I am already used to doing when building products. By designing things in this systematic way, it forced me to question myself whenever I was about to stray outside of the system. For every new element designed, a justification is necessary as well as measuring the likelihood that this element would be used again in the future.

Check out the full Take-Out Design System and App Screens designs in their entirety in Figma. Feel free to go through the file to see how I structure design files

This is a cloneable project on the Figma community. Hit the button below to create your own copy!

P.S. Yes, I name ALL my layers! 😉

Duplicate Take-Out designs in Figma

In The Wild

The vision of the advertisement behind Take-Out is to cover large cities in large, bright, and loud posters that make bold statements but leaves enough unknown to spike instant interest in by-passers.

By showing various app screen to highlight the two main features, the hope is that people who see these advertisements will download the app out of curiosity, then remain a user as a result of the exclusive features Take-Out offers.

Below are a few examples of what this would look like in the wild. Select an image to an enlarge.

That's nice, but what needs improvement?

• • Adding animation to dig deeper into the flow of the app would have added another layer to the design.
• • Some of the survey questioning could have been structured better to reach better insights
• • Finding a way to marry both of my solutions into one would have resulted in a more streamlined app experience with less to learn for the user