top of page
hinge mock up1 transparent bg.png

Hinge In-app Feature

 Online Dating Mobile Application Design

Overview

Hinge is a dating app with a brand mission focusing on the fact that the app is "designed to be deleted". It was developed to build serious relationships and connect users beyond the simple act of matching. Hinge also uses the Nobel Prize winning Gale-Shapley algorithm. However, in light of recent events, the dating scene has been quite challenging. People are prohibited from or encouraged to avoid meeting up in person, leaving limited options for daters seeking companionship. Thus, we built a virtual dating in-app feature to provide a platform so that users can chat over video before meeting up in person. This interactive design is aimed for helping users to find the potential matches without spending too much time on "wrong" people, and meanwhile reducing the risks of going out during quarantine and after. 

Method & Tool

Method: User Research, Competitive Analysis, Persona, Storyboard, Site Map,  Wireframing, Hi-Fi Prototyping, User testing 

​Tool: Figma, Illustrator, Photoshop, Google Suite, HTML, CSS

​

​

Role

UI/UX designer in a 4-member team. 
Mainly focus on storyboard, UI, interaction design, hi-fi prototyping & illustrations.

Timeframes

One month project.

User Research

User Research

Research & Findings

Prior to collecting data, we did a preliminary research on dating apps and found some interesting data points. According to Forbes, online dating is a $6 billion global sales industry that contains 40 million current Americans daters. Compared to virtual dating, in-person dating is expensive, with average night out costing $102, much higher than virtual dating.

With the recent shelter-in-place lifestyle, Bumble, an online dating app competitor, saw a 93% spike in the use of it's video chat function during March this year, meanwhile, another survey found that 70% of Hinge members would be happy to use a phone or video call at this moment. According to global research agency Opinionmatters, more than 40% of men lied about their jobs in order to sound more successful and impactful. 

In order to gather further insight, we conducted survey among people online from a popular thread platform.  

The graph above shows that in our survey 59% of people said that they have used dating apps such as Tinder, Hinge, Bumble, Grindr, etc

In our survey 59% of people said that they have used dating apps such as Tinder, Hinge, Bumble, Grindr, etc.

The graphs shows that 69% of people would be willing to video chat with a match even after Shelter in Place is over, so two third of them tend to use video chat for online dating.

69% of people would be willing to video chat with a match even after Shelter in Place is over, so two third of them tend to use video chat for online dating.

The graph shows that majority of people showed interest in using features such as ‘icebreaker questions and games’ and ‘filters’.

The majority of people showed interest in using features such as ‘icebreaker questions and games’ and ‘filters’ .

User Analysis

User Analysis

Define Problems & User Needs

Here comes the problem statement:

​

In a world where physical distance is momentarily required, the dating scene must evolve. How might we create a fun, interactive and safe feature within the Hinge app to promote virtual dating as we continue to connect with potential partners?

​

We developed the affinity diagram and highlighted the major findings from the survey, and showcased the most impact and feasible on the features prioritization.   

This is the affinity diagram that we made.

This is the affinity diagram that we made.

This is the feature prioritization that we made.

This is the feature prioritization that we made.

Our team were zoom meeting to discuss about feature prioritization and happy about the outcomes. 

Our team had zoom meetings to discuss the feature prioritization map and we were happy about the outcomes. 

User Personas

We created two personas; Nelly Scott is a female interior designer, who enjoys meeting new friends and going on dates, and Jordy Landson, a male structural engineer who is looking for a relationship.

​

We created two personas with Nelly Scott and Jordy Landson.
We created two personas with Nelly Scott and Jordy Landson.

We created two personas with Nelly Scott and Jordy Landson.

Storyboard

Followed by user personas, we created the story line for them.

​

This is the storyboard that created by me for Nelly and Jordy about how they meet each other.

This is the storyboard we created (I illustrated and created the scenario with input from my group), which details a Hinge use scenario where Nelly and Jordy meet for a date using the app.

UX Competitive Analysis

For our competitors, we analyzed two different categories: One type is other dating apps, the other type is video calling app.

For our direct competitors, online dating apps, they chose Tinder and Bumble.  We chose current leaders in video calling, Zoom and Facebook Messenger, as our indirect competitors. 

After our analysis, we decided that our app should: 

  • Provide free feature to users 

  • Focus on making the conversations lively and interactive between matches 

  • Feel simple and reliable 

