Looking For Fashion?

Rethinking The Design Of Modern Dating Apps for Ultimate User Experience: Coffee Meets Bagel

Insights From Redesigning A Modern Dating App: Coffee Meets Bagel


Mixing love and technology is a relatively new concept, in the US alone, dating app consumption has gone up from 11% to 33% in the last 7 years. One app in the market, currently geared towards more serious daters, is Coffee Meets Bagel. I immediately noticed some ways in which the UX and UI of the app can be improved to highlight its USPs better.

Why Do Users Pick Coffee Meets Bagel?

CMB seems to have adopted a rather anti-tinder/anti-swiping stance, marketing itself as an app for more serious daters. The ‘smart algorithm’ only shows users a number of matches per day which picks up on their preferences and makes better recommendations based on that. Accordingly, most of the users on CMB are millennial working professionals.

Upon interviews and contextual inquiries with a number of users that fit this demographic, I found the following to be important in terms of improvement.

“What Now…?” — Think About Navigation

Understanding the flow in which users complete actions is imperative to the overall quality of the app. This was clear looking at the User Flow of the CMB app for a user who wants to get a match.

The user flow highlights three natural endings to a users journey on the app — users meet their match, they close the app, or they change preferences. Understanding these elements highlights two main points.

  1. The importance of the ‘Discover’ page. Since the ‘Suggested’ page is limited to a smaller number of bagels, usually averaging six per day — the app is designed to push users to the discover page to continue looking at more potential matches after the initial curated matches run out.
  2. Secondly, after a user has gone through the matches on both pages and is still not happy, they will look to changing their user preferences to get better recommendations — or quit using the app.

If the user is unable to navigate to the ‘Discover’ page, or does not understand the purpose of the ‘Discover’ page (as was highlighted consistently through the research), the user flow is essentially halved, at which point, he/she will close the app. The same applies if the user is not able to locate the preferences page.

Therefore, thinking about navigation ensures that users never exit your app simply because they aren’t sure what to do next. Especially, when there are other features in place for them to utilise.

Users Need To Know What To Do — Progressive App Onboarding Is Crucial

Most of the users I interviewed complained about one consistent trend: confusion.

Coffee Meets Bagel has a number of features throughout the app, but little explanation on what they mean. The only time a user could find a clear understanding of these were on the websites FAQ page. To tackle this issue, I believe the most important thing is the implementation of progressive app onboarding — walking users through the features of the app as and when they use it. As Jane Portman puts it -

“Imagine yourself going to a new gym. You’re standing there awkwardly in your street clothes, and a polite sales rep is showing you around. Are you listening to her carefully, or would you rather change into your brand-new fitness attire and try out that shiny elliptical?”

1. Setting Up A Profile & Preferences

On the original app, once the users are prompted to set up their profile, they are taken straight to the matches page. The users therefore have to manually figure out where to change their preferences, which as seen in the gif below, is nested within the user profile photo. As was found above, easy access to changing preferences are crucial to whether a user will exit the app or not. Most of the users I interviewed mentioned that they found it difficult to understand where the preferences are located, and that it is an essential step to take before getting matches.

Nested ‘Preferences’ Page On The Original App.

By onboarding users to first, introduce them to the app and set up their profile, and subsequently ‘guide’ them to the preferences page, the users are instead walked through the app and the most imperative steps before they start getting matches.

Onboarding flow to 1. Build a profile and 2. Set preferences

2. ‘Suggested’ vs ‘Discover’ Matches:

Suggested vs Discover Pages On The Original App

As found on the app’s website FAQ page, ‘Suggested’ matches are a users most compatible matches based on their preferences, as picked by the smart algorithm. Whereas the ‘Discover’ matches are “the schmear on top,” for when users want to browse extra bagels nearby beyond the suggested matches. However, all of the users I interviewed mentioned that they did not understand the difference between these two pages. As was found, if users are unable to understand this difference, they would exit the app without moving between these two pages. After implementing the following onboarding, all the users during the usability testing phase of this project mentioned that they were consequently able to understand the clear difference between both these features.

Onboarding flow for ‘Suggested’ matches

Doing this also helped introduce users to other features of the app that were initially unclear, such as the timer on top, which indicates the amount of time left before a new set of matches are presented.

Onboarding flow for ‘Discover’ matches
Ultimately, onboarding your users progressively as in this case ensures that not only are you explaining key features of the app without them having to look for those answers on your website, but also that you are doing so in their own pace.

Sometimes Less Is More — Information Architecture Matters

“Perfection is achieved when there is nothing left to take away” — Antoine de Saint-Exupéry
Sitemap Of The Current App

In keeping with the consistent user observation of feeling “confused” by the app, building a sitemap to understand the information hierarchy was useful. The above showed that there are two sets of preferences that users can set — one for your ‘Suggested’ matches, and one for your ‘Discover’ matches.

Nearly The Same Set of Preferences for Both Pages

Apart from ‘Degrees’ and ‘Active within the last 72 hours’, the preferences for both these features were exactly the same. Users mentioned not understanding why this exists. My rationale in redesigning this page was that:

  1. If the idea of the ‘Discover’ page is to have a slight deviation from your original preferences, then that is algorithmic, and should not require users to actually set these preferences.
  2. If a matches degrees/qualifications matter for the ‘Discover’ matches, they would definitely matter for the ‘Suggested’ matches too.

So, by combining both these into just one set of preferences that the user sets once at the start of using the app, as illustrated below, removes repetition and confusion through the process.

Redesigned ‘Preferences’ Page

By simplifying the number of steps users need to take, and the removal of repetitive features, the overall flow of the app is made less confusing — only keeping on what adds value.

Other Considerations

Think About The Naming Of Features

The simple tweak of changing ‘Suggested Matches’ to ‘Best Matches’ and ‘Discover’ to ‘Other Matches’ helped hint to the users that one set of matches is inherently more in line with your preferences.

Let Users Know About Any Important Timings

All chats on CMB have a certain date before the matches expire. Usually, it is unclear how long this is. Adding a donut that reduces along with time passed helps users understand the importance of starting a chat.

Consider Screen Gestures

It’s imperative to think about the way in which users will actually interact using gestures on the screen. This is a great opportunity to minimise cognitive load remembering the swiping directions of different features, and use the product in a way that is most intuitive. By switching from needing to swipe right to view photos, and swiping down to view match information to simply swiping down for all information, the flow is made easier.

Gesture Interactions On The Original vs Redesigned App

If you have any comments about additional potential changes on this hypothetical redesign, or any feedback— feel free to reach out to me on aashna.sg@gmail.com, or in the comments section below. Thanks for reading!

Rethinking The Design Of Modern Dating Apps for Ultimate User Experience: Coffee Meets Bagel was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.