Vibe Check
Find your unique dater type. Connect better with your matches. Go on more first dates.
Problem Space
We all know that dating apps have a lot of problems. It’s difficult to come up with a good set of photos, writing a bio is often harder than writing an essay, and there can be some pretty creepy people on these platforms.
But one of the most important functions that dating apps have is to help people go on first dates.
Unfortunately, swipe-based dating apps are not very good at this. Dater profiles rarely have enough information to convey personality and signal romantic compatibility. This lack of information also makes it difficult to start a conversation with a match. So most of the matches on these apps just stay as matches, never to develop into something more.
So we have a problem here. We know that these apps are now the most popular method of dating, according to a recent study from Stanford. We also know how important it is to get to know someone in person through body language and non-verbal communication. Yet dating apps are not able to get more people to connect in person.
Research Insights
Our team interviewed 10 online daters within our social circle between the ages of 18-30 and learned about their experiences with online dating. Here are some early insights that we gathered:
- Most online dating matches don’t turn into first dates
- It’s hard to know what other people are people are looking for
- Values, goals, and personal interests are important information to know before a first date
- Engaging conversations are rare on dating apps
- Some dating app users want to know a lot about their matches, while others just want to meet up in person
These insights helped us validate our original hypothesis. We now knew how difficult and frustrating it can be to get on a first date with someone using an online dating app, and we learned about some specific pain points and needs that dating app users have.
Landing on the Solution
Problem Statement: “How might we increase the match to date ratio for dating app users so that they can go on more first dates?”
Explanation of the Solution
Our team decided to take a different approach and pretend that we’re actually a team within one of the major dating app companies. We were really curious about how we could solve this problem within an existing app ecosystem that is used by billions of people around the world across several different dating apps.
Based on our early research, we knew that we had to somehow gather more information from dating app users. But the problem is that no one wants to add more information to their profile. Both bios and prompts are already frustrating to fill out.
Eventually we landed on the idea of adding a fun personality quiz format to a generic swipe-based dating app. The hook here is that personality quizzes are fun and engaging. But the purpose behind this quiz is to gather important information from users that can then be shared with matches.
Here is the Vibe Check flow:
- The dating app user answers 10 questions to discover their unique dater type.
a. The first 5 questions help matches gage romantic compatibility.
b. The last 5 questions are fun conversation starters.
c. The quiz generates one of the following four dater types:
i. Serious
ii. Casual
iii. “Go with the flow”
iv. “Working on myself”
- After getting a dater type result, users can select which questions they want to add to their profile. Matches can then see this Vibe Check result section. This is where the name of this feature comes from! Your match performs a vibe check on you to see if you two might be a good match.
- New matches are prompted to answer one of the user’s conversation starter questions. This helps spark a new conversation between the match which is an essential ingredient for getting a first date.
Low-Fidelity Design Mockups
Initial Quiz Design
High-Fidelity Design
Usability Testing
We tested both our online mock quiz and high-fidelity design prototype with around 10-15 users. Overall, we learned that this quiz format is very engaging and all of our participants were either likely or very likely to use this feature within their favourite dating app. The following insights really helped us iterate on the Vibe Check flow and make it better:
- The quiz format was fun and engaging for most users
- The results page flow could be more clear
- The result description was too short
- The "View Vibe Check Results" button was confusing to most participants.
- All participants saw some value in adding their Vibe Check results to their profile AND seeing their match's results.
- The "opener" question match screen was regarded as fun and was preferred over a static chat page that displayed how compatible a match is to the user.
- Every user is a bit different. Some want more questions, some want less.
- The overall flow of the prototype was intuitive to most users, minus the Figma-related prototype issues.
Implementation Details
Technical Implementation
Vibe Check is a single page application built with React. We used React Router to handle client-side routing, React Context to handle state management, and Sass as our CSS preprocessor. It is deployed and hosted on Netlify.
Given that Vibe Check is a new feature that is designed to be integrated into any popular swipe-based dating app, we wanted to build a prototype that would be easily accessible without the need to download a native mobile application. This consideration heavily influenced our decision to build a web-based application.
Challenges
The biggest challenge when developing this app was the short timeframe, which often meant sacrificing features or writing code that was “quick and dirty” in order to ship an MVP on time.
Working across a vast time zone difference meant that there wasn’t a lot of time for synchronous work. Ensuring that both developers have a shared understanding and matching expectations for how to leverage GitHub for collaboration was extremely important.
Scalability
Since Vibe Check was built as a demo prototype, many changes to the app’s architecture and implementation would have to be made to make it a full-scale usable application.
Some considerations to make if the app became more complex might be:
- A state management library such as Redux
- A database to store user data
- Authentication to allow for separate user accounts
Key Takeaways
- In the future, taking the time to plan out component structure before beginning to code will lead to a more organized codebase that is easier to work with and clearer to understand.
- Establish your Git and GitHub workflow with your team.
- Sometimes you just have to write code that works and be satisfied with improving it later.
Future Steps
Vibe Check was never meant to be a standalone application. It is a targeted solution that addresses an important problem within the dating app space. For this reason (and given how busy our team member schedules are) we will not continue working on this project. However, we had a wonderful experience working together on this and learned a lot about our individual disciplines and how to build a product as a team.
Learnings
Product Manager Learnings:
Alexei Tipenko
- The importance of good research and deeply understanding the problem space.
- Effective communication is crucial in a team environment.
- Product managers have to adapt quickly and face trade-offs to successfully deliver a product or feature
Designer Learnings:
Gift Onwunyirigbo
- "Together Everyone Achieves More" (TEAM)
- Usability testing is very effective method for discovering usability flaws and improving a product or feature overall.
Designer Learnings:
Jo Sturdivant
- Adapting to an Established Team: Joining the team in week 6 of 8 was challenging, as I had to quickly adapt to existing workflows, dynamics, and goals. This mirrors real-world situations where you often integrate into teams mid-project, and flexibility is essential.
- Work-Blocking for Efficiency: With only two weeks to complete the project, I learned the importance of a structured work-blocking system. This approach allowed me to manage my time effectively and meet deadlines under pressure.
- Making Data-Driven Design Decisions: Unlike my past projects, I had to rely on research conducted by others. This was a valuable experience in using pre-existing data to guide design decisions, helping me focus on the core insights without starting from scratch.
Developer Learnings:
Allison Villa
- Keeping an organized codebase is important, as it is both easier to work with and clearer to understand.
- Keep your code DRY (Don’t Repeat Yourself) and your components flexible.
- The importance of understanding your users.
Developer Learnings:
Vanady Beard
&
As the back-end developer, I learned how important it is to create efficient and reliable systems that support the entire application. This experience also taught me the importance of optimising the database and ensuring the backend is scalable and easy to maintain.
Developer Learnings:
Stephen Asiedu
&
As a back-end developer, I've come to understand the importance of being familiar with various database systems and modules. This knowledge enables me to build diverse applications and maintain versatility in my work. I've also learned that the responsibility for making the right choices rests on my shoulders, guided by my best judgement.
Developer Learnings:
Dayo Ayoola
&
- Information gathering is as important as the solution itself.
- Creating a code structure or guide is extremely helpful.
- The importance of time management and prioritization.
Developer Learnings:
Maurquise Williams
&
- Process of Creating an MVP: Developing a Minimum Viable Product (MVP) taught me how to focus on delivering core functionalities balancing between essential features and avoiding scope creep.
- Collaboration in a Real-World Tech Setting: This experience taught me how to collaborate efficiently in a fast-paced tech environment, keeping the team aligned and productive, even while working remotely across time zones.
- Sharpening Critical Thinking and Problem-Solving Skills: This experience honed my ability to think critically and solve problems efficiently. By tackling challenges and finding quick solutions, I sharpened my decision-making and troubleshooting skills in a dynamic, real-world setting.
Developer Learnings:
Jeremiah Williams
&
All in all this experience was very awesome I learned that in coding with others being transparent is key
Developers Learnings:
Justin Farley
&
I learned how important communication is when working with a team. Communication provides understanding, advice, ideas, and much more. While working with the product team, I’ve found that communication keeps everything flowing smoothly. Working with a team also showed me that every member brings something different to the table and we all have to work together in order to align and meet our end goal.