The above image shows that there are some shortages for these competitors: Tinder doesn't have enough emotional connection as well as security protection. Zoom are only used for business and study purposes. FB Messenger is an independent app not directly from facebook app.

The above image shows that there are some shortages for these competitors:

  • Tinder doesn't have enough emotional connection as well as security protection.

  • Zoom is only used for business and study purposes.

  • Facebook Messenger is an independent app not directly from facebook app.

Wireframe

Wireframe

Information Architecture

After we finalized our decisions, we organized the information architecture.  Our site map is focused on the tiers within the ‘Matches’ tab and builds down to the in-video features, and we left the rest of the original architecture unchanged. For the user flow, we designed two flows: onboarding for the new virtual dating feature and the actions taken during a video call. The onboarding takes the user through a simple onboarding process explaining the features.

This above image shows the site map structure built down to the features like filters, games, and backgrounds.

This above image shows the site map structure built down to the features like filters, games, and backgrounds.

This above user flow moves through a set of users connecting over a video, using the icebreaker questions, applying a filter, and extending the call with more time. 

This above user flow moves through a set of users connecting over a video, using the icebreaker questions, applying a filter, and extending the call with more time. 

Paper Wireframes, Lo-Fi to Mi-Fi Prototype

This is the paper sketch we created.

We started to develop paper wireframes living at inside of chat interface. With team brainstorming, the ideas were transferred into Lo-Fi digital Prototype.

​

​

This is the paper sketch we created. 

This is the Low fi Wireframes we developed.

This is the Low fi wireframes we developed.

Here is the video of our Mi Fi Prototype. 

desktop.png

Design System

In the style tile, we created a ‘logo’ for the video date function, and a floating bubble to expand the in-video features. We were inspired by other apps' use of text overlay, card pop ups, and filter applications.

In the style tile, we created a ‘logo’ for the video date function, and a floating bubble to expand the in-video features. We were inspired by other apps' use of text overlay, card pop ups, and filter applications.

Evaluation

Testing

Usability testing and iteration

We conducted two rounds of usability tests with clickable low-fi and mid-fi prototypes to users. For each user, we recorded the screen movement and their face expression during the test in order to recall all the original data if needed. With users's feedback and comments, we implemented the changes, integrated into Hi-Fi prototype, and made design improvement. 

Above is the Lo-Fi Prototype user test comments.

Above is the Lo-Fi Prototype user test comments.

The major changes from low-fi usability test involved the activity section where users had difficulty choosing the game that they wanted: In order to start a game, they had to slide up the Bar carefully to avoid accidentally pressing "Hang Up" button, as these two are too close to each other. We solved this problem by creating floating bubble, which has the flexibility to be dragged to anywhere on the screen and also can be expanded into a card.  

Here is the Design A we made. 

Here is the Design A we made. 

Here is the Design B we made.

Here is the Design B we made.

We picked Design B and developed different versions based on it and chose the one gained the most votes among the team.

We picked Design B and developed different versions based on it and chose the one gained the most votes among the team.

This is our iterated game section interface design.

This is our iterated game section interface design.

The above are the Hi-Fi Prototype user test comments.

The above are the Hi-Fi Prototype user test comments.

Prototype

Prototype

Wireframes Evolution & Hi-Fi Prototype

After several rounds of user testing, we iterated our prototypes and finally they came out with the most user-centric and  best visual design.  

​

This above is the wireframes with different design stages.

This above is the wireframes with different design stages.

Here are some examples of Hi-Fi wireframes. 

Here are some examples of Hi-Fi wireframes. 

The is the video we made for Hi Fi Prototypes.

Future Development & KPI’s

Hinger male.png

​​

  • Increase security protection in order to create a safe user experience, especially for people who may receive abuse on video chatting feature

​

  • Additional build-in features to enhance the interactivity of the video experience (VR, Trivia, etc) ​

​

  • Syncing with other apps (sending Uber Eats to your match)​

​

  • Tutorial on angles, lighting, and video tips​

​

  • Video security (facial recognition)​

​

  • Continuous design (desktop version)   

Picture1.png

  • Tracking the % of users stopped using the product after they meet their matches

​

  • Measure the length of video calls and % of calls that are extended ​

​

  • Check which features the are most and least used​

​

  • Measure the ratio of video calls that result in a physical date vs. first dates prior to video feature​

bottom of page