Online Dating Management

Project Details

CLIENT: Ligo

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

Background

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.

Goals

  • 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

Process

01. Empathize

GOALUnderstand the current trends, competitors, and audience of the online dating space
DELIVERABLESMarket Research, Competitive Analysis, User Interviews

 

MARKET RESEARCH 

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.

COMPETITIVE ANALYSIS

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.

USER INTERVIEWS

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

02. Define

GOAL: Identify the target audience and their needs
DELIVERABLES
: Empathy Map, Persona, POV Statements + HMW Questions

EMPATHY MAP
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.

​INSIGHTS

  • 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

​NEEDS

  • To aggregate conversations in an organized way

  • To efficiently schedule dates

  • To easily access organized information about their matches

PERSONA

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.

03. Ideate

GOAL: Brainstorm ideas for app information organization, flows, and features
DELIVERABLES
: Product Roadmap, Sitemap, Task Flow, User Flow

PRODUCT ROADMAP

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.

APP MAP

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. 

USER FLOW

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. 

TASK FLOW

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.

04. Design

GOALCreate mid-fidelity designs of the iOS mobile app
DELIVERABLES
Sketches, Style Tile, Mid-Fidelity iOS Mobile Wireframes

 

SKETCHES
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.

05. Prototype

GOAL: Prototype the designs and obtain usability feedback through testing
DELIVERABLES
: Interactive mid-fidelity iOS Mobile Prototype, Usability Testing

MID-FIDELITY PROTOTYPE
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:

USABILITY TESTING
Objectives:

  • 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


Tasks:

  • 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 


Results:
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.

06. Iterate

GOAL: Iterate on the mid-fidelity designs based on usability feedback
DELIVERABLES
: Affinity Map, Branding, High-Fidelity iOS Mobile Wireframes + Prototype, UI Kit

AFFINITY MAP
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:

​INSIGHTS
 

  • 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

BRANDING

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:

 

UI KIT

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

Reflection

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. 


Next Steps
 

  • 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

© ALVIN KUANG 2019