SErving up a tasty mobile experience

ClusterTruck is a delivery-only kitchen that built their own ordering, courier, and kitchen apps to ensure the best experience for their customers.
‍
My 2019 net-new Android app and iOS redesign resulted in a 34% increase in mobile sales and a 4.9 star rating on iOS out of 11.6k reviews.

The challenge

Clustertruck's competitive advantage was using data and small delivery zones to ensure that food was delivered hot and fresh, every time. We knew that customer satisfaction with the delivery time and food quality was very high, so our most important goal was to reduce friction between the customer opening our app and taking their first bite.

Without an android app we were missing out on potential sales, but one on one interviews and usability testing of the legacy mobile experience revealed some big pain points and opportunities. As a solo designer on the team, I was responsible for the end to end experience, including look and feel.

UX Director

Design Team of One

Product Design

User Research

Illustration

Animation

Branding

Copywriting

Print Design

Business GOALS

Boost conversion rates with a redesign of the iOS app & website.

Increase adoption by launching an all new android app.

Achieve feature parity with web by adding group orders, favorites, and referrals.

Understanding the Target Audience

Out of four user personas I identified in previous studies, I focused on the two that were most likely to be using mobile devices while distracted.

A parent would be coordinating 4 orders at once after after a long day of work. A night owl at a bar may be ordering under the influence. Either way, the design couldn't afford to burden the user with any unnecessary steps.

NIght Owl

Ordering for himself from a bar that doesn't offer food.

parent of two

No time or energy to make dinner tonight.

Exec. Assistant

Juggle 20 lunch orders & ensure they arrive on time.

Office worker

Grabbing something quick before the 12 o'clock meeting.

Kickoff | Where are we today?

Starting off, I asked myself some initial questions. Who are we designing for? What pain points are they experiencing today? What are their goals?
‍
To answer these questions, I collaborated with a developer to create a testing script that would cover the most important use cases. We tested the legacy iOS app with 5 users onsite at an office building and a bar.

I used the feedback we collected create a high level journey map that could help the team prioritize pain points based on their impact across the journey, complexity and cost effectiveness.

Prioritized Pain Points

"Where is the food truck?"

There was a lot of confusion around what type of company ClusterTruck was. Did it have a physical location to sit down and eat? Was it a traveling food truck? What makes them different from apps like Doordash and Uber Eats?

"So wait, do they have mexican food on the menu?"

The menu filter buttons located at the top of the screen took up a lot of real estate, but didn't help users get a high level understanding of menu options and could be toggled in combinations that often returned no results.

"I'm overwhelmed! There are too many options!"

Users were forced to scroll down a menu that listed every one of 100+ options to get a high-level concept of what cuisines were offered. If they were looking for something specific, say a burrito, they could be left scrolling to all the way to the bottom.

"Do I really have to remember another password? Why isn't there a guest checkout?"

Nobody liked being forced to create an account before they tried the food for the first time, especially members of a group order. This step caused the biggest drop-off in the flow, and the most visible frustration in our user tests.

iterative Site Map

The new mobile experience ultimately required 50+ unique pages and states. It was tough to keep everyone on the same page, so to sort through the complexity I worked with the Dev team to create a sitemap that we could reference throughout the project. Initially, we drew it on a white board. As it took shape I recreated the map in sketch and we reviewed it frequently to ensure every page and user story was accounted for.

Low vs high fidelity wireframes

Low Fidelity

I like to start my design process with physical sketches or very sparse digital wireframes to get ideas down as fast as possible. I use low-fi designs internally at this stage to spark discussions with my teammates and filter out ideas that aren't feasible.‍

MID Fidelity

When it's time to prototype and test ideas I bring my designs into Figma or Sketch for some wireframes. I omit images and color at this stage, because I'm not ready for feedback on visual design and I want testers to know that they are in an early phase. I like to figure out copy before the very first test, because it can have a big impact on the final experience.

HIgh Fidelity

This is the pixel perfect stage where fonts, colors, spacing, and iconography all get decided. I like to use Zeplin to hand in my final designs to developers.

ONBOARDING

USER GOALS

Vi | Parent of Two

Where is the foodtruck?

"My friend recommended this app to me, but I've got no idea what ClusterTruck is, or why I should use it instead of Doordash."

Max | Night Owl

I don't have time for this!

"It's 11pm and I'm starving! I just need to know if they've got pizza or not."

Onboarding was a great opportunity to answer user's questions about what Clustertruck is and why they should use it. I worked with Gwen in marketing to hone in on key features to highlight during onboarding and wrote copy to reflect the product's casual, irreverent tone.

New users learn about 5 unique aspects of ClusterTruck by walking through animated illustrations* that I created. I acknowledged that some hungry users may not have the patience to get through the content by adding a funny 'skip' button and providing a banner to view it again later in the experience if the user chose to skip.

*Illustrations were created in Adobe Illustrator, animated in After Effects, and imported into the app using Lottie.

NAvigation

USER GOALS

Vi | Parent of Two

