Coffee Meets Bagel

Helping people make a genuine connection

The Client

Coffee Meets Bagel is a multi-million dollar dating app, founded and run by three sisters. Together they set out to create a dating app that was different from the rest—one that aimed to create authentic connections by focusing specifically on the dating experience of women.

The Brief

After six years and 215 billion romantic introductions, Coffee Meets Bagel had a loyal fan base that considered CMB the app to use for more ‘serious’ daters. However, CMB wanted to further refine their brand by rethinking their mobile experience. Pixelfat Design worked with CMB to redesign their iOS app, start a design language system and introduce design processes that would lay the foundation for more efficient implementation.

“From working with [Pixelfat], I know that it is critically important that design has the ability to clearly lay out the end goals and the design process that is required to get there.”

— Dawoon Kang, CEO, Coffee Meets Bagel

Screen+Shot+2018-10-12+at+3.26.34+PM.png

The Process

To redesign the CMB iOS experience we followed a specific design process to ensure that we produced the best results within the least amount of time and expense. At Pixelfat, we believe that good design doesn’t have to be mysterious, and laying out our process ahead of time helped get everybody on the same page.

Understanding the Problem

Before jumping into pixels, we like to do our homework. After all, it’s almost impossible to come up with a good solution without first understanding the problem. We begin this process by first understanding CMB’s competitive landscape and brand values. In other words, what is everyone else doing in the online dating world and how does CMB break away from the pack?

Initial Explorations

Together, we created three visually distinct design directions. We first started to visualize those design directions by creating moodboards—collections of photography, screen interfaces and type treatment.

Defining the Directions

We further defined the three directions by translating the moodboards into style studies—documents that exemplify how a visual mood might translate into UI elements.

Landing on a Solution

While we started with three distinct design directions, we eventually merged and omitted different elements from each direction. In this way we were able to distill the three directions into a single unique solution. We documented this final solution into something called an archetype, essentially a collection of key screens within the app that we redesigned with the new visual language.

From Exploration to Action

Using the final archetype, we then set out to create a component library. Basically, this is a guide for both designers and engineers to reference whenever a new feature is built. Over time this not only creates a consistent look and feel for any mobile experience, it speeds up design and implementation. In this way, having a strong design process doesn’t just ‘look pretty’, it benefits the entire product team.