duet.
Dating through Musical Compatibility

Case Study By John Lattanzi

12/16/2020

Overview:

Project Summary:

The idea behind this application is to create a dating app that utilizes the user’s music taste and interests as a large factor for compatibility between people. People have such a strong connection to music, where you can discover a lot about them based on the music they listen to; so, I decided to turn that into a main feature of a dating app. Each user will select 10 songs and one playlist (all playable through the app) that they like and, based on those songs, genres, and bands, they will be paired with people who chose similar music. You’ll see their music pop up and, If you like it, you’ll then rate it to see their full profile. If you don’t, you’ll see the next person and the app will track what you do and don’t like to better show music you will like.

Product: Dating app focused on musical compatibility

Project Dates: November 16, 2020 - December 14, 2020

Tools:

• AdobeXD - Creating wireframes and clickable prototypes

• Figma - Crafting research deliverables

• Procreate - Drawing the logo

• Photoshop - Working with vectors and visual editing

My Role:

I managed the full process of this case study from UX Research to Wireframing and Prototyping to Visual Design.

Responsibilities:

UX Research

• Created interview script and facilitated user interviews

• Crafted User Surveys

• Created personas, empathy maps, and journey maps

• Tested for accessibility standards

• Created deadlines for each step of the process

• Facilitated user discussions to ensure the app was on the right track

Problem Statement:

The goal was to provide users with a new way to navigate the dating scene, where you feel like you know the person a bit more before you match with them. The concept is to apply easy navigation and a machine learning focus to dating through your personal music taste.

Business Requirements:

The MVP (minimum viable product) is intended to be something that users would actually use, that is intuitive to users, passes accessibility guidelines, and offers users a new way to meet people. 

Constraints

• One month deadline

• Limited Resources for further development

Research

Methods of Gathering Research to ensure the work we’re doing is user-focused and designed with them in mind:

• Surveys

• Competitive Analysis

• User Interviews

Surveys:

The survey I created was to focus on the user’s actual interest in a platform like this and what their experience is with dating apps in general.

Demographic

• While anyone 18+ can use the app, the main group of responses came from single people in their 20’s-30’s.

Why people use dating apps

• This answer varied heavily, showing that each person uses these apps for very different reasons, so I’ll need to accommodate for many different types of users

Main Frustrations

• Many unwanted/off-putting messages and a general mistrust of people being genuine on dating apps

The main response I received was that people want partners with similar interests and that someone’s bio and conversation are what interests them the most. However, before going on that first date, people are generally not very excited about it. Obviously, you need to be somewhat interested in the person to meet up with them, but my aim is to increase the excitement that you have before going on your first date.

Now, is this app idea a good idea?

While I knew that everyone has a special place in their heart for music, I was blown away by the overwhelming support for this app and this idea. I received very positive responses to people’s desire for a partner with similar music taste and said they’d give someone a chance if they had a similar taste in music to them.

To me, that means this app is plausible and is going in the right direction, which gave me a lot of confidence moving forward.

Takeaways

• Many people use dating apps to meet new people

• There are a lot of factors that go into finding someone you’d want to meet up with

• Many users find musical compatibility to be a big factor in meeting up with someone or getting to know more about them

• Current dating apps have problems, specifically with unwanted/off-putting messages and the inability to learn about the people you’re swiping on before messaging them

• People look for very different things in dating apps

Competitive Analysis:

Main competitors: 

According to the poll in the survey, the main competitors were Tinder, Bumble, and Hinge. I focused my competitive analysis on those three companies because of this and conducted a full SWOT analysis for each one.

Tinder

Tinder was the largest response and is the most well known dating app. I conducted a full SWOT analysis on them and these were my results:

Bumble

Bumble was tied for second with Hinge, so I conducted a full SWOT analysis on them, too. One thing to note is that one of the biggest issues in dating apps (from my survey) was the amount of unwanted/off-putting messages; they tackled that issue by only letting the women message first.

Hinge

Hinge was also tied for second and one great thing about their platform is their focus on getting to know people immediately through different questions and the ability to message people directly based on their pictures or their answers. The full SWOT analysis is below.

User Interviews

Following my look through these apps and my survey results in hand, I conducted three user interviews with individuals who responded to my survey. 

The themes found in these interviews were a general interest in dating apps, finding someone with a similar taste in music and style to them, and limiting the creepy messages that come from dating applications. A few quotes from my discussions:

