DoorDash
Every day millions of people go to spotify.com to listen to music, books, and podcasts, upgrade their accounts, download the app, and learn more about Spotify.
Overview
The project
We redesigned the combo meal experience for enterprise online ordering platforms.
The goal was to simplify the combo experience to reduce friction, make choices clear, and help users confidently complete their combo build across merchants and platforms.
The team
I supported the Commerce Platform Team, which focuses on first-party, direct ordering and fulfillment products.
The team included product managers, engineers, UX designers, and a user researcher.
My role
I led the product design work, including redesigning the combo flow, adding visuals, improving copy, improving the menu architecture, and designing for both web and mobile.
Wireframing, user flows, interactive prototypes, user testing, A/B testing
Online ordering pages for Checkers & Rally’s and Capriotti’s
The customer
Enterprise restaurant brands like Checkers and Capriotti’s use DoorDash-powered online ordering to sell directly to customers through their own branded websites.
These merchants rely on DoorDash to power the ordering experience and fulfill deliveries, and they depend on a low-friction ordering flow to convert hungry customers into completed orders.
The problem
Customers struggle with combo meal options due to excessive scrolling, context switching, and poor visibility of their selections, causing them to drop off before checkout.
The Capriotti’s experience
When ordering a Duo, customers see a long list of sub options to scroll through, without any images to help them evaluate the options.
Selecting a sub then opens nested customizations in an accordion format, which pushes the unselected items above and below.
Users then have to scroll through the unselected subs, making it difficult to reach the next selections or go back and make changes.
The Checkers experience
Checkers had redundant steps. For example, in the Pick Two and Save, customers had to select an entree option, which then opens a long list of burger options.
In the app, making selections opens a new screen each time, which makes it difficult to go back and review what’s been selected.
Insufficient item details
Customers tend to order food with their eyes. However, the combos lacked imagery and descriptions, which made it difficult to customers to evaluate their options.
Without seeing what’s included up front, they had to click into each item to see what’s included, adding friction and slowing decisions.
The opportunity
Simplify the combo experience to reduce friction, make choices clear, and use clear imagery and visual feedback to help users confidently complete their build
Designing for enterprise scale
Option 1:
Long scroll
Option 2:
Step by step
The work needed to scale across merchants, platforms, and combo structures, while also remain flexible enough to adapt to future enterprise needs.
Option 3:
Home view with tap to select
Option 4:
Home view + step by step
We decided to move forward with this option because it provides users with a complete overview of the combo from the start.
Surfacing all combo selections up front
We decided to move forward with a combo “home” experience that surfaces all selections in one place.
Required and optional items are clearly labeled, selections are visible at a glance, and users can easily edit choices without losing context.
UX principles
We developed a set of principles that would guide our design decisions.
1 – Open
Show Spotify instead of talking about Spotify.
2 – Unified
In-experience formats over mute, bespoke landing pages.
3 – Integrated
One platform and user destination over multiple web properties.
The new homepage
The new homepage drastically reduced the number of steps in the user journey to listening.
Validating design with A/B testing
We knew that changing the spotify.com homepage to the web player would be a major improvement for users, yet we also knew that, because of the page ownership challenges and use of multiple tech stacks to build the site, it would cause a considerable workflow change for other teams. Design and data science collaboration enabled us to validate our way towards the vision incrementally, by breaking down the design into multiple experiments.
In our final test, we saw successful results and that sending spotify.com visitors to the web player significantly increased sign-ups, Premium subscriptions, and retention on Spotify on almost all devices. With millions visiting our homepage daily, this change is expected to bring in 2 million incremental monthly active users!
What we learned
Bring stakeholders in early
We had regular design meetings and sprints throughout this project to make sure we had team alignment and buy-in given the scope of the project. We invited members from different disciplines and other web teams to get a well-rounded perspective of what we wanted to achieve.
Lead with a vision
While including stakeholders in the design process, we created a bold user-centric vision for the new homepage in order to make the future more attainable. It guided the experiments, helped us plan a roadmap, and got commitment from stakeholder teams.
Even failures provide valuable insight
Negative user feedback is often discouraging, but it’s important to spend time understanding the results because it’s possible that a few small changes could flip outcomes. While we saw some failed experiments, we gained valuable insight in understanding the bigger picture of what we needed to do next, including being more strategic with design tweaks in the final experiment we ran.