Hinge In-app Feature

  Online Dating Application Design &

  Web Mobile Development 

Overview

Hinge is a dating app with brand mission focusing on the app's "designed to be deleted". It is developed to build serious relationship and connect users beyond the simple act just only matching, and use the Nobel Prize winning Gale-Shapley algorithm. However, in light of recent events, the dating scene has been quite challenging. People are prohibited or concerned from meeting up in person leaving limited options for daters seeking companionship. Thus, we built a virtual dating in-app feature to provide a platform 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" persons, and meanwhile reducing of risks of going out during quarantine and after. 

Role

UX researcher, UX designer and UI designer in a 4-member team. 

Timeframes

2 weeks

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

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 into we conducted survey among people online, from a popular thread platform which is a website can allow to post and participate variety of surveys. From our 61 respondents, we found 59% responses have used dating apps such as Tinder, Hinge, Bumble, Grindr, etc, which indicates online dating are highly acceptable nowadays in U.S. market. 69% responses 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. We wanted to add interest in features to make the experience more engaging, and found majority of users showed interest in using features such as ‘icebreaker questions’ and ‘filters’ as well as filters while video chatting. 

Do you or have you used dating apps such as Tinder, Hinge, Bumble, Grindr, etc?

Would you be willing to video chat with a match during / after the Shelter in Place protocol?

In what ways do you connect with your
matches before meeting in person? 

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.   

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

User Personas

Based on our findings,  we created two personas Nelly Scott and Jordy Landson. we divided our primary users into two groups with experiencing different kinds of loneliness. One group is moving to a big city where without any friends, and the other group is living in isolation like during COVID-19.   

Storyboard

We follow the storyboard that created by me for Nelly and Jordy about how they meet each other. Nelly just moved to LA for her job, but she is looking to meet people, while Jordy has a steady job in San Clemente and wishes to settle down very soon. Both of them are seeking to have a potential partner and the opportunity starts at the time when Hinge dating app launched a new video chat feature. 

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 are Tinder and Bumble.  Tinder has ability to see and meet lots of people, but it doesn't have enough emotional connection as well as security protection. Bumble facilitates communication between interest users with location-based feature. It gives female initiatives to make the first contact only, however, it will generate additional expensive costs for advanced features and subscription.  The current leaders in video calling industry where Zoom and Facebook Messenger are our indirect competitors, which have their own Pros and Cons. For Zoom, we use it for virtual meeting and class, people like it that is easy to use to join a video conference, but it is for business and study purposes.  We wanted to keep the simplicity from zoom to create more of entertainment options into hinge app. Facebook, an all-in one communication app with chat, audio and video, but FB Messenger is an independent app not directly from facebook app.  

 

Take all of these feedbacks, we wanted to our app to have 

  • Free feature to users 

  • Focus on making the conversations lively and interactive between matches 

  • Simple and reliable 

Information Architecture

After 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. This shows the structure built down to the features like filters, games, and backgrounds. 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. The 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

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

Paper Sketch

Low Fi wireframes

Mi Fi prototype 

Design System

The mood board gives users a sense of feeling of loyalty, peace, and calming. Based on research, purple can make having intimate conversations a lot easier. 

 

We decided to maintain the overall branding of Hinge. Dark and light purple, and peach pink are Hinge’s primary colors. Thus, in UI style tilewe used the same color palette, and selected typefaces as similar as possible. Small changes were made for accessibility to font sizes. 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.

Usability testing and iteration

We conducted two rounds of usability test with clickable low-fi and mid-fi prototypes to users. For each user, we recorded the screen movement and their face expression during test in order to recall all the original data from testing if needed. With users's feedback and comments, we implemented the changes, integrated into Hi-Fi prototype, and made design improvement. The major changes from low-fi usability test was on 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 flexibility to be dragged to anywhere on the screen and also can be expanded into a card.  

Lo-Fi Prototype user test comments

Design A

Design B

We designed different versions of Video Date interface based on Design B and chose the one gained the most votes among the team.

Final Decision

Hi-Fi Prototype user test comments

Wireframes Evolution & Hi-Fi Prototype

According to several rounds of user testing, we iterated our prototype and finally it came out with the most user-centric and  best visual design among options.  

Some Examples of Hi-Fi Prototype 

Coding Web Mobile Page

Here is the responsive web mobile page we build that introduces the brand new virtual dating feature from Hinge.

Future Development & KPI’s

  • 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)

  • Length of video calls and % of calls that are extended 

  • Which features are most and least used

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