Delivering...

Project Type

Food Delivery app concept

My Role

Product Designer

Project Timeline

4 months

Project Stack

Figma, Notion, Typeform, Whimsical

Project Type

Food Delivery app concept

Project Timeline

4 months

My Role

Product Designer

Tools Used

Figma, Notion, Typeform, Whimsical

Take-Out

Online food delivery is as popular now as it's ever been, and today's market offers plenty of app options to make the process of ordering food delivery easy and intuitive. However, I believe there is still plenty of untapped potential and opportunity in this space to provide a unique experience—but more importantly—alleviate the problems users currently have with these apps and services.

A note from the Designer (that's me)

A Designer's process or modus operandi (M.O., or "way of doing things") is an essential part of being able to conceptualize, collaborate on, and create great products.

To be transparent as possible, I have provided links throughout this case study to surveys, results, source design files, and more. Feel free to take a deeper look into any of these to get a better idea of how I structure and organize my projects and my overall design process when creating products.

Problem

Food delivery services have high prices and long wait times, which both result in users placing less orders on average per week.

Goals

User Goals

  • • Reward users with discounts for placing orders
  • • Increase customer happiness during the delivery waiting period
  • • Decrease wait times for users

Business Goals

  • • Increase weekly orders to 3 or more times a week per user
  • • Remain profitable
Take-Out   🥡   Take-Out   🥡   Take-Out   🥡   Take-Out   🥡   Take-Out   🥡   Take-Out   🥡   Take-Out   🥡   Take-Out   🥡   Take-Out   🥡   Take-Out   🥡   Take-Out   🥡   Take-Out   🥡   Take-Out   🥡   Take-Out   🥡   Take-Out   🥡   Take-Out   🥡   Take-Out   🥡   Take-Out   🥡   Take-Out   🥡   Take-Out   🥡   Take-Out   🥡   Take-Out   🥡   Take-Out   🥡   Take-Out   🥡   Take-Out   🥡

Research Insights

To identify problems that exist within food delivery apps and the process of ordering food delivery, I created a survey with questions to discover the motivations behind a user's decision on whether or not to place an order.

After surveying a total of 50 people and analyzing their responses, I discovered two main reasons that kept users from placing orders:

High Prices
Long Waits

Users who complained about high prices did not list long wait times as a concern. Conversely, users who complained about long wait times did not consider high prices a concern.

Key insights from survey responses

  • • 56% of participants said one reason they choose to not order using food delivery apps is that "It's too expensive"—with ~25% of participants stating the delivery times are too long.
  • • When answering the question "What are the most important factors when deciding whether or not to place an order on a food delivery app?" 56% answered "Price" with 36% answering "How long the order will take".

Competitive Analysis

Today's app marketplace features no shortage of food delivery apps. In addition to using these types of apps heavily during the first half of 2019, a Competitive Analysis was performed to learn more about how these apps handle the two frustrations (high prices and long wait times) that users reported in my survey.

Below is a summary of how three of today's leaders in food delivery app service (Uber Eats, DoorDash, and Postmates) handle alleviating cost and wait times.

Uber Eats

Reward System / Earnable Discounts
  • • Free to join and integrates with main Uber app
  • • 1 point for every Uber Eats & Pool trip
  • • 2 points for every UberX, UberXL, or Select trip
  • • 3 points for every Uber Black and Uber Black SUV trip
  • • Every 500 points = $5.00 Uber Cash
  • • Have 4 tier levels of rewards with more features and bonuses as you collect more points
  • Eats Pass - a $9.99 monthly subscription offering free delivery on all orders in the subscriber's city (Uber Eats app does not push this at all. Instead, the app is pushing users to join Uber Rewards.)
Ease / Speed of ordering
  • • No quick order or expedited delivery times
  • • Each item must be added to cart 1-by-1 with a details screen for each

Key insights

  • • Having the app integrate with Uber is nice, but the point system can be confusing and requires using two separate apps and services
  • • Would need to use both Uber and Uber Eats heavily to earn enough points to accrue real value
  • • Eats Pass subscription only adds to the confusion and costliness; not relieve.
  • • Delivery times are acceptable, but no fast options.

DoorDash

Reward System / Earnable Discounts
  • • Does not feature a reward system
  • Dash Pass - a $9.99 monthly subscription offering free delivery on orders over $12 dollars at participating restaurants
Ease / Speed of ordering
  • • No quick order or expedited delivery times
  • • Each item must be added to cart 1-by-1 with a details screen for each
  • • Features "Under 30 min" filter to put quick options in front of users

Key insights

  • • A lack of a reward system seems counterintuitive to offering a subscription service
  • • The "Under 30 min" filter option is a nice feature for those who want fast options

Postmates

Reward System / Earnable Discounts
  • • Does not feature a reward system
  • Postmates Unlimited - a $9.99 monthly ($7.99 a month paid annually) subscription offering free delivery on orders over $15.00 dollars at participating restaurants
Ease / Speed of ordering
  • • No quick order or expedited delivery times
  • • Each item must be added to cart 1-by-1 with a details screen for each

Key insights

  • • No rewards system is disappointing, especially since Postmates offers delivery of more than just food items.
  • • Postmates often offers discounts in interesting ways. Campaigns geared towards a specific food item or product. Interesting approach to drive app usage.
  • • Delivery times are acceptable, but no fast options.

Open the Notion document to view the full Competitive Analysis, including other measured factors such as brand elements, UX, app screenshots and more.

 

Take-Out

View entire Moodboard on Are.na

App Concept & Creation

Take-Out

After analyzing the survey results and competitive analysis, it was evident that the 2 user frustrations, high prices and long wait times, were not being solved by the current food delivery apps on the marketplace today.

In addition, it had become clear that each of these problems were very different, and therefore would require two different solutions. Ultimately, two custom solutions were developed to alleviate each problem. These solutions came in the form of a new food delivery app concept: Take-Out.

What is Take-Out?

Take-Out is a concept food delivery app built from the ground up. Take-Out's primary purpose is alleviating user's frustrations of high prices and long wait times with fun and intuitive solutions.

On the surface, Take-Out operates the same as we've come to expect with food delivery apps: Pick a restaurant, choose your food, order delivery. However, the app also offers two distinct ordering experiences for those who choose to engage in them.

To better understand both user problems, it was imperative to create user personas for each and develop solutions from an informed perspective.

User Persona

To better understand how to design for users seeking discounts/rewards or shorter wait times, User Personas were created for each type of user. Below is a brief version of Enzo's persona, a 25-year old that lives in Brooklyn, works at an Apple retail store, and is looking for ways to save money (thanks to the student debt crisis). Enzo was used to understand a user who would care more about seeking discounts than getting fast delivery.

Details
  • • 25 years old
  • • Lives in Brooklyn, NY
  • • Works Retail at the Apple Store
  • • Finishing Master's Degree online
  • • Annual Salary: $65K
Use Case
  • • Orders food delivery 1-2 times a week
  • • On weekday nights that he doesn't feel like cooking, Enzo likes to order out using whatever delivery app has the cheapest price at the time
  • • Has student loans and looking for ways to save while maintaining his lifestyle
  • • Saw an advertisement for the app on the subway and decided to download
  • • Is swayed by interesting branding
  • • Heavy device user - Uses his phone to accomplish many tasks when not at work

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

Early Iterations / Sketches

The original goal of Take-Out was developing a fun and exciting way to incorporate gamification as a way to let a user earn discounts. Some of the early ideas included putting a timer on the home screen to encourage users to engage and place an order to compete in a post-order trivia-based game.

At this time, the concept of showing a "leaderboard" preview for each restaurant was implemented. Ultimately, I decided on Trivia, with questions that were relevant to the user's order, as the driving force behind getting users to earn discounts and ranking up within the app.

User Flows

The main point of constructing this user flow was to ensure that adding a trivia step to a food delivery ordering process would be consistently present and enticing to the user who is looking for a discount, but not in an obstructive way. I decided the best spot to initiate the trivia game was after the user ordered. Having the trivia game start after the order not only made the ordering process simple and straight forward, but gave the user something to do while they waited for their order.

Wireframes

The wireframes for Take-Out were heavily focused on how the Trivia aspect of the app would work. I spent most of my time on how this extra step would not only fit in but in what capacity it would be referenced before and after checkout. Ultimately, having a Leaderboard preview and view for each restaurant were solid indications that there was a gaming aspect of the app, but kept the focus on the restaurants and food they offered.

Solution 1

Earnable discounts using gamification

Introducing: Take-Out Trivia

A fun, fast-paced and challenging, post-order trivia gaming experience that rewards users with discounts on based on scoring.

Why add gaming into a food delivery app?

Gamification, in its purest form, "leverages basic human intrinsic motivators, factors that inspire us to initiate an activity for its own sake, because it is interesting and satisfying in itself."

Adding a gaming element to the end of the food ordering process with the potential to earn discounts as rewards resulted in an enjoyable app experience and higher user satisfaction for having paid less per order.

Why Trivia?

Trivia is a familiar, easy-to-understand, fun, and informative way to challenge people. Winning at any game, or in this case, answering trivia questions correctly to earn discounts, results in endorphins being released, which makes us feel good!

In Take-Out's case, trivia acts as a 2-for-1 enjoyable experience that results in alleviating the user's frustrations of high prices by providing earnable discounts through an engaging and informative gaming experience.

“One of the releases of chemicals triggering good feelings is at that moment of triumph when we learn something or master a task.”

- Raph Koster, Theory of Fun for Game Design

The trivia questions on Take-Out are custom-tailored based on the user's order, such as food facts, restaurant history, location-based facts, cultural history based on entree ordered, and more.

With the ability to earn discounts through Trivia based gaming, users will receive a more enjoyable and engaging app experience, with a discounted cost on orders for participating.

Key insights from survey responses

  • • 82% of participants spend at least 1 hour playing games a week; 20% of them play 6-11+ hours a week 🎮
  • • 47% of participants said they play iOS/Android based games 👾
Introducing

Take-Out Trivia

How does it work?

The Take-Out home screen shows you restaurants that are nearby. Quickly scan each restaurant to see its name, ethnicity, food type, delivery time, delivery cost, rating, and if it offers post-ordering Take-Out Trivia!

Check for the

icon for Take-Out certified restaurants!

Choose Your Food 🍱

Head back to the menu to select the items that you would like to order for delivery.

Test Your Knowledge 🧠

The Take-Out Trivia questions are custom-tailored based on your order, such as food facts, restaurant history, location-based facts, cultural history based on entree ordered, and more.

Fun Facts On Your Favorites

With Take-Out Trivia's tailored trivia questions, you'll learn more about your favorite restaurants and entrees.

Rank Up ⬆️

Your ★ points will automatically be added to your overall Take-Out Trivia ranking. All about the clout.

See What's Available 👀

From the Discover menu, tap the "Trivia" selector. This is where you will find all of the restaurants that are currently offering Take-Out Trivia.

Customize It

Fill out your options and decide how you want each item made. Add special instructions for an item if you would like.

View Order Status

Access your order status anytime by simply swiping up or tapping on the bottom status bar.

Heating Up 🔥

Gain bonus credits and ★ points for answering consecutive questions correctly to really boost your earnings.

Gimme The Loot 💰

Use your earned Trivia Credits on your current order to be credited back your savings, or choose to save them for a future order. You earned it, so the choice is yours.

Choose a Restaurant

From the Restaurant card previews, you can get a quick glance of who is at the top of the restaurant's leaderboard, and currently holding the 🥇1st, 🥈2nd, and 🥉3rd place positions.

Review Your Order 🔍

Review your order and get a summary of the cost. Add more items or edit current items if needed.

Real-time Updates 📲

See your driver details, view a live GPS map of their location, contact your driver directly, or review your order details—all in one place.

No Pressure 😅

Reminders of your current streak keeps you informed of what's at stake. Keep the streak alive to maximize your credits and ★ points.

Save Up

Any credits that get saved will be accessible from the Home screen of the app.

On The Menu

Pick out your food, or tap the "View Full Details" button to see resturant specifics and view the full Trivia Leaderboard.

Place Your Order

Review your delivery address, select a payment method, and choose your courier tip to place your order.

Get Back In The Game ⏲

Head back into the game to answer your question before the time expires. 3... 2... 1...

Nope 👎

Incorrect answers won't deduct any earnings, but will eliminate any streaks you had going.

Using Saved Credits

By tapping the 🥡 icon from the Home screen, you can easily check your credits and apply them to your next order.

The Details 📍

From the Restaurant details screen, you can see the exact location of the restaurant, delivery time, delivery cost, and the overall Trivia leaderboard below.

Play Trivia

After placing your order, you have 5 minutes to launch your trivia game. Earn money towards your order, and climb up the restaurant's leaderboard!

That's Correct! ✅

For every correct answer you will receive $0.50 in Trivia credit and 10 ★ points.

Good Game 👏

After answering all 10 Trivia Questions, the Results screen provides you your score, what you earned, and any potential badges you've received.

Who's On Top? 🏆

Take a look at which friends are owning the leaderboard for this restaurant, and what you will need to score to own a top spot on it. Switch to the "All" leaderboard to see the top scores from all competitors.

Questions & Answers

10 Questions. 5 seconds to answer each. Each correct answer earns you credits toward your order and points to rise up the leaderboard.

Score Status 🌟

Your earned credits and ★ points will show at the top of the screen for the duration of the game—as well as your order status at the bottom.

How Do You Stack Up?

Scroll down the Results screen to view the updated Leaderboard.

Scroll to next section
Introducing

Take-Out Trivia

How does it work?

The Take-Out home screen shows you restaurants that are nearby. Quickly scan each restaurant to see its name, ethnicity, food type, delivery time, delivery cost, rating, and if it offers post-ordering Take-Out Trivia!

The

icon means a Trivia certified restaurant!

See What's Available 👀

From the Discover menu, tap the "Trivia" selector. This is where you will find all of the restaurants that are currently offering Take-Out Trivia.

Choose a Restaurant

From the Restaurant card previews, you can get a quick glance of who is at the top of the restaurant's leaderboard, and currently holding the 🥇1st, 🥈2nd, and 🥉3rd place positions.

On The Menu

Pick out your food, or tap the "View Full Details" button to see resturant specifics and view the full Trivia Leaderboard.

The Details

From the Restaurant details screen, you can see the exact location of the restaurant, delivery time, delivery cost, and the overall Trivia leaderboard below.

Who's On Top? 🏆

Take a look at which friends are owning the leaderboard for this restaurant, and what you will need to score to own a top spot on it. Switch to the "All" leaderboard to see the top scores from all competitors.

Choose Your Food 🍱

Head back to the menu to select the items that you would like to order for delivery.

Customize It

Fill out your options and decide how you want each item made. Add special instructions for an item if you would like.

Review Your Order 🔍

Review your order and get a summary of the cost. Add more items or edit current items if needed.

Place Your Order

Review your delivery address, select a payment method, and choose your courier tip to place your order.

Play Trivia

After placing your order, you have 5 minutes to launch your trivia game. Earn money towards your order, and climb up the restaurant's leaderboard!

Questions & Answers

10 Questions. 5 seconds to answer each. Each correct answer earns you credits toward your order and points to rise up the leaderboard.

Test Your Knowledge 🧠

The Take-Out Trivia questions are custom-tailored based on your order, such as food facts, restaurant history, location-based facts, cultural history based on entree ordered, and more.

View Order Status

Access your order status anytime by simply swiping up or tapping on the bottom status bar.

Real-time Updates 📲

See your driver details, view a live GPS map of their location, contact your driver directly, or review your order details—all in one place.

Get Back In The Game ⏲

Head back into the game to answer your question before the time expires. 3... 2... 1...

That's Correct! ✅

For every correct answer you will receive $0.50 in 🥡credit and 10 ★ points.

Score Status 🌟

Your earned credits and ★ points will show at the top of the screen for the duration of the game—as well as your order status at the bottom.

Fun Facts On Your Favorites

With Take-Out Trivia's tailored trivia questions, you'll learn more about your favorite restaurants and entrees.

Heating Up 🔥

Gain bonus credits and ★ points for answering consecutive questions correctly to really boost your earnings.

No Pressure 😅

Reminders of your current streak keeps you informed of what's at stake. Keep the streak alive to maximize your 🥡credits and ★ points.

Nope 👎

Incorrect answers won't deduct any earnings, but will eliminate any streaks you had going.

Good Game 👏

After answering all 10 Trivia Questions, the Results screen provides you your score, what you earned, and any potential badges you've received.

How Do You Stack Up?

Scroll down the Results screen to view the updated Leaderboard.

Rank Up ⬆️

Your ★ points will automatically be added to your overall Take-Out Trivia ranking. All about the clout.

Gimme The Loot 💰

Use your earned Trivia Credits on your current order to be credited back your savings, or choose to save them for a future order. You earned it, so the choice is yours.

Save Up

Any credits that get saved will be accessible from the Home screen of the app.

Using Saved Credits

By tapping the 🥡 icon from the Home screen, you can easily check your credits and apply them to your next order.

Solution 2

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.

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.

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.

Introducing

Take-Out Express

How does it work?

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 process—Take-Out guarantees express delivery times for your favorite items.

Go To Express

From the Discover menu, tap the "Express" selector. This is where you will see all nearby restaurants that have express items available for order.

Select Your Express Restaurant

On the Express tab, you will see:

  • Available Express restaurants

  • The current promised delivery time

  • The time left to order

To secure the Express Delivery Time, an order must be placed before the timer expires.

Fast Selection

Quickly tap the items you'd like to order and the quantity for each. To customize an item, tap on the item image. Add one, or a few at a time—it only takes a couple of taps.

The Express Menu

The Express Menu features items that the selected restaurant can quickly make or has readily available. This ensures that you get your food fast & on time.

Head Directly To Checkout

Waste no time by getting automatically sent to the checkout screen to secure your order.

Order Express

Confirm details, select a saved payment method, and apply a tip before your "left to order" timer runs out to secure your delivery time.

Express Ordered!

Your order will deliver before the timer expires, or Take-Out will refund the order in full!

Scroll to next section
Introducing

Take-Out Express

How does it work?

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 process—Take-Out guarantees express delivery times for your favorite items.

The

icon means a Trivia certified restaurant!

Go To Express

From the Discover menu, tap the "Express" selector. This is where you will see all nearby restaurants that have express items available for order.

Select Your Express Restaurant

On the Express tab, you will see:

  • Available Express restaurants

  • The current promised delivery time

  • The time left to order

To secure the Express Delivery Time, an order must be placed before the timer expires.

Fast Selection

Quickly tap the items you'd like to order and the quantity for each. To customize an item, tap on the item image. Add one, or a few at a time—it only takes a couple of taps.

Head Directly To Checkout

Waste no time by getting automatically sent to the checkout screen to secure your order.

Order Express

Confirm details, select a saved payment method, and apply a tip before your "left to order" timer runs out to secure your delivery time.

Express Ordered!

Your order will deliver before the timer expires, or Take-Out will refund the order in full!

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.

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.

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.

Design System

App Screens

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! 😉

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.

Retrospective

A great post-project practice is to give yourself some time away from the project to reflect on what went well, what did not go so well, and how you would improve the product or process the next time.

Below are a couple bulleted lists addressing just that.

So, what went well?

  • • Using Notion for project management was fantastic. This tool kept me organized from start to finish.
  • • I received some awesome insights from survey research. Definitely something I will continue to do for future projects.
  • • Being able to develop a brand based on a Chinese Take-Out container. Everything felt right after I chose a direction for the overall look and feel of the brand.
  • • I enjoyed being able to play multiple roles (UX researcher and UI Designer) to reach a solution.

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

That's it!

I had an awesome experience conceptualizing and designing Take-Out! Thank you to all of those who filled out the survey and provided valuable insight into how they used food delivery apps, as well as the other designers I reached out to for advice. Also, a big thank you to the SuperHi team and community!

Recently, I joined a startup in SF 🌉 to help design the future of productivity 🚀 with some great people. If you are interested in working together or collaborating on a project, please reach out to me
hi@marco.fyi

In The Community

Visual Dev FM 🎙

Podcast Guest

100 Every Day 💯

Artwork Featured