A Dating App: a UX/ UI Case Study

Chris Peterson
Apr 2, 2017 · 6 min read
Image for post
Image for post

What is Blinder?

Blinder is a dating app that arises from a specific pain point of dating app users: that many apps like Tinder focus primarily on photos and find it difficult to find matches based on hobbies, taste etc. Key features include story cards where users can read interesting facts about possible matches and dating ideas to provide more interesting dates for matches.

01. DEFINE:

Listen, discover and ideate. Let’s create clear viable solutions.

I started my research by creating an Empathy Map to find out their fears, motivations and needs. And from there I went on to create an Affinity Diagram to find out common themes between our possible users.

Image for post
Image for post
Image for post
Image for post

To confirm my hypothesis’ I went out and interviewed people at a bar, a great place to find dating app users. I only wish I had interviewed some guys. The girls we just so eager to talk about love haha. I also did an online survey on Typeform to get an overall consesus of who our users are. You can see the results here: Typeform Blinder Survey.

Image for post
Image for post
Image for post
Image for post

KEY THEMES:

  1. People want to see a picture before liking them but looks are not the most important thing.
  2. Almost no one trusts dating apps but many still use it everyday as it does have it’s addictive qualities.
  3. Most eventually want serious relationships but when in use many use it just for fun.
  4. It’s a private thing done at home, alone or on the go.

From my research I was able to identify key users and I created a table with user types and personas. These are a great way to help us put ourselves in the shoes of the user.

Image for post
Image for post
Image for post
Image for post

Creating Story boards and User Journeys are a great way to help define key features and error prevention for applications. Along with User stories we are able to knead out possible problems based on their needs and desires.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

In General our users are singles between 25–35 years old. Their motto is, “If I find someone special great but if not, let’s have fun.”

KEY FEATURE #1

BEHIND EVERY FACE THERE IS A STORY. One solution I’d like to offer in this app are story cards as our stories invite curiosity and connection, furthering the likelihood of creating better matches.

Image for post
Image for post
Image for post
Image for post

KEY FEATURE #2:

Offering date ideas for our users, we open up the door to browse and share possible dating options near them and their matches. Having great, affordable dating ideas could come from the sponsors below, opening up the possibility for greater variety of fun for the user and in turn financial support for us.

Image for post
Image for post

INFORMATION ARCHITECTURE:

With our research done we are able to gather all the information in Venn Diagrams and make user flows like the ones below. We want to make sure there are no dead ends for the user when using the app.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

To make sure my information architecture was going in the right direction I did some card sorting via facetime with some friends from Gijon, Spain. Interestingly the girls pointed out different things than my friend Pablo. The girls talked about notifications being important as they get tons of likes everyday and would like to mute them. Pablo on the other hand felt it was important to have a filter page so he could find the right matches according to his interests.

02. DESIGN:

Build, Interact and Execute. Let’s materialize our ideas and solutions.

Before hitting Sketch, I like to sketch out my wireframes on paper.

Image for post
Image for post

Along with my wireframes, I’m looking for inspiration by creating mood boards of colors, textures, UI patterns, type etc.

Tone: as you can see from the wireframes above I was looking for a welcoming, you’re in control type of tone, creating trust with the user in the app sign up walkthrough.

My main UI inspiration are cards. And specifically inbbbox app for Dribbble.

Image for post
Image for post

I was looking for colors that were neither super bright nor to0 faded. Remember our users are neither the desperate try to get laid type nor in love with love itself. Flat colors ranging from warm colors inciting passion yet cool colors that relax seems to be a good fit.

I chose LL Brown as my main header/ body font and Meta Serif just for the story cards. When we read stories in print they are usually printed in serif. So this seems like an optimal font for the story cards.

Image for post
Image for post
Image for post
Image for post
Our users are neither desperate nor in love with love.

After creating my mood boards in InVision, I began to translate my paper wireframes into Sketch. Below are some of my art-boards.

Image for post
Image for post

Key feature #1: STORY CARDS. No more X button. No quick judgements. No more swiping but a vertical scroll with one card per screen. Let’s focus on person’s story first. Looks second (small profile pic on card).

Image for post
Image for post

Key feature #2: DATING IDEAS. In order to encourage more interesting dates for our matches, I’ve included the possibility for users to search for date options by location, category, date and pricing.

Image for post
Image for post

Though I prefer to use InVision for it’s rapid prototyping abilities, Flinto has seemingly limitless possibilities. Below you can see some of my UI animations I created with Flinto.

And finally with all the artboards created, I created a style guide with the deliverable assets for programers.

Image for post
Image for post

03. REFINE:

Test, measure & optimize. Let’s improve this bad baby.

Once a working prototype is available and even when a first version of the app is released, the idea in this last part of design process is to fine-tune and tweak out any inconsistencies. We want to put usable and delightful products in the hands of our users. It’s iterative and the defining, designing and refining is done over and over again with the involvement of users.

With my bootcamp with Ironhack we didn’t get to practice this stage of the design process and only looked at the theory.

Cheers and hope you enjoyed this case study. More to come as I continue to learn and until then, never stop exploring!

Chris Peterson

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store