click.jpg

click

photo-1515890435782-59a5bb6ec191.jpg

CLICK

 

Overview
This is a concept dating app that combines the power of technology and psychology. Click will aim to give people better chances at meeting others they “click” with. The idea is to use the Myers-Briggs Type Indicator (MBTI) to pair up people with complementary personality types. The aim is to give people more fulfillment in their interactions resulting in higher chances of success.

Objective
To design a mobile app for Click’s core digital flow

Timeline
June 2020 (2 Weeks)

Role
Sole designer doing research, UX and UI design

Tools
Adobe XD, Sketch


 

Getting into a Dater’s Mindset

It’s safe to say that most people are looking to form meaningful connections in life, whether it be romantic or platonic. Relationships play a prevalent role in our lives and in the past decade, people have exponentially turned to the internet to meet their potential partners.

With the immense rise of apps in the past 8 years, people have so many choices in terms of which platform to use. To understand how to be an effective app - I needed to learn about user’s needs, habits and pain points of existing applications.

Research has shown that social media has increased feelings of loneliness and many online daters are experiencing “dating-app fatigue.” In order to address these problems, Click sets out to differentiate from the competition by incorporating MBTI into the application.

My research goals were to uncover information about the following questions:

  • How do people choose which app to use?

  • What app features do people enjoy?

  • What pain points do users encounter when using current apps?

Secondary Research

I began my secondary research by gathering data and understanding the current landscape of online dating applications. This provided me with an initial understanding of user’s habits, preferences and trends of these applications.

Key findings:

  • A Stanford sociologist (Michael Rosenfeld) says that meeting a significant other online has replaced meeting through friends. People trust dating technology more and more, and the stigma of online dating seems to have worn off. (Shashkevich, 2019)

  • Rosenfeld reported a nationally representative 2017 survey of American adults found about 39% of heterosexual couples reported meeting their partners online, compared to 22% in 2009. (Shashkevich, 2019)

  • The American dating industry is a $3-billion US dollar industry and has seen a 140% increase in revenue since 2009. (Macdonald, 2019)

  • It’s been reported there are approximately 55 million mobile dating app users in North America alone and estimates that number will grow by 25% next year. (Macdonald, 2019)

  • More and more people are growing dissatisfied with the mechanical exercising of swiping for love and experienc dating app fatigue. People are experiencing anxiety and growing stressed. (Madonald, 2019)

online-dating-mainchart-1.jpg

Evolution of Dating

I also wanted to do research for MBTI and understand the history and validity behind it. The personality theory began with Katharine Cook Briggs and her daughter, Isabel Briggs Myers in the early mid-20th century. WWII heavily influenced this theory because Myers thought that if people could understand each other better, consequently they could work better in unity resulting in less conflict. Myers then spent the 20 years developing and validating her assumptions and theories. Today, this personality test is one of the most widely used tool in the world so the power of it should not be ignored.

The MBTI is a personality assessment that breaks people down into 16 distinct personality types. Obviously people cannot be so neatly boxed into 16 categories, but it gives a great foundation and guideline. Theoretically, if we could pair people in accordance to their MBTI and using the compatibility theories behind - there would be a much greater chance of success.

Competitive Analysis

In order to get a general picture of what features the current applications have - I did a competitive analysis of a few major applications. The analysis included Tinder, Bumble, Hinge, Coffee Meets Bagel and OkCupid. I went through each of the apps and compared their features and got a general sense of how they functioned. Most of the competitors operated in similar ways, which gave me an idea of the common expectations that daters would have for a dating app.

CompetitiveAnalysis.png
 

Users Interviews

With my research goals in mind, I then proceeded to create a few interview questions that would allow me to empathize with dater’s needs, motivations and frustrations. I conducted 5 user interviews to learn more about their experiences with apps and to gain insight I otherwise may have missed.

 
2.png

Interview Questions

These are a few of the questions that I asked. Open ended questions allowed more insight.

 

From my interviews, I gathered some key insights:

  • People like the apps that were simple to use/user friendly

  • Someone mentioned that OkCupid had way too much going on and it was a headache

  • Many people seemed to think dating apps were a waste of time because there was a lot of small talk that led to nowhere (had to sift through many incompatible matches)

  • For apps other than Bumble - a lot of times there would be no interactions after matching

  • People had different expectations of what relationship they were looking for which was a pain point

After collecting data, I then created a persona and empathy map highlighting key points of what the average user might look like and what their wants, needs and frustrations are. The target persona is Denise, who is a busy working professional in her early 30’s living in a metropolitan city.

 
 

 

Exploring Solutions to Match Better

Moving onto the ideation phase, I then brainstormed potential features that could meet Denise’s needs and also potentially ease some of her frustrations. I framed my research insight into the following How Might We (HMW) questions:

 
HMW.png
 

