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
Mobile App: Wings
Discover
Mobile App: Wings

Results from 37 surveys. 

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. 

Mobile App: Wings

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
Mobile App: Wings

Affinity Map 

After the interviews, I created an affinity map by distilling, categorizing, and prioritizing the research findings. 

Mobile App: Wings

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.

Mobile App: Wings

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. 

Mobile App: Wings
Mobile App: Wings
Mobile App: Wings

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.

Mobile App: Wings

Sitemap

Once the key app content was organized, I continued to create a detailed sitemap to serve as the guidance to design user flow.

Mobile App: Wings

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
Mobile App: Wings

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.

Mobile App: Wings

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.

Mobile App: Wings

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:

  1. Registration and verification
  2. Send out an invite to the user
  3. 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.

Mobile App: Wings
Mobile App: 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. 

Mobile App: Wings
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.

Mobile App: Wings
Mobile App: Wings

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. 

  1. Match with a user: Search for a user who likes hiking and match with him. And send him a message on chat.
  2. 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.
  3. 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?
  4. 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
Mobile App: Wings
Mobile App: Wings

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
Mobile App: Wings
Final Prototypes
Key Features
Mobile App: Wings

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. 

Mobile App: Wings

Feature 02 Hobby Browsing

You can get to know each people who like the same activities as you. And starting adventures together!

Mobile App: Wings

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. 

Mobile App: Wings

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.