Results from 37 surveys.
Sophia Huang
Sr. UX/UI Designer
About this project
Mission/Vision
Wings is the dating app that makes you actually go out to date and meet someone real! This is the future state project.
Challenge:
Online dating is a trendy way to meet new friends while you are in a small social circle.
This app is designed for 25 to 35 years old female/male who is looking for more serious relationships. They are willing to try online dating but worry about fake identities and their safety to meet strangers in person.
I’d like to explore how to make this experience more fun and safe experience to get to know each other with peace of mind and reduce the possible concerns for meeting someone new.
My role:
UX and UI Designer
Product strategy
User research & Analysis
Persona creation
MVP definition
Wireframes
UI Design & Prototyping
Brand development/ Style Guide
Usability Testing
Timeline:
Two Sprint
Tools:
Adobe XD, Adobe Photoshop, Adobe Illustrator
45
Iterations
47
Screens
20
Usability tests
50
cups of coffee
My Process
Discover
Surveys
I started the project by setting up a survey to collect feedback. I wanted to gather feedback from dating app users.
Findings
- Almost all women mentioned safety concerns for the first date.
- 78.4% of the user is looking for a serious relationship.
- 60% of user hope there's a customized filter for a hobby.
- 70% of the user think is hard to figure out the right time and locations for the first date.
- 80% of the user worry about the fake profiles.
Interviews
At the discovery phase of my project, I conducted user interviews in order to get a better understanding of the problem and their pain points.
I Interviewed five users. Two of them in person and three of them online.
Findings
Most women worry about the safety of the first date and men are concern about getting catfished.
70% of people will search the other user on social media.
And 60% mentioned hope there's a customized filter or the ability to meet someone with common interests than just swiping photos for more serious relationships.
Define
Affinity Map
After the interviews, I created an affinity map by distilling, categorizing, and prioritizing the research findings.
Empathy map
Before creating personas, I made the empathy maps to visualize the user's attitudes and behaviors. What they say, think, do, and feel could vary, and it was critical to identify those differences.
Persona
I've created two personas. The pain points of the female are more focused on safety concerns and fake profiles. The male ones are focus on the fake profile and higher chance to initiate the conversation and send the invitation.
Ideation
Creating User Journeys is a great way to help define key features and error prevention for applications. Along with User stories we are able to knead out possible problems based on their needs and desires.
User's Journey
I created the user's journey when they get invited and send an invite to other users. And highlighted the parts in blue when they feel upset and anxious. These could be a chance for me to figure out how to improve their experiences.
MVP & User Stories
I regularly check back with the user research and user personas to develop sets of user stories based on the features that users may want to see while using the app. The MVP was defined as the following:
- fake profile checker
- Safety alerts
- Hobby/ interests based filter/ browsing
The HMW statement
After I have identified the user's frustrations, needs, and wants, I came with How Might We questions, the key issues that I must answer when designing a product.
- How might we increase the sense of safety for the first date?
- How might we reduce the fake profiles?
- How might we make users customize the filters based on their needs?
- How might we increase the chance to match people with more common interests?
- How might we make the schedule of the first meet up easier?
- How might we make the conversation easier, to begin with?
INFORMATION ARCHITECTURE
With our research done we are able to gather all the information and organize the key features into the sitemap and make the user flows like the ones below. We want to make sure there are no dead ends for the user when using the app.
Sitemap
Once the key app content was organized, I continued to create a detailed sitemap to serve as the guidance to design user flow.
User Flow
User flow 1: Registration
scenario 1: first time user wants to register.
scenario 2: user wants to go straight to browse by the login.
Note: Users are given the option to login/ register using a social media account. They will be redirected to the social media page for authentication.
User flow 2: Get an invitation from another user
scenario 1: existing matches with another user and chat with them for a while and decide to send an invite with optional safety alerts set.
scenario 2: existing matches with another user and chat with them for a while and decide to send an invite without optional safety alerts.
Note: Set alert and place recommendations are optional. Users can always skip it.
User flow 3: User sends an invitation to another user
scenario 1: existing user goes to the invite page and sends the new invite and selects the place and availability before sending out the invitation. The system will match both user's availability and send back the results. And the user set the alerts for the date.
scenario 2: existing user goes to the invite page and sends the new invite and selects the place and availability before sending out the invitation. The system will match both user's availability and send back the results.
Note: Set alert and place recommendations are optional. Users can always skip it.
Prototype
Initial Sketches
Now the fun part begins. With all the supporting data presented, I started to create iterations and iterations of hand-drawn sketches before diving into wire-framing and prototyping. These hand-drawn sketches are helpful to keep me from getting too detail into the visuals.
Guerilla testing
I did a quick Guerilla testing to four users before I spend more time on the Low Fi Wireframe to do a quick check.
Findings and Possible improvements:
- Add an alert confirmation page.
- Add Location selection and explore screen for place recommendations.
- Double emphasis on all information will only be used for verification purposes.
- Explore a way that can identify the user’s identity without sharing too much privacy.
Wireframe
After applied the revisions from the Guerilla testing, I moved on to creating wireframes in Adobe XD. I usually start the design process with low fidelity wireframes. This is the way I iterate through many design options quickly.
To save time and maximize productivity. I used wireframe UI kits to develop low-fidelity wireframes rapidly. This allowed me to create tons of clean wireframes in just minutes and get ready for user testing.
Prototyping
I use Adobe XD to create prototypes. It allows me to create interactive prototypes in seconds. Once the prototypes were deployed, I sent the links to the user to get a feel of the actual app for quick user testing.
Introduction
I have 3 people to try the prototype on my phone in person. Participants are 30 years old female, 28 years old female, and 35 years old male. I separate a few scenarios for users to test:
- Registration and verification
- Send out an invite to the user
- Accept an invitation from another user
Findings
- People are not sure what to do after taking a photo on the photo verification page.
- Recommendations might need to have multi options so we can cross-match preferences.
- Premium Verification is new and probably needs to double emphasize on privacy protection.
- The user doesn’t know availability is a cross match and needs to find a way to explain that be set up. Maybe a pop-up tutorial notes.
Possible improvements:
- Missing the CTA button on the photo verification page. Like, retake or proceed options.
- Maybe add a Comparison chart for premium and free verification. Feature and pricing for details.
- Add an alert confirmation page. And maybe add some context of when to use which ones.
- Pop up a tutorial for some “new” features like an invitation and set an alert.
- Emphasis on the rating is only for an experience not for users and won’t be shared in any way. To make users feel free to rate the experience without concerns.
Design
Moodboard
I initial the style ideas from the mood board to gather the ideas for the Wings.
Brand platform
And I worked on the brand platform to develop the mission and key objectives for the Wings.
Product Name
Wings
Rationale: I chose this name because I wanted it to convey the concepts that this app is like a guardian angel that protects you during your process of finding your loved ones.
Mission/Vision
The dating app that makes you actually go out to date and meet someone real.
Brand Attributes
Exciting, reliable, trustworthy, effortless, playful
Style Guide
After organizing the thoughts from the brand platform, I made the brand style guide to ensures that these standards are consistent and uniform across platforms, including websites, mobile apps, and marketing collateral.
There are some new features and verification processes so I use blue as the main color schedule to convey the trustworthy platform that I aim to build and also hope the style can make users feel playful and easy to use.
Validation
High Fidelity Mockups
I made the high fidelity mockup based on the style guide and brand platform. And the Wings is getting ready for final testings.
Hifi Usability Testing: First round
During the first round of usability testing with 4 participants, my main focus was to identify obvious usability issues with the prototype and hear the things my test participants wanted to share. The tasks given to the participants were the following.
- Match with a user: Search for a user who likes hiking and match with him. And send him a message on chat.
- Find the perfect place for your date: You’ve been chatting with Ben for a while and decided to send him an invite. Pick the place called sushi place and send him an invite for a date.
- Set a safety alert for the date: You got an invite from Ben. Now set an alert to inform your family or friends of where you are going and when to send the message. How do you feel about this feature?
- Register and verify identity: Register and choose premium verification and browse the users. Any questions during the process?
As expected, many usability issues were identified after the first round of usability testing.
Iteration 01
Hifi Usability testing - Second round
After I have identified the problems and possible solutions, I redesigned the prototype. Then again, I recruited five more people for the second round of usability testing to see if I have fixed the problems effectively.
I noticed that many of the problems in the previous design were improved but new usability problems have emerged. One of them was a critical one - the users can't seem to find the alert on the menu. One user pointed out maybe should call it Safety Alert instead to make it less confusing when exploring the menu.
Iteration 02
Final Prototypes
Key Features
Feature 01 Verification
Let us take care of the catfisher. Wings want to build a trustworthy community for all our users. We will make sure all our users' photos are real.
You will get a 50% higher chance to match with others with our verification badges.
Feature 02 Hobby Browsing
You can get to know each people who like the same activities as you. And starting adventures together!
Feature 03 Invite
You can now send the invitations to other users without feeling awkward or don't know how to decide where to go.
The local recommendations will help you to explore the local events and hidden gems.
And schedule dates without the back and forth message. Save hours.
Feature 04 Safety Alerts
We put your safety to our top priority!
Before the date, you can now set a Safety Alert for your friends or family to check in with you if they don't hear back from you by the set time. Or they can reach out to the Wings Support team for further assistance.
Final prototype
Don't hesitate to leave me the feedback after testing this prototype. I'm still looking forward to more interactions.
Things I've learned
I've learned so much about UX research and design by doing this project. After the two months of intense coursework, I feel like I grew so much as a designer. However, I still think there's room for improvement in my research and design. Looking back at the project, there are things I might have approached differently.
Research is a must: – I couldn’t have designed a product users love without the help of the people who will actually use it. The user survey revealed unexpected information and made it possible to adapt the product to users’ needs.
Personas are powerful: – Being aware of users’ needs and pain points helped me to create a seamless, end-to-end experience.
The user is always right: – Conducting user testing and evaluating users' feedback at various stages helped me to discover and eliminate pain points at the early stages.
The use of a user-centered design process gave me the ability to discover the motives, emotions, and needs of the target audience. The research helped me understand that users want to have a common ground to explore and share fashion opinions while having the ability to shop with convenience.
Thank you very much for your attention and time.