Does THE GRANOLA BOWL have dairy?

"My wife is vegan and it's difficult to tell what she can and can't order on this menu at a glance. What options does she have?"

Max | Night Owl

Seriously, I just want pizza.

"I know exactly what I want. Everything else is just a distraction."

Clustertruck's large and diverse selection of food options was a huge strength. Customers loved having the freedom to choose multiple cuisines on one order, for example pizza and pad thai. Though our research we found that the strength became a weakness when it came exploring the menu and locating specific items.

‍In Max's case, he is coming in knowing exactly what he wants. To find his pizza his only options are to search (which data told us was very rare), or to scroll the entire menu. If he had been vegan, however, this design would have worked well for him.

Giving users a high level understanding of their food options as soon as they landed on the menu was crucial to decreasing cognitive load and preventing scroll fatigue. I also wanted to retain the diet preference filters, which were working well in the current design.

My solution was to separate the concepts of recommendations, cuisines, and diet filters. I also added tags to each item to make the menu more scannable for anyone with diet restrictions.

Menu Design

USER GOALS

Vi | Parent of Two

What is the house special?

"This is my first order and I'm not sure what I want to eat. I'll try anything once, what comes highly recommended?"

Max | Night Owl

Where is that pizza I ordered last time?

"Why would anyone would want to order anything else?"

100+ menu options can be overwhelming when it comes to a new user exploring the menu for the first time. We knew from our analytics that the higher an item appeared on the menu, the more likely it was to be selected. This meant that the first few items a customer sees are especially important.

In order to reduce cognitive load and time-to-checkout, I organized the menu differently for first time v.s. returning users.

First time users

New users have already invested time and energy downloading and navigating a new app. They've got less attention to spare than a returning user, so their first order needed to be as frictionless as possible.

The lazy breakfast burrito was the highest selling item on the menu, so I guided users to this tried and true dish.

RETURNING users

During our research many users claimed that they quickly got bored of ordering the same thing over and over, but our analytics told a different story.

A significant percentage of sales were reorders. We wanted to reward returning users by surfacing their previous orders and making suggestions based on their order history.

Group ordering

USER GOALS

Max | Night Owl

Nobody else wants pizza?

"Now that my friends are here how am I going to get everyone's order in and split the check?"

ClusterTruck's signature group ordering feature allows users to pay together or separately from their own devices. It was a hit on their web app, but they were missing a huge opportunity by not offering it on mobile.

I took the opportunity to fix a few UX issues that were identified during usability testing. I made the concept of a group bag more clear by updating labels and adding info throughout the process to let users know what to expect. I also made the ordering statuses of individual group members more prominent.

Final Designs

Start page

Bag

Checkout

Delivery Screen

Clusterpoints under 500

Clusterpoints over 500

Vector Illustrations

📈 Outcomes

After the launch of the Android and iOS apps Clustertruck saw a 34% increase in mobile sales. Ratings on both apps remain very high, with Android currently at 5.0 and iOS at 4.9.

"Very easy to navigate and order! The simplicity of my profile carrying over to the app was seamless. And I absolutely love the diverse menu items" - Android User

"Absolutely love this company, and I am excited to see that they finally have an app! Its great food and the app is easy to navigate" - Android User

"love the ClusterTruck app because it is seamless with a very straight forward ordering process. A cool & convenient feature they have is the group ordering feature that allows you and your friends to order together but everyone gets to add their order themselves :) The group owner can pay for everyone or everyone can pay individually.. super neat and of course, the food is bomb!!" -iOS User

New Opportunities Discovered

During our onsite interviews we had the chance to ask office workers about their lunchtime routines. We found that many were having their lunches regularly catered by their employers. We saw an opportunity to offer a specialized product for teams that would appeal to a less price sensitive
consumer.

To test our hypothesis I organized and facilitated a full week-long Google design sprint with a cross-functional team that resulted in a prototype tested with real customers.

The challenge

Business GOALS

Boost conversion rates with a redesign of the iOS app & website.

Increase adoption by launching an all new android app.

Achieve feature parity with web by adding group orders, favorites, and referrals.

Understanding the Target Audience

NIght Owl

parent of two

Exec. Assistant

Office worker

Kickoff | Where are we today?

Prioritized Pain Points

iterative Site Map

Low vs high fidelity wireframes

Low Fidelity

MID Fidelity

HIgh Fidelity

ONBOARDING

USER GOALS

Where is the foodtruck?

I don't have time for this!

NAvigation

USER GOALS

Does THE GRANOLA BOWL have dairy?

Seriously, I just want pizza.

Menu Design

USER GOALS

What is the house special?

Where is that pizza I ordered last time?

First time users

RETURNING users

Group ordering

USER GOALS

Nobody else wants pizza?

Final Designs

Start page

Bag

Checkout

Delivery Screen

Clusterpoints under 500

Clusterpoints over 500

Vector Illustrations

📈 Outcomes

New Opportunities Discovered

Other Work

Angies List

Boardable

Graphic Design

Let's Connect