Venus
We help you find your best matches, and we help you plan your dates.
Project Overview
During our visit to the art museum, we drew inspiration from a particular
piece and translated that concept into a mobile dating app idea, using the
artwork as a springboard to address a real-world problem.
From start to finish, I provided features ideas to the app, and created the
design system in the Figma; in addition to prototyping process, I helped creating
interactions and flows for the app, and fixing the usability issues after our
usability testing.
- 1. Storyboards and story mapping 2. Low-fi & Mid-fi prototype 3. Making a design system 4. First iteration of hi-fi prototype 5. Usability testing and feedback 6. Iteration and final prototype 7. Future plans and my learnings
My Role:
Dating through the app is a problem...
Modern dating apps are just a numbers game. Users tend to stuck in this loop hole to think that they will keep getting better matches if they keep using it, and meanwhile lose the interest in connecting with your current matches.
Inspired by the art, conceptualized by the team
We picked French painter Pierre Nicolas Huilliot's Still Life with Silver and Gold Vessels, Fruit, and Flowers located in the Blanton Museum of Art. The bust of Venus, the Goddess of Love, overlooks decadent fruits, flowers, and gold. Cupid, her son and the God of Desire, stands beside her with his bow and arrow. This iconic Roman mythological duo, known for fulfilling prophecies, is often depicted together. Venus, the decisive leader of love, commands Cupid to carry out her orders. We wanted to create a dating app that acts just like Venus, to help users find their love, with the assistance of Cupid.
UX Prototyping Process
1. Storyboards and story mapping
Drawing a simple storyboard to show our idea never hurts. I did a quick sketch here as you can see, that I want the app/Cupid to act as a match maker for two people, and they hand-pick (figuratively) their matches, and then they can plan their dates through the app.
We also collected data and created a affinity diagram after we
interviewed some potential users, asking them what they like or
disliked about the current dating apps. Following to that, we made
a story map to show the activities and the tasks that users would
want from the app, as shown here in the screenshot.
2. Low-fi & Mid-fi prototype
To make sure our app is concious about the people you want to match
with, I created a low-fi flow to show how you can view your matches
that was picked by Cupid, and the options you could choose with your
matches. My team created other flows of the app too, including an
onboarding flow, a edit profile flow, a check porgress flow and a
game flow.
Here are some of the highlights of our screens:
- Match Screen
- I want to make sure the user will spend enough time on someone's profile, so instead of the swiping mechanism, I would like them to go into their profile and to highlight the option to talk to them.
- I also would like to provide them a screen to tell us why they would want to unmatch with the person, given some of the common options as well as a open-ended part.
- Progress Sceen
- We would like to show the user how they are doing with their current matches, and also some of the trends of what kind of people they like.
Check the rest of our screens as well:
Lo-fi and mid-fi screens
3. Making a design system
3.1 Colors and font
We want to avoid using the agressive and passionate colors like
red and pink to sugges users that love is just a moment of rush,
and we also would want to distinguish the app from the
competitors, so we went for a ice blue as our primary color, Storm
as our action/secondary color to show actions. Thsese colors
provide a calm sense of feeling, and also a sense of trust.
Since our app is called Venus, and we are inspired by the greek myth,
we would like to keep the display and logo font elegant and classic
just like Playwright US Trad; to keep our app trendy and modern, our
body font is Poppins, which is minimal and readable on the small screen.
3.2 Components and the design system
A good design system is essential for a consistent and efficient design, and it is undoubtedly one of my favorite part of the design process. I created a design system for the app, including 18+ components for the app, and each individual components has a strict radius and spacings to make the whole app look uniformed. And to keep the color consistent, one of my team member created an abundance of color variables for the components, including different states of the components, which further helped us unify the whole app design for the hi-fi prototype.
4. First iteration of hi-fi prototype
Continuing from the design system, we created a hi-fi prototype
including microanimations and interactions.
- Onboarding Screen
- Here user would be able to pick fill up their profile information and learn about the mechanism of the app. (However, there is some potential issues that we will talk about later.)
- Match Screen
- Like how it is shown in the low-fi prototype, I want to make sure that the users are heard, so we give them the options to pick a reason why they would like to unmatch with the person.
- Chat Screen/Icebreaker Screen
- In addition to the chat screen, we also created a icebreaker game that allows user to select a match and to play an icebreaker game with them, and to figure out their interests and personalities better.
- Home/Progress Screen
- Here is the home screen, where user can see their current progress with their matches and how they are doing within the app.
I also believe that the microanimations are the crucial to make the app look more lively and smooth, so here are some of the microanimations that I made with my teammates:
5. Usability testing and feedback
We have to make sure that our app is not being developed in a small dark room and is some crazy delusional product by a group of designers, so we need to take it to the real world and let the users to experience it.
Due to our time constraint, we created a moderator script, consisting 7 simple tasks that will test drive our basic functionality of the app. And each one of us tested 2 participants, with age ranged from 22-34, mixed gender and sexuality, face-to-face. After each session, we took notes and post evaluation form and upload them into a feedback board, and we had a great discussion about what our app is doing well and what we didn't do well. (after the screenshot)
Most liked feature ✅ - Icebreaker:
Participants responded positively to the icebreaker feature, noting
that it helped ease the tension of first interactions:
- “This is a fun way to interact from the beginning.”
- “I do like the idea of this because it does make me feel more comfortable — and will help spark conversation.”
Least liked feature 🙅♂️ - Milestones:
The milestones feature received the most confusion and criticism, with
users questioning its purpose:
- “Milestones were my least favorite part — don't really understand the point, maybe make them better/more useful info.”
- “Don't see the point of milestones if the app is meant to make meaningful connections.”
Main points of confusion 😵💫 - Onboarding & Unmatching:
Remember when I said the issues with onboarding? Well, some users found
really painful to be reading the tutorials at the beginning, and some
of them also had issues when trying to unmatch a user:
- “Tutorial was confusing and hard to follow, there was too
much text/info right off the bat.”
- “Difficult to unmatch — would expect the unmatch button to be
in the chat.”
We also uncovered more issues in details, but due to the length, I am not going to list each one of them out here, here is a link to all the issues that we uncovered, and they are split into major, moderate, and minor issues, as well as those feedback that are not considered as a usability issue:
Usability testing issues
6. Iteration and final prototype
After classifying the issues, I fixed the major issues and some other suggestions based on the summary my teammate collected from the feedback. These issues are cruicial to the usability of the app, and due to our time constraint, we have to prioritize on the important ones to fix. Here are some of the major issues that I fixed:
6.1 Feature: Onboarding
Issue: Participants experienced information overload
with the onboarding process with the multiple tooltips on a single
screen and too many pages with instructions. They could not process
all of the information for later use throughout the app.
Fix: Instead of presenting all of the tutorial screens
upfront during onboarding, instructions now appear as pop-ups the first
time a user lands on a new page. The screen dims and a focused instruction
overlay appears, reducing the information overload effect on users
and make sure the instructions are easier to follow as they navigate
throught the app.
6.2 Feature: Milestones and Cupid's Recommendation
Issue: The milestones feature was confusing to participants,
as they didn’t understand the difference between milestones and match
trends. The milestones also has a progress bar that wasn't really convey
any useful information, and users were confused about what they meant.
Fix: By reording the milestones and removing the progress
bar, I delegated the milestone's function, and added a new feature
called Cupid's dating ideas that will have Cupid to suggest dating
ideas including locations and availability based on the conversations
with users and the matches.
6.3 Feature: Matches Trends
Issue: Participants wished that the matches trends
are more relatable with the previous matches they have, and the layout
of the page could be more interesting.
Fix: I combined the previous Cupid's notes with the
matches trends, and adding matches profiles next to the now-called
"my match pattern" , so that users will have an easier callback to
who matches those trends.
6.4 Feature: Matches' Profile
Issue: On the Chat page, participants did not know
they clicked on the match, Tom, because there was no user feedback
that they did. And they also would have the opportunity to unmatche
someone after they are chatting.
Fix: I added the functionality to show the match's
profile after they matched, so that when user click on their profile
pictture, it will take them to their detailed profile page. Additionally,
you can unmatch the match from the profile page (shown on the second
GIF) after you have had an conversation with that person.
6.5 Feature: Icebreaker
Issue: The icebreaker game did have names attached
to the images of different matches, so participants were confused without
knowing which image belonged to which match. Some users were unsure
of the effects of the icebreaker, and if the results would automatically
be sent to their match or if they still had to message afterwards.
Fix: I updated each profile's card to align more
closely with the appearance of the profile card on the “Today's
match” screen. Additionally, I added their names next to the profile
picture. Even though no one has requested, I redesigned the icebreaker
questionnaire section to make it more visually distinct, helping users
visually distinguish the icebreaker game from the chat screen. Below
is the comparison of the original and new icebreaker page.
And here is a short GIF to show you the transition between the pages:
After this round of iteration, I finalized the hi-fi prototype and the flows for our product by adding the conditional logic and all sorts of microanimations. Here is the final prototype, and hope you will give it a spin! (Either the link or the embedded version below)
Final prototype
7. Future plans and my learnings
7.1 Future plans
- 1. Conduct more usability testings, wider range of participants, more comprehensive.
- 2. Making Cupid more integrated to the app, providing shortcut to making reservations and block out your calendar.
- 3. Cupid to suggest safety tips, and help you recognize unhealthy conversations or signs.
- 4. Open to other design changes, and content changes.
7.2 My learnings
- 1. Collaborating with teammates is challenging but rewarding.
Collaborating with my team from various background can be challenging, sometimes we will have a hard time understanding each other because of the different level of experience, but the reward can be great. My team and I made this project work was not only because of the different area of expertise we provide, but also the effective communication and the clear individual responsibility we carry through out the porject. - 2. Be open-minded with opinions.
Sometimes as designers, we think that we know better than the other people, but it is clear and proven that other people's opinion matters as much as ourselves. During the brainstorm session, I advocated for a dark green color as our primary tone, that my teammates disagreed, and it turns out they were right, people like the ice color better. - 3. With limited resources, learn to prioritize the cruicial
ones.
Just like any business ideas and projects, due to the time constraint, we couldn't complete every vision we had when we started planning the project. I believe it's crucial that we learn to prioritize the crucial features and functionalities of an app and continuously learn from feedback and mistakes, gradually iterating to create a better product over time. This approach will allow us to gradually improve our skills as designers, and ultimately help us build a product that users will love.
I hope you had fun reading this, thank you very much for going through my project with me!