Blinder
BLINDER
Dating App // UX & UI
SERVICES:
Research, UX design, prototyping, UI/visual design
TIMELINE:
Two Weeks
DELIVERABLES:
Research, UX design, prototyping , UI/visual design
TOOLS:
Sketch, InVision, Illustrator, PopApp, Google Slides, Balsamiq Mockups
A new ‘vision’ for the dating app world
Dating apps are becoming more and more popular each passing day. Currently, the dating app landscape is vast but with the majority of apps working around the same premise: Find someone you are physically attracted to and interact.
Blinder was a challenge given to us as a group during my Iron Hack Miami UX/UI Design cohort. In the briefing for this app we were given specific instructions to construct a dating app in which the main feature the investor wanted was that users are not to be able to see each others pictures when matched.
In five weeks I was able to develop Blinder, a dating app that connects users by common likes in which the users will unlock the picture of their match by exploring what likes they have in common.
Blinder is a dating app that only allows you to view pictures after exploring your match. What was the design process behind this? Keep reading to find out.
01- Empathizing with the user & defining the problem
Before I could design a solution, I knew that I needed to learn more about the current landscape of dating apps and the people using them. This would help me identify problems users are currently experiencing and what they felt was missing from these apps. I conducted a competitive analysis of the current dating app offerings in conjunction with 9 user interviews and a qualitative and quantitative survey that yielded 13 results. I wanted to uncover the following themes.
-
What type of relationships are users looking to find on dating apps?
-
What are important factors when looking for a serious relationship?
-
How important is it to see a picture of who you are matched with?
Organizing my data using affinity diagrams
“Apps like Tinder and Bumble seem to be more of a casual thing. It would be nice for there to be an app that’s for something a bit more serious.“
These trends started to emerge to form a mental model of dating app users:
-
They see dating apps as more of a ‘casual’ experience in which they are not finding serious relationships.
-
They feel that sharing common likes and interests is important in finding a serious relationship.
-
They want to see a picture of who they are matched with before meeting.
​
To help me further break down the data, I created a persona that I used throughout the process. Creating this persona allowed me to focus on who I was designing for while always keeping in mind the frustrations that they were currently experiencing.
THE PROBLEM:
People who are not in a relationship wanted a quick, fun, and interactive way to connect with other people who were looking for serious relationships because they felt that the current dating app landscape was too casual. My design had to be:
SAFE
Comfort the users by verifying accounts and giving them the peace of mind that who they are talking to is an actual person.
INTERACTIVE
Make the experience of the app ‘fun’ by ‘gamifying’ the process of exploring your match.
AUTOMATED
Create connections for the users on the back end so that finding matches is easy.
FAMILIAR
Use current dating app patterns to present the information in a way that is intuitive to the user.
I used these principles to drive my designs as I moved forward into creating prototypes.
02- Ideation
At first, the concept I was developing was one in which a user created a profile in which they identified what interests they may have. The original iteration had a complicated profile setup in which the user manually imputed what interests they may have. My user persona called for a simple intuitive app which did not fit with this model.
Thinking with information architecture helped me determine what information was most important in matching with someone online. I asked myself:
How can I have a user identify what they like in a simple but interactive fashion?
I identified in my research that users liked the following features from current dating apps and that they were looking to be matched by the following things:
-
Users liked the ‘swiping’ interaction that apps like Tinder provided.
-
Users liked that current apps automatically matched them with other users.
-
Common interests such as movies, music, television, lifestyle choices, and sports were important in finding a serious relationship.
This insight led to a major change in my app. I would now provide users with pre-determined categories in which they would swipe right if they liked the subject given to them and left if not. This concept fit my persona’s desire of having a fun and interactive app that allowed them to be matched with other users on the site.
Progression of how a user identifies likes
Now that I had tackled how the user was going to input their profile information, it was time to take on the challenge of creating a fun and rewarding way for the users to explore their matches. My concept was always to hide the matches picture behind a hexagon that was a predominant image on the matches profile. The image would be unlocked by exploring a subject, these subject would be assigned to a ball on the outside of the Hexagon. A user would have to then swipe the ‘ball’ into the Hexagon in order to unlock a portion of the picture. This iteration was too complex though and I had to come up with a simple solution.
​
Again, I referenced my research and I asked myself the following:
What familiar pattern can I use to have the picture unlock system be intuitive?
I was able to go back to my research and identify that users really gravitated towards the tinder layout. In this layout users are presented with ‘cards’ of their matches which they can explore. After brainstorming how I could bring the ‘cards’ pattern into my app I realized that I could create a card for each category and that my users could interact with these cards in order to unlock the Hexagon picture.
​
​
-
A verification system when creating an account.
-
A quick, fun, and interactive way to identify what interests you may have.
-
A rewarding match exploration system that would allow users to unlock the picture of their match by exploring their information.
​
I applied my design principles to shape the main app functions:
​
Prototyping: Concept ideation for low-fidelity prototypes
03 - Prototyping
Low Fidelity Prototype: I honed in on the design principle of ‘simple’ for my paper prototype. I wanted to make the app as easy as possible to use for my persona to use because it is something that he appreciated from current apps such as tinder. A simple, interactive, and intuitive design would be most useful for him.
​
Mid Fidelity Prototype: My main focus here was to really come up with a good layout for all the information I was trying to create the ‘feel’ of my app by having a simple and easy to use UI. By creating a wireframe prototype I was able to find the appropriate spacing that my app needed and really allowed me to prioritize the information that I felt was most important for my users.
Design Inspiration
The first step I took was creating a mood board for my app. I chose seven images, a color palette, and a font family that I believed represented the mood I wanted to create for my app. Quickly after creating this mood board I realized that the images I choose were conveying the emotions that I wanted my users to feel but that the color palette I was using did not match the ‘fun’ and ‘gamifyed’ feel I wanted for my app.
​
Mood Board Concept: Right emotions shown by images but color palette felt wrong
My next step was creating a style guide for my app. Now that I knew that I wanted more of a fun feel to my app I was able to choose a color palette that really expressed those feelings. I also chose a font that was easy to read and had a bit of personality.
High-Fidelity Prototype
That's more like it! Adjusted colors and fonts gave me the feel I was looking for
I used sketch to create my high fidelity prototype with flows for on-boarding, identifying likes, exploring matches, unlocking match picture, and sending match a message. View full prototype in InVision.
04 - The end product
Final prototype features:
Log in screen, account creation, setup wizard, like identification, match exploration, match picture unlock, messaging with match, and profile page layout.
On-boarding wizard shows users how to interact with app
Match exploration allows user to unlock portions of their matches picture
Future considerations
​
If I had more time to ideate on Blinder, I would add a feature to suggest date ideas for the user and their match. Having a common interests with your match is very important to making connections but incorporating those common interests into facilitating users meeting in person would give added value to the app for users who are looking for serious relationships.
​
Key Learnings
​
-
Reference Data. Referring back to the user research that I had gathered was crucial. Having the user who I was designing for in mind allowed me to hone in on features that would separate my app from the rest.
​
-
Color is vital! Selecting colors that portrayed the emotions that I wanted to express really helped me achieve the overall mood I was going for.
​
-
Smart Questions. Conduct effective user interviews by asking insightful, non-leading questions.
​
-
Organization is Huuuuge. Organize data in a way that paints the picture of the users, what they want, and what they don’t want to help innovate the design.
​
-
Iterate, iterate, iterate! The more I put down my versions on either pencil and paper or digitally the more I was able to flush out ‘bad’ ideas and incorporate useful functions.
Blinder app landing page
Closing Thoughts
This was an extremely challenging but at the end of the day fun project to work on. I stayed true to my design principles to give the users a dating app that was fun and interactive but that they could find a serious relationship on. It was really neat to see all the different ideas that my cohort classmates had and how they came up with a solution for the challenge we were given. At the end of the day we all used the UX Design approach to create a piece of work that we can be proud of!