FindMySpice
UI/UX Design
Overview
I took on a 1-week design challenge to build and innovate a dating app.
My Contributions
Handled the entire challenge alone from research to ideation, visualization and, prototyping.
Tools used: Adobe Xd, Adobe Illustrator
Timeline: 1 week
Challenge
"Create an innovative dating app that can stand out from its big competition"
User Research
Before creating some designs, I wanted to understand the end-users. Specifically, I wanted to know the user's goal when engaging in a dating app.
User Goals:
Finding a serious or casual relationship
Practice dating skills (building confidence)
With the goals identified, I wanted to see the user's journey map onto what scenario they could be using the app and how they would interact with it.
Journey Map:
Feeling lonely and wants a relationship
Launches dating app
Fills in their profile details with pictures
Fills in their interests and hobbies
Starts looking for a potential partner
Gets a match (could take hours, days, weeks, or even months)
Both users can now chat with each other
Exchange contact details via chat
Goes on a date
After date:
a. If satisfied, the users delete the app
b. If not satisfied, the users are back in the market
Competitor Research
The online dating industry exists for a long time now and has created many competitors with many unique features. But learning from the competition can be useful and be better than their biggest problems. Also, to take inspiration from their successful features.
-ve
I focused my research around Bumble, CoffeeMeetsBagel, and Tinder as they are among the most famous apps with 1+ Million downloads. According to my secondary research from the Google App Store's reviews, many people complain about:
The membership/premium account offers exclusive offers and puts free users at a disadvantage and less likely to get matches (discrimination)
Even with the premium accounts, users are not guaranteed to match
Too many fake/dummy profiles
Cannot delete their profile permanently
Too many features that can get frustrating
+ve
However, on the plus side, I learned about some important features that needed to be included that satisfied users:
Intuitive design (User-friendly and nice interface)
Innovative features/mechanics
Simple UI to understand user's profile quickly
Inspiration
In addition, when I searched for dating apps I discovered the Dine dating app (image below) which gave me the inspiration to use cuisine categories as a matching algorithm.
How does Dine Dating App works?
No swiping, but choose which restaurant from their profile
Shows actual restaurant names on profiles
Has to get the same restaurant pick right to get matched (1/3 chances)
Ideate/Design and Iterate
Rough Sketches
While browsing some online dating apps, I created some rough sketches to ideate a potential solution.
At this point, I started shaping my idea and did a couple of user tests with a paper prototype and lo-fi wireframes to validate the main functions of the app.
Wireframes (Low Fidelity UI)
The lo-fi wireframe helped a lot to start forming my ideas and started to settle onto a specific design concept.
App features:
Cuisine category as matching algorithm (3 options)
Swipe right or left (easy gesture)
Chat after a successful match
Why the restaurant theme?
Dating apps are only meant to help make the first move. Meaning initiating the first date then moving to social media and deleting the dating app.
Logo Design
Before finalizing the visual design and style guide, I wanted to create a logo to help me identify the colour theme and app atmosphere it should portray.
At first, I settled with 'FoodUp' (similar to link up or hook up) but then realized that the name was more of a restaurant app than a dating app. Then thinking out loud, from Salt&Pepper, I slowly came up with 'FindMySpice'.
Improved app features:
Cuisine Categories (3 options)
Chat after a successful match
Personal interests (5 options)
Cuisine Categories and personal interest for matching algorithm
Right swipe can choose the level of hotness (3 levels)
On the chat screen, both parties will see each other's hotness level
When I got the idea to swipe the level of hotness feature, I immediately changed the logo from the chefs' hats with chilli icons. The final logo can be seen below:
Style Guide
Now that the name and logo have been finalized. Chilli is usually referred to as the colour red and decided to stick with that colour for the theme.
User Flow Diagram (UX Flow)
Before creating the visual design of the app, I made a UX flow to guide me through the user's pattern and anticipate how they will interact with the app. I started my diagram from the moment the user opens the app (Start Circle) and span it out through different branches.
Visual Design
High Fidelity UI
The image below shows the overall map of the prototype
Main Screens
Prototype
SplashScreen.mp4Splash Screen
a
Discover.mp4Discover screen (swiping mechanic)