MOOD Dating App
Timeframe: November 2022 - December 2022
Platform: Mobile
Role: Product Designer in a startup accelerator team
Impact: Founder selected our prototype as their main branch for future development
​
Swipe left on swipe culture and discover others who
share your mood
Problem
MOOD is a dating app startup that's in a very early stage of development. MOOD they have a rough wireframe of how the app might flow and be laid out, but expressed that they lacked the visual skills to bring it to a high-fidelity prototype stage. The founder of MOOD had done his own user research and found potential in a dating app where users could have a swipeless experience, through a grid view layout for matches that had the same mood, as well as having icebreaker games to initiate conversation.
Solution
Me and a team of 4 other UX interns, utilized the info and wireframe files we had access to, in order to conduct research and provide the client with some structure to how we as a team were going to approach creating high fidelity designs for them. We created a multiphase approach to the project, by utilizing a phase 1 to conduct secondary research, competitive analysis, create a user flow and mood board. This would lead us into a phase 2, where we were able to better align with the client on our approach and keep the focus on creating a design kit, high fidelity wireframes and a prototype that they could use as they moved further into development.
My Role
It was my responsibility to layout the user flow for the red route during phase 1. In phase 2 my focus was on the mood selection feature of the app and how it could be designed to incorporate a plethora of moods, icons, info. I created core elements for the UI's design, such as type layout, colors, buttons, etc that would be chosen to be used for the final deliverables. Additionally, I did my best to utilize my graphics and motion design experience to give constructive feedback on all creative efforts as well as helping lead calls with the client during phase 2 of the project. This was to ensure we were creating a prototype that felt unified in design and branding, as well as making sure the client felt informed and positive with the process.
PHASE 1
User Flow
User flow for finding a match on MOOD. Click to zoom in.
Our focus was to create a prototype of a user flow that could serve as a template.
With the limited time and availability we had for the project with MOOD, our focus was to create high fidelity screens and a prototype that could serve as a template to help them flesh out the rest of the app in both branding, visual design and function. When creating the user flow for the red route, I wanted to create a flow that would be largely translatable no matter what the user chose as their mood(s) within the app, while also incorporating possible areas that the app could upsell the user to upgrade to a paid tier.
Secondary Research
Through secondary research, our team found that a large majority of a dating apps success came from match rates for users. Additionally, we found that one of the biggest frustrations for users, especially among women, was receiving unsolicited photos from other users. We took these findings to suggest to the MOOD team to implement a blocking feature in all tiers and to be aware of the number of moods that they were trying to include, as it could split the user base too much.
Competitive Analysis
We evaluated other lesser known dating apps that had features similar to what MOOD was aiming for. By doing so, we were able to see what these competitors were doing right and wrong, so that we can try to avoid the same mistakes, while gaining some general inspiration. The apps we looked at were: Scruff, Clover, Feeld and Tinder.
Scruff largely seemed to excel in its function and have a happy user base. It also offered a grid view for discovering matches that seemed to be a large positive for its users.
​
Clover had an icebreaker style game similar to MOOD’s that are a core feature of how users will initiate conversation with other MOOD users. Clover’s users seemed to rate the icebreaker positively, but it also left us lacking some insight to how it affected communication overall, as normal messaging was locked behind paid tiers that pushed users away from the app.
Feeld allowed users to see people who had matching interests which was a positive, but it did have negative reviews for a small user base and not having some basic quality of life features such as seeing past matches.
​
Tinder we looked towards to get an idea of how they upsell users their premium tiers within the app and found that they kept details concise and would only list out a select few features.
Mood Board
In phase 1 we had some team members create a mood board to serve as inspiration across 3 different categories of look, elements and features. This was largely to get a pulse on direction from the founder of MOOD, but ultimately the founder seemed a bit overwhelmed and unsure of how to provide feedback on what he liked from it. After all, he did express a lack of visual skills in bringing the wireframes he had to a higher fidelity state. This would lead us to an initial round of design in phase 2 with a bit of a different approach.
PHASE 2
High Fidelity
While we lacked some direction from the founder for design, we as a team took this as an opportunity to design the individual screens we were responsible for in our own interpretation of the MOOD brand we had at that point.
When we presented the first round of screens with the founder and informed him of our approach, he reacted very positively to the idea. He was excited to see his app come to life in multiple different styles. This made it much easier for him to be inspired and give constructive feedback when the designs were for an app of his own.
He loved the layout for the mood select screen and the idea of having specific gradients depending on the type of mood a user was looking for and how it could be translated across the app. With this, the style of the mood select screen became a template for how much of the rest of the app would look as we worked on unifying the design going into the last week.
Design Kit & Prototype
During the final week we unified the look of everyone's screens and tidied up any errors. We created a design kit for the app that encompassed the basic colors/gradients, button styles, font weights, etc. that the MOOD team could reference, should they continue or build off of what he created.
Zoomed out view of the MOOD prototype.
The prototype and final meeting was a success, with the founder and lead developer being very pleased with the end result, as we took them through the entirety of the sign up process, mood selection, match finder, profile page, messages and sending an icebreaker.
Outcomes & Next Steps
The MOOD team ultimately decided to move forward with our prototype for further development! It was great news to receive and did validate the scope of work we kept the project to.
If I were moving forward with the project, I would suggest usability testing of the prototype, surveys to determine which mood options are the most popular and should be in the first version of the app and what premium tier offers would resonate with users the most, along with what features should be available to all tiers. Lastly, I would build out more of the prototype to ensure a solid deliverable that could be used to secure funding for the app.