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.
More Projects...