A Dating App: a UX/ UI Case Study

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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).
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.

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.

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