Online Dating Management
TIMELINE: July 2019 (2 weeks / 80 hours)
DELIVERABLES: High-Fidelity iOS Mobile Prototype
TEAM: Self + feedback provided by my design mentor and others
ROLE: UX/UI Designer
TOOLS: Sketch App, Marvel, Pencil, Paper
Ligo is an app for soul searchers that will help users track everybody they match with across various dating apps, whom they have gone on dates with, and people they have shared chemistry with so far so they can manage the hectic-ness that comes with online dating. The name is based on the Latin root which means "to tie" or "connect". Ligo's goal is to help individuals streamline their online dating experience more effectively.
To design an app that follows Apple's iOS Human Interface guidelines
To ensure the app's features provide value and are easily discoverable/usable
To help users intuitively and efficiently manage their online dating experience in one place
This is a speculative project and LIGO is a fictional company
GOAL: Understand the current trends, competitors, and audience of the online dating space
DELIVERABLES: Market Research, Competitive Analysis, User Interviews
As someone who has dabbled in online dating for a bit, I wanted to gain a deeper understanding of how the online dating space worked and what it currently looks like. Statistics revealed that users are developing a growing reliance on an increasing number of online dating services to meet their partner(s). Surprisingly, I found that despite there being an abundance of online dating services available across various platforms, there currently aren't any direct competitors that exist to help users simplify the experience of dating online. Because of this, I knew moving forward that a challenge would be to design based entirely on the feedback from users due to the lack of current competitors.
Because there are no current direct competitors within the online dating management space, I chose to focus on analyzing indirect competitors, specifically focusing on major players instead to get an idea of what similar and different approaches are being utilized by online dating services to differentiate themselves within the crowded space and validate my hypotheses. My main takeaway from the research was that there are a plethora of major players in the space that combine both copying of similar features from fellow competitors in addition to having a unique feature that differentiates the service. Therefore, Ligo must help users to aggregate and organize all their matches and the various details from each across multiple apps.
After learning more about the online dating space through market research and analyzing indirect competitors, I chose to conduct 5 user interviews to gain an understanding of what users' motivations, frustrations, behaviors, and experiences were when it comes to using online services for dating. Afterward, I was able to develop a stronger understanding of the role online dating apps play in people's lives and what the target audience of Ligo would look like.
Number of participants: 5
Gender: 2 males / 3 females
Age range: 22 - Early 30's
GOAL: Identify the target audience and their needs
DELIVERABLES: Empathy Map, Persona, POV Statements + HMW Questions
Taking the findings acquired from my primary research, I developed an empathy map to help organize the various points into categories to help solidify what the user's needs were based on specific insights. The map revealed that users often forgot details about the conversations and dates they had with matches and were frustrated by the inconvenience that comes with having to move through multiple dating apps.
Users struggle with jumping between app chat functions and texting to converse
Users juggle scheduling dates with matches across multiple apps
Users often forget details about their matches
To aggregate conversations in an organized way
To efficiently schedule dates
To easily access organized information about their matches
Taking the synthesized insights gathered from my interviews and empathy map, I crafted a persona named Amira Patel. Amira represents the millennial target audience of Ligo who values being efficient with her time and utilizing technology to help her organize and manage the complex dating process. Through personifying the interview findings and providing additional context, we can ensure that all design decisions are made with the target user in mind. An important note to remember is that Amira represents a subset of online dating service users and that the team chose to move forward with focusing on this group due to time constraints, and wanting to impact the largest user group based on our initial research findings.
POV STATEMENTS + HMW QUESTIONS
After defining and contextualizing Amira, I shifted over to focus on further solidifying the problems that our designs would aim to solve for our target audience. Using information extracted from our empathy map, I created POV statements and "How Might We" questions to define the direction for ideating potential solutions.
GOAL: Brainstorm ideas for app information organization, flows, and features
DELIVERABLES: Product Roadmap, Sitemap, Task Flow, User Flow
Using the "How Might We" questions created, I brainstormed a variety of ideas for each specific question to identify potential solutions for how we could solve Amira's needs. To help narrow down which features would be included in the app, our criteria focused on considering resourcing availability, practicality, and level of impact on users. The roadmap helped tremendously in identifying several key features that would assist Amira and her needs, to best focus the team's resources.
To help better visualize the general information architecture and location of the key features + screens, I developed an app map. One of the challenges here was identifying the best way to organize the features given that there aren't any existing direct competitors to source established design patterns from. To get around this, I focused on looking at how current online dating apps are designed and empathized with Amira to identify what might be the most intuitive approach.
After getting a better visual understanding of how the app's flow might look, I referenced common scenarios from my user research to map out three user flows. Looking at the sequential user steps within each scenario helped inform intuitive relationships for how the various screens and features would be connected.
Next, I further explored the flow by taking a closer look at the individual steps and decisions a user would take when using the app to learn more about their matches and schedule dates. This helped me uncover the sequential interactions/decision process of a user navigating the app and their thoughts along the way.
GOAL: Create mid-fidelity designs of the iOS mobile app
DELIVERABLES: Sketches, Style Tile, Mid-Fidelity iOS Mobile Wireframes
Using pencil and paper, I started to sketch out potential ideas for the basic layout and architecture of the app's screens and key features. I made sure to reference iOS design guidelines and patterns to ensure leveraging users familiarity with elements to craft an intuitive experience. The low fidelity sketches allowed me to present my ideas to others and obtain early feedback during the design process.
MID-FIDELITY iOS MOBILE WIREFRAMES
The sketches allowed me to gain valuable feedback from my mentor and peers on the general flow and UI design of the app. As I was digitizing my sketches, I made sure to reference Apple's iOS Human Interface guidelines and other common design patterns on Mobbin, as well as consider all provided feedback. Several of the mid-fidelity screens and main UI changes made from the sketches can be seen below.
GOAL: Prototype the designs and obtain usability feedback through testing
DELIVERABLES: Interactive mid-fidelity iOS Mobile Prototype, Usability Testing
Prior to moving into designing higher fidelity wireframes, I first wanted to confirm the usability of my current designs. I developed an interactive iOS mobile prototype on Marvel using the mid-fidelity wireframes to conduct effective usability testing with participants. To play around with the prototype please click below:
Test to see if users can accomplish given tasks successfully
Identify areas of difficulty and opportunities for improvement from mid-fidelity wireframes
Evaluate the usability of the screens and features designed thus far
Sign up and create an account
Locate your match's profile and rate your chemistry with them
Navigate to your message thread with a match and respond to their message
Create a new date event with your match
Find the details about the date prior to the start
Review how the date went
Using the interactive mid-fidelity prototype, I conducted usability testing with 5 participants at a local coffee shop and was able to make observations and take notes on their behaviors and interactions. The tests provided valuable usability feedback on what would need to be iterated and further refined for clarity.
GOAL: Iterate on the mid-fidelity designs based on usability feedback
DELIVERABLES: Affinity Map, Branding, High-Fidelity iOS Mobile Wireframes + Prototype, UI Kit
I crafted an affinity map which helped me synthesize my usability test findings, identify patterns, and organize the feedback in a way that was easier to extract design recommendations from. Since all participants completed all tasks successfully, I focused on further iterating upon the functionality of the features and refining the clarity of how certain aspects of the app worked based on their feedback. To view the complete affinity map in its entirety please click here:
Users weren't clear on the app chat to text transition within the app’s messaging feature
Users were confused about where tapping on the pre-date push notif would take them in the app
Users were unclear about how the calendar event sharing would work from the matches' end
Users felt scared of the ability to select different matches when creating a new date from the chat
Users felt the calendar current date icon did not effectively signify what clicking it would do
Users didn’t understand how their ratings would be used by the app
RECOMMENDATIONS (Highest Priority ↔ Lowest)
Bold and include additional copy to the timestamp to highlight the source of a message
Change the pre-date reference push notification to deep-link directly to the date event details page instead of match profile
Include additional copy in date event creation explaining event visibility
Rename title of date creation event to specifically include match name if created from chat thread and remove the dropdown indicator
Modify the current date icon by replacing the small circle dot with the number of the current date
Include additional copy near the rating bar explaining it’s only visible to users
Before styling the revised mid-fidelity wireframes to create higher fidelity wireframes, I focused on defining the branding of Ligo to understand how to style the app in a way that would be consistent with the app's mission and goals. I ultimately decided to design a logo that represents multiple match profiles connected by a single pivot point forming the shape of an "L" for Ligo. I opted to go with a friendly teal and orange combination that was subtle and would not detract away from the main content of the matches.
HIGH-FIDELITY WIREFRAMES + PROTOTYPE
Finally, after referencing the comments and design recommendations revealed from the affinity map I made corresponding changes and applied styling to the mid-fidelity wireframes. Several of the main changes to the mid-fidelity wireframes can be seen below. To play with the high-fidelity prototype of the Ligo app, please click below:
As I was finalizing the high-fidelity wireframes and prototype, I developed a UI kit to organize the various UI elements and patterns used throughout as a reference guide for future use.
For this project, I found the most challenging aspect was working on a first-time product that would be entering a space with no direct competitors. Given that, I learned that an even larger amount of emphasis would be placed on the research phase to gather enough information to create a solid foundation for the product and address the target user's needs successfully. Another challenge I found while working on Ligo was keeping the features simple in their design and intuitive enough to avoid users from being even more stressed from the experience of managing their online dating. Overall, despite the challenges of this project, I found it invigorating to explore an unestablished territory and have creative freedom over defining the design direction of Ligo.
Extend current features even further with regards to inclusive design and how to make Ligo work for LGBT+ folks and those with unique accessibility needs
Collaborate with engineers to handoff final mockups and discuss any technical considerations
Conduct further usability testing with hi-fidelity prototype and collect usability findings
Iterate on designs based on synthesized feedback and update UI kit accordingly