The key here is to really notice what features are currently working great and then fill in problem areas with a new solution. A few of the female interviewees mentioned particularly how they liked a feature on a Bumble, the one that they force each match to message each other within 24 hours. They explained that without this function, a lot of times people just sit on their match list and no one ever messages. Although, most of them seemed to not really like the rule that women had to message first. People mentioned they enjoyed the relatively new app, Hinge. This is because when a user signs up for this app they are asked some personalized questions, so other users are able to get to know their personality more and feel more connected. They also mentioned had OkCupid was decent but it was just cumbersome to use. They did appreciate how there were compatibility questions and percentages given to them and their potential matches.

So just by looking at this data, I already have an idea of what functions I should include in Click and what to avoid.

Key takeaways of proposed solutions:

  • 24 hour messaging system but both ways now to encourage more user engagement

  • User’s profile should have some personalized questions/preferences to makes users feel more connected

  • Users need to specify what sort of relationship they are looking for

  • Use MBTI for compatibility component (users either already know their personality type or they can get typed with a short quiz within the app before entering the main swiping section for simplicity’s sake)

 

 

Defining the Flow of Click

I started out this process by mapping out the information architecture of how this app would potentially look like.

 
InformationArchitecture.png

Application map

After defining the information architecture, the next step was to outline the user flow for the distinguishing MBTI feature. The user flow map shows what Denise’s user journey might look like when navigating through Click.

 

Wireframes

I started to brainstorm what the pages might look like - I drew some initial sketches just to get some ideas going. I decided that it would be necessary to include the MBTI aspect right away when the user logs in - since that is the defining feature of the app. These sketches were my visual guide for beginning to create my digital wireframes.

Sketches.png

After sketching some initial ideas, I proceeded to design low-fidelity digital wireframes. Keeping my HMW questions in mind, I thought about how to best organize and present information so Denise could navigate through the app easily. Implemented solutions included guiding the user through the necessary steps in a simple way. After the initial set up, the app functions similarly to a widespread dating app - so people should be accustomed to how it works. With that being said, I would still create some pointers of the swipe right and left function incase there were new users (instructions will just appear when user is logging in for the first time).

 

 

Giving a Personality to Click

When thinking about the colour scheme of Click - I wanted a palette which was different from the current competitors so it could have a signature. I went on to create a moodboard to look for some inspiration in terms of color combinations. I ended up choosing soft purples and blues because they had a dreamy romantic air about them.

The logo was inspired by the app name, Click. The lock signifies the “click” and the 2 hearts represent the people. I wanted to keep the colors, fonts and icons fun and light for an app of this nature.

I applied my style guide to some preliminary wireframes to get a feel of what the app will look like:

 
1 – 1.png
 

 

Testing and Iteration

After designing more wireframes and then turning them into mockups, I conducted 5 usability tests using a prototype created from XD. These tests were conducted in-person and remotely - they were done to evaluate ease of use and identify any areas of confusion. The main tasks for the usability tests were for users to edit MBTI preferences after initial set up and to see if they have any comments about the user flow of the app.

Testing objectives included:

  • What did they think about the initial set up process?

  • How easily can users navigate and find the MBTI filter option inside the app?

  • Does the current location of the MBTI filter/settings make sense for users?

  • Do users know what the “MBTI compatibility mode” does?

Key findings:

  • 3/5 of participants enjoyed the grid style more and the other preferred vertical scrolling of the dater’s profile

  • 3/5 of users wasn’t sure how far 40km might be and said a visual guide would be useful

  • 4/5 users said the call to action buttons were too faded in color and wasn’t sure if it was disabled or if they click on it

  • All users thought the set up process was simple and intuitive

  • All users were able navigate to MBTI filters because of the prompt at the beginning telling them where it is, they also found it easy to find out what the auto-match mode is because of the tooltip

Revisions

After gathering and analyzing data from usability tests, I focused on making the changes that were suggested on a majority vote. I mainly focused on making buttons more distinguishable and having better visual cues. I also took advice about grid style and combined that with vertical scrolling which competitor’s currently do not implement. I went with this layout because there was quite even favouritism for both layouts, so I combined both of these elements to set this app layout apart from competitors.

I like a grid style because like instagram, I can see more posts at the same time and I can click into the pictures that interest me most.

Final Designs

 
 
 
 
 
 
 

 

Final Thoughts

The most challenging part of this project was figuring out how to combat the issue of incompatible matches and how exactly to integrate the MBTI function with the rest of the app. Another challenge was deciding how to organize the main swipe area in an innovative way - since many applications in the market look similar. I designed this interface with the goal of humanizing people more (with the video function, quirky personal facts) and to increase user activity with one another.

Next Steps:

  • Continue designing UX/UI for settings and chat user flows

  • Conduct additional testing on revised designs, collect feedback, and iterate as necessary (my sample size of 5 was definitely small so surely there is much room for improvement and iterations to be made)