“I’m curious if some people would actually tell you what music they like or if they’d just post popular music to get more matches.”
“I would love to make and share playlists with people, kind of like how my parents made mixtapes for each other.”
“I feel like you’re seeing everyone’s spotify wrapped playlists, so it’s a fun peek into who they are.”
“If this becomes a real app, I’d love to use it.”

That feedback gave me a lot of confidence to move forward with this application. So far, this is the information that I knew:

• Many people use dating apps to meet new people

• People are open to trying new dating apps if they’re good and if you can actually learn about the person

• A general distrust of the personas people use in their dating profiles, so they’d love to peel back that curtain and learn more about the person

• Many users find musical compatibility to be a big factor in meeting up with someone or getting to know more about them

• People look for very different things in dating apps

I took that information and decided to create several user stories that would help me visualize what the users would want in a new app, why they would want it, and what the priority level of that feature would be.

Personas

I took this information a step further and created 3 personas that highlighted the biggest frustrations and biggest needs that my research reflected to help me focus on the user’s driving forces moving forward.

The first persona is named Dawn. She’s in her 20’s and is looking to have better conversations with people who aren’t boring or creepy. She loves Pop, Indie, and EDM music the most and uses both Spotify and Apple Music to listen to them. 

Next up is Chris, a musician in his late 20’s that thinks music is the window to the soul. He wants to meet new people in the city he just moved to and thinks it’s very difficult to gauge someone’s personality based on their bio alone. He listens to mostly Classical and R&B music and listens exclusively through Spotify, but has a Soundcloud to listen to his friends’ music and to post a few covers himself.

Finally, I created Kristen, who is in her early 40’s and is recently divorced. She’s new to dating apps because she’s been with one person for the last 20 years and is trying to get back out there. She listens mostly to the radio and Pandora, where she listens to Rock, Country, Pop, and R&B. Her main frustration is trying to figure out how dating apps work, not knowing the people ahead of time, and getting used to being single.

The clarity that I gained from making these Personas helped me focus on making this app accessible and easy to use for all commuters, where they can find the information quickly.

To recap, these were the biggest pain points:

• Many people use dating apps to meet new people

• People are open to trying new dating apps if they’re good and if you can actually learn about the person

• A general distrust of the personas people use in their dating profiles, so they’d love to peel back that curtain and learn more about the person

• Many users find musical compatibility to be a big factor in meeting up with someone or getting to know more about them

• People look for very different things in dating apps

Ideation

The next step in this process was to start sketching out ideas on how I could accomplish these goals, help fix the pain points, and be something user-focused.

To do so, I sketched out some drawings, site maps, user flows, and wireframes.

These were some of the first sketches I created to go through how I wanted the app to flow and what I wanted the interface and site map to work. As time went on, I went through countless iterations for my user flow until I reached one that fit all my criteria.

Below are the user flows I created and the site map based on my drawings, user flows, and total vision for the site:

Wireframes

I started trying to turn my drawings into reality by creating wireframes. As I did, these were the main features I was focused on creating:

• Full onboarding process

• Ability to like profiles based on pictures and answers to questions

• Rating system to determine if you want to see their full profile or not

• Messaging features

• Ability to see who liked you

• Ability to play music through the app based on people’s profiles

• Edit profile screens

Feel free to click below to see all the wireframes together.

Visual Design and Prototyping

Design

To start this project, I wanted to focus on the little similarities people share when they like the same music. We all have a really special connection to music and have different relationships with different artists. I wanted this platform to be something where you could learn about someone based solely on their music taste and share a piece of yourself with the others on the platform.

The moodboard I created is on the right. I wanted to go for feelings like:

• Calm

• Safe

• Relaxed

• Like you’re in a movie

I decided to name the app ‘duet.’ because it’s two people bringing their own music tastes to the platform. When I think of a duet, other than Troy and Gabriella in High School Musical, I think of two people sharing their music and a piece of themselves with the other. So, I thought the name worked with the idea.

I decided to keep the title in lower case because it felt like less pressure and that you were going to use the app to just look for new music and find others. I added a period at the end of ‘duet.’ because it added a layer of finality to it; the goal is to show users they’re in good hands.

I actually drew this image to be used with the logo because I thought it summed up the experience of using this app very well. It’s two people enjoying each other’s company and the same music, I think it’s very nice.

Additionally, I wanted to go with a simple and muted color palette for that reason; I wanted the music to speak for itself and for users to not be distracted by the colors at play. I started with a very dark blue and wanted the background to be a soft purple/pink color (the first background color listed). However, after some user testing and feedback (some said it was too feminine looking and kind of like bubble gum), I decided to go with a more simple look of a very soft yellow color behind a very dark blue. The contrast with it is very high and I think it’s a cleaner and more concise version of the platform. Below are two examples of the color palettes and why I chose the yellow one.

I still like the purple/pink background personally, but the complimentary contrast that the yellow presents is very nice. Originally, I wanted the pink/purple because it’s a soft and cool color and purple is associated with the ideas of creativity and imagination, so I thought it’d be an excellent choice for music lovers. However, after the user testing, I took a step back and decided it’d be a better idea for it to resemble something more energy-filled and with a great calmness and serenity to it. I decided on the soft yellow color because my studies in color theory suggest that yellow is a color of happiness and cheerfulness, where softer and lighter yellows also give a calm feeling to that energy. Combining that with a very dark blue, which typically resembles calmness and serenity, it felt like a great match.

At this point in the design process, I wanted to take a look back to double check that the colors were readable and accessible. So, I tested every combination of colors that I was using for the app to make sure they passed the Contrast Checker feature that WebAIM offers. The main colors were the #0B0F1A (dark blue) and #FCFAED (soft yellow), and they passed easily.

Typography

Moving into Typography, I chose Nunito Sans as the title font and Lato as the general body text font. I chose Nunito Sans because, as a Sans Serif font, it felt really crisp and trustworthy, but it also didn’t seem overbearing or intrusive. Lato had a very similar feeling, but with a bit more of a fun feeling. So, I thought they’d be a great pair.

From all this work, I was able to start creating images, specifically for the splash screen, where I combined the picture I drew with the colors and fonts I chose; I also put them on a record player and let them spin.

With this, I ended up creating a really calm and relaxed app that was focused on providing a safe space to share music with people you may be interested in. From there, I created a full prototype:

Prototype

Onboarding Flow:

• Section focused on the full onboarding process to determine your age, interests, and music taste

View someone’s profile and like them flow:

• Section to show what it’s like to look through someone’s profile and like them

Profile/other screens flow:

• Section to show you how to edit your profile, message people, and view who liked you

Mockups

Here are also all of the mockups I made of the prototype:

Validation

I returned with this prototype to the five users that tested my prototype and this was the feedback I received:

• The app flowed easily

• The navigation was clear and reminded them a lot of Hinge in a good way

• This is an interesting idea and an app several of them would actually join

• The bottom icons seemed a bit separate from the app, so future iterations may make sense to update that

• Logical way of building out a dating profile

• They thought this was an interesting idea, enough so that they started asking their friends about their music taste and what it says about them

• They thought the ability to play music through the app was a great idea

Success?

I do feel like this app was a success because it solved many of the larger issues that the users were facing.

• Users were not feeling like they can learn about people.

  • Utilizing music as a main compatibility feature, I believe this helped them learn more about others and provided for better matches with people.

• Hard to share their own personal interests.

  • Music is a great personal interest to share and opens the door to having great, stress-free conversations with others.

Conclusions and Future Recommendations:

The biggest takeaway I got from this project is that it’s an idea that could really be used by people. From what was just an idea in my head, it was great to see so many people find interest and enjoyment from it. However, there is a lot more that can be done with it, so I wanted to include future ideas and what else I could do with it:

• Add a non-dating version, where you can just connect with people and share music with others - similar to Bumble’s friend section, but specifically focused on sharing playlists. I was thinking about making it a separate color than the yellow, where you can have both on at the same time and see what people are looking for.

• Implement a feature that helps you show specifically what you’re looking for a bit more clearly

• Make this compatible for iOS and Android devices

• Add a few more branding-focused icons and people to it to better help with marketing

Personal Findings

For this project specifically, I learned so much. It was really interesting focusing on a personal idea of mine where I only had myself to bounce ideas off of and to set my own business requirements. This process outlined specifically what is necessary to create the foundation of a great design and I’m really happy with the work I did. 

I learned to animate using AdobeXD, which this was my first time doing so instead of making GIFs on separate websites or utilizing Figma or InVision. I feel like my skills wireframing and prototyping, especially on AdobeXD went up dramatically. Also, I was able to create moodboards and style guides much faster than normal, so I’m impressed with how far I’ve come. 

Additionally, I learned that time management and staying organized are some of the most important parts of any project. That is some of the most valuable feedback I learned throughout this process and I’m proud of the work I did. I may even turn this into a real app some day!