2020 — UI/UX Design
A mobile app to meet and date people
Dating online has become something natural over the years. Millions of people are using the internet to find their soulmate.
But today, the dating application market turned to be very crowded and starts to saturate. However, demand is still there, it is even increasing. Users having a particular appetite for new ways of dating.
It’s in this context that my client wanted a high-fidelity prototype for an investor presentation.
So the goal was to analyze what’s working or not in the dating applications currently available, in order to centralize all the functionalities appreciated by the users in one mobile app.
For this project, I had a transversal role as UI and UX Designer. The research part was focused on market analysis.
02 Design Process
Analyzing the market of dating application allowed me to highlight six essential points and How Might We(HMW) questions:
I chose to use the Crazy-8 techniques for the Ideation part. This helped me to stimulate my creativity avoiding mental blocks.
This brainstorming session led us to 16 ideas 🤯. In order to carry out the project, we had to make a selection among these, by using a value/complexity matrix. Here are the selected ones:
I love the sketching part of the process. Not for my drawing skills…, but because it’s the moment when the application starts to take shape.
During the user studies, I wanted to test the onboarding flow and the matching flow.
These sessions make me change one major thing: the background color of the onboarding flow. Initially blue, the feedback indicated that blue associated with pink, the main accent color of the app, was too gendered. That’s why I opted for a purple-blue color.
Another big change, done thanks to users’ feedback, was the icon symbolizing the match/play screen in the bottom bar menu. It was initially a heart icon, then a stylized star icon, but both of them weren’t totally representative of this screen. The playing-card icon was finally the option with the best results among users.
03 Final solution
I was very inspired by what Twitch have done with the UI of their app, especially for the text inputs, that I found clear and clean. Badoo was the second main source of inspiration. I really liked the white spaces used in the application, leaving a good place for purple to express itself as an accent color.
For the font, Work Sans allowed me to give a little artistic touch to the app, with its beautiful weight and type-writer inspired characters, while staying optimized for screens.
I can also mention the central place of photos in the application, with big ones for profiles and the swipe flow. Or the rounded and soft corners of the components, to offer a fun and playful interface.
I wanted these screens to be quickly accessible in a bottom navigation bar.
It allows keeping a roundness feeling, making you want to manipulate it, play with it.
The onboarding screens allowed me more fantasy, as it’s not a type of screen that appears too often, and as it has to be easily differentiated from the standard screens of the app. The style is totally different here, we have a colored background and only black elements. I was in a more artistic approach to UI.
In a dating app, there are plenty of elements to categorize, such as the characteristics of each profile (what people like or hate, what they’re looking for, etc.). That’s why I wanted to pay particular attention to the style of my tags. They took the shape of rounded rectangles, varying from pink to gray, or with black contours. I wanted them to be fun and easy to select.
Annnd here it is! The final Figma prototype, following different iterations, thanks to the feedback loops:
One of the main takeaways that I learned with this project was the importance to analyze what main UI layout components are used in a specific market. Tinder has “revolutionized” the dating app environment with its swiping card approach, and it’s now difficult to not consider it.
This project was also a good opportunity for me to improve my grid system knowledge. I worked with an 8px grid, combined with a 4 columns grid. This helped me to manage my sizes and spaces by using numbers multiple of 8.
Finally, I took advantage of this project to try Figma’s new variants feature. It was time-saving, especially for inputs and buttons.