Hinge

Role: UX Researcher, UX Designer, UI Designer

Hinge is a dating app positioning itself to be a “dating app designed to be deleted”. While Hinge is an application about finding a relationship, one feature that is missing is the actual process of setting up a date. While details can normally be worked out via text messages, it can lead to miscommunication between users, or users having to leave the app in order to research date spots or things to do. The purpose of this project is to create a “set up a date” feature for Hinge and integrate it seamlessly into the current design.

The challenge? Creating a feature from scratch that fits seamlessly into an existing brand and design.

Research: Discovery

What do I need to know?

In order to understand what were driving decisions people were making on dating apps, and how I could design this tool effectively, I needed to do some research in order to understand what people's experiences had been on the apps and what information they would need when asking people out on dates. In order to do this, I conducted three forms of research: competitive analysis, a survey and finally one on one interviews.

Once my research was complete, I took a look at the most important insights I gathered and organized them into 4 categories: Goals, Pains, Needs and Gains.

Research: Strategy

Who would use this?

Now I had an idea about what people cared about and what was driving some of their decision making when online dating. But that was on a more general level right? While those were some key takeaways, several different personalities emerged during my research which had even more specific interests, desires and motivations. In order to design a more informed application, I turned that research into 4 personas.

Planning: Organization

How would I organize this?

Now that I had an understanding of what content I needed to include and what features people would be looking for, it was time to start organizing the structure of the application. This meant that I needed to start exploring how I would integrate the feature within Hinge's existing architecture, and also think about how people would want to move through my added pages.  After doing some pen and paper mock user flows, I ended up coming up with the below Site Map for Hinge.

Planning: User flows

How would somebody use this?

Before jumping into the wireframes, I thought it was important to envision how a user might move through this feature. I wanted to put myself into the shoes of one of my personas and imagine how they would navigate these screens. This would help inform both my prototype, but also answer design questions such as what buttons needed to be available on pages, what kind of content etc. Therefore, I put together the below user flows.

Larger User Flows

Design: Low Fidelity Wireframes

What will it look like?

With the organization thought through, it was time to start making decisions on what the feature would look like. I had to think about how the content would be organized on the page, what pieces would flow, and finally, how to best to showcase the key pieces of information that people were wanting to see. I put together low fidelity wireframes in order to give myself the basic structure of how I wanted the "Set up a Date" feature to be displayed.

See All Low Fidelity Wireframes

Design: Usability Testing

Does it work?

Once the wireframes were completed, it was important to test the usability of the design. I wanted to test these wireframes, without the distractions of the branding, so that I could understand where people would navigate to find information, and how easy the site was to find what they were looking for.

Full Usability Testing Round 1

Design: UI Kit

Incorporating Hinge's Brand

After shoring up some of the design from the results of the usability testing, it was time to incorporate Hinge's brand into the design. The results of this, were the below UI Kit.

Design: High Fidelity Wireframes

Putting it all together

With the UI kit together, it was time to build the high fidelity designs that would marry the organization and design of the low fidelity wireframes with the branding and elements found in the UI kit. Please note that while I will be discussing the second round of usability testing the below screens represent the final versions of the design.

Set up a Date

In order to set up a date with another user, you would go to the "Set up a Date" tab in the Dates page. From there you would have to choose from eligible matches, a date, time, and location (all with the ability to add multiple options for your date to pick from). You also have the ability to send them multiple plans if one of your suggestions is date specific.

Edit a Date

Some feedback I got during research was that people would want the feature to allow for them to submit edits to a date that was proposed to them. Therefore, I created the "edit" function for any date that you have been invited on.

Edit a Date

Some feedback I got during research was that people would want the feature to allow for them to submit edits to a date that was proposed to them. Therefore, I created the "edit" function for any date that you have been invited on.

Accept a Date

People also wanted the ability to send people multiple options for a date (or on the flip side, be offered multiple options). In this way, the feature hopes to eliminate the back and forth that can happen when trying to make plans. The user selects their preferred options, or can even suggest new options (or an entirely new date).

Safety

Feedback from research indicated that people wouldn't want people who they hadn't talked to to be able to send them dates, and a general fear for online dating is safety. Therefore, in order to have matches become eligible (i.e. you can send them dates), both parties have to enable the "Set up a Date" feature.

Safety

Feedback from research indicated that people wouldn't want people who they hadn't talked to to be able to send them dates, and a general fear for online dating is safety. Therefore, in order to have matches become eligible (i.e. you can send them dates), both parties have to enable the "Set up a Date" feature.

Design: Usability Testing Round 2

Iterations

It was now time to run another round of usability testing. I wanted to keep improving my designs and make sure that the feature was as intuitive as possible. Therefore, I adjusted my prototype and ran the same usability test as before, with minor changes to the tasks presented.Based on the results from the usability testing, I again had some key changes to make. Again, if you would like to see the full list, please click the button at the bottom.

Full Usability Testing Round 2

Prototype

See it in Action!

I ran a second round of usability testing, and flushed out the high fidelity wireframes. After that it was time to revisit the prototype. Now while the prototype below is somewhat limited, in that not all pages are built out, and several sets of animations are not available for some items (i.e. ideally nav bar would have a clickable and hover state) - I was able to make changes to the overall ease of use of the prototype - take a look!

Prototye

Reflection

What did I learn?

Learnings
This was my first experience with adding a feature to an existing brand. It was a fun challenge to understand how to incorporate my ideas within a set of style guidelines. It taught me how to think outside of the box when I was trying to come up with solutions to conflicting CTA colors, or how to stay true to brand when helping a user select a location.

Next Steps
If I were to continue this project, I would want to build out more aspects of this feature. How would it impact user profiles? Could they set up dating preferences that users could use when sending them a date? How about what happens if people don't show up for their dates? I have a lot of ideas that I would like to expand upon.