Hook

A Mobile App Design Case Study

Hook. Line. Sinker.

Overview

Our team developed a dating application, Hook, with a primary focus on promoting the safety and well-being of women, members of the LGBTQ+ community, and individuals of all races and beliefs. With Hook, users can prioritize their safety through the implementation of various features, including ID verification, escape mode, and content consent mode.

While the common phrase suggests that there are plenty of fish in the sea, we firmly believe that individuals deserve to avoid potential predators and negative experiences. Our application was meticulously designed from the ground up, utilizing extensive research and feedback from vulnerable users, to provide a secure and protected environment for users to discover meaningful connections.

Problem: Users turn to dating apps to find love but anonymity and lack of accountability make them unsafe. Apps prioritize user count over safety, leaving users vulnerable and objectified.

Solution: To provide a secure dating environment, especially for vulnerable users, we offer: ID verification, content consent mode, and an escape feature.

UX/UI Designer

My Role

Figma, Miro, InVision, FigJam, Google Slides, Google Docs, Bootstrap, GitHub and Visual Studio Code

Tools

Christine Shumay, Kimberlyn Donnelly, Sara Slick, Suvra Majumder & Myself

Team

Methodology:
Our primary objective was to address the following inquiries:
1. Who is the target audience?
2. What are their main pain points?

To address this project, we employed the subsequent methodology:

User Research

Definition & Ideation

Prototyping

Testing & Iteration

User Research

To conduct our research, we utilized a combination of user interviews, user surveys, and competitor analysis.

User Interviews

To enhance the user experience of our dating app, it is crucial to understand our target audience's decision-making process in selecting a dating app. With this objective in mind, we conducted interviews with five individuals, focusing on the following inquiries: How do previous online dating experiences impact their decision-making process? How do safety features of an app affect their decision-making process? What are their primary considerations when choosing a dating app?

Below are our research findings:

Survey

To supplement our user interviews, we administered an initial survey. We created a questionnaire and distributed it to our target demographic through social media. Our goal was to understand the the hardshops that arise in online and mobile dating when it comes to safety and security in regards to tracking their activity. 48 people respond to our survey and these are our key findings:

Survey - Key Findings

81 Responses

Persona

In order to gain a better understanding of our users' requirements, we developed a persona, which enabled us to identify and address the common pain points experienced by our users.

Definition & Ideation

Next, we transitioned into the ideation phase, during which we utilized strategic and creative methods to devise various redesign concepts.

Storyboard

To empathize with our user Cara better we created a storyboard. The storyboard helped us to define her user journey and getting to know her better.

Prioritization Matrix

The Feature Prioritization Matrix proved to be a useful tool in organizing features that would offer the greatest value to both the user and the stakeholder.

Our Focus: High Impact/Low Complexity

1. Content Consent Mode

Forcing users to consent to send and receive photos with a certain user

2. Escape Mode

Users are able to connect their smartwatch to Hook account, allowing an escape call with a long press to the icon.

3. ID Verification

Users must upload a valid photo ID.

Competitor Analysis

The competitor analysis helped us to identify our competitors and evaluate their products to determine: Strengths, Weaknesses, Opportunities & Threats. We examined 3 direct and 1 indirect competitors. (Direct: Hinge, Bumble and Tinder. Indirect: Speed Dating.

The competitor analysis helped us to: evaluate the major competitors, examine our product standing, and consider innovations to stand out.

Prototyping

After reviewing the outcomes of the ideation and definition process, we established a list of prioritized features. To begin this process, we crafted a user flow:

Low Fidelity Sketches

Keeping our users and their pain points in mind, we started the prototyping process by sketching on paper. We then performed preliminary user testing by importing the sketches into Figma and created hot spots.

Mid-Fidelity Wireframes

Following the completion of the sketches, we utilized Figma to produce mid-fidelity wireframes. To ensure that the design was user-friendly, intuitive, and effective, we conducted multiple usability tests.
Here is a user flow that presents recommendations to review:

Testing & Iterating

We performed one-on-one usability testing online for our mid-fi prototype, to get valuable feedback on our design. This pointed out areas of opportunities for improvement, some pain points and confirmed some of our decision choices. We assigned 3 tasks for our users to complete:

1. Create a profile

Success Rate: 95%

2. Reset Password

Success Rate: 95%

3. Choose a watch face

Success Rate: 90%

Iterations

Provides drop down options for the user to choose from fro a better user experience.

Added the option for users to connect for various reasons.

A/B TESTING

According to the results of the A/B test we conducted, with the webpage button color options and the button featuring the purple background emerged as the clear winner, as 98% of the users tested preferred it.

2% preferred the red splash-screen

98% preferred the red splash-screen

Hi-Fidelity Prototype

Once we had analyzed the results of the usability tests on our mid-fi wireframes and made the necessary iterations based on the findings, we proceeded to the next stage in our design process, which involved creating high fidelity prototypes.

UI Style Tile

Front-End Development - Bootstrap

Once our hi-fi prototype was completed, we proceeded to the project's development stage. Our first step involved setting up a shared GitHub repository and exploring various bootstrap components. By utilizing Bootstrap, we were able to quickly design, build, and tailor our website's responsiveness to our needs.

To customize the HTML, CSS, and Javascript codes for Hook's website, we used Visual Studio Code.

Final Product - High Fidelity

High Fidelity Prototype in Action

Next Steps & Reflections

Goals: We couldn’t stop our thoughts away from imagining what this app could become, and the people it could protect. Our main goals are as follows:

Background check: a way to ensure users feel safe
AI recognition: used for content consent mode in order to automatically warn a user, instead of the user accepting photos themse
lf and risking exposure.
Games/prompts for an ice breaker: we’d like to expand our messaging so that there are many options for our users to connect, one
way would be playing a mobile game together
Double dates: our goal is to allow a safe space for genuine relationships to be forged, and we don’t want to stop with just you and your partner, we want to be a space where any form of connection could be made, including you and your partner finding other couple friends

Reflections: We wish that we didn’t live in a world where our app would be needed, a world where the minorities we’re representing felt safe in the dating sphere. We unfortunately learned a lot about the dangerous sides of dating, even exploring what other governments are doing in order to protect those who choose to interact online. We came together as a team to represent the little guyand built something we’re very proud of. This project brought us together, all the while allowing us to practice and hone our design skills.