End-to-End Mobile App Design for Two to Date with Ease
Role
UX Research
Tools
Figma
Duration
6 Weeks
UI Design
Prototyping + Testing
Background
Twodate is an app that connects people in a relationship together and helps create and plan future dates. Each person will be able fill out a questionnaire including setting (indoor/outdoor), online (long distance) vs. in-person, schedule availability, budget, and more. The app will then follow up 3-4 days in advance with an itinerary to follow. The date must be “completed” and both partners will have a chance to reflect and leave notes or photos after the date. This allows the couple a chance to fulfill their date “mission” and also gives them something to look back on.
Problem
Couples may find themselves not going on intentional dates or spending meaningful quality time together, especially if they have been dating/married for a long time or have obstacles to overcome, such as distance. It is difficult to come up with something creative or find new places to go every time. For this reason, Twodate aims to guide couples or give them an itinerary to follow taking both people’s preferences into account and also lessening the pressure of planning on both sides.
Research Goal
The main research goals were -
Understanding date planning obstacles couples may face
Identifying target users and their needs — understanding what would make the app fun, reliable, and usable long-term
Exploring relationship/date trends — how often do couples go on dates currently, what are their favorite/least favorite things to do, what are some obstacles when planning
Competitive analysis — comparing and understanding strengths/weaknesses of similar apps or services, as well as recognizing opportunities where Twodate can differentiate themselves and stand out against competitors
Learning about these four goals helped me focus on the main objectives and target audience for Twodate. I wanted to create an app that encouraged users to return and was easy to use so that it could be used over a long period of time regardless of age or location.
Competitive Analysis
User Interviews + Personas
Using the information gathered from my research and interviews with potential users, I created the two personas below. I analyzed the data and interviews to check for any recurring themes or patterns and discovered the following:
Most people defined “date” as including a dinner + activity that takes place outside the home
Things that most affected the frequency of dates include distance, getting comfortable, length of relationship (those in longer relationships went on planned dates less frequently)
Most common factors affecting date quality include location, price, weather, and coordinating schedules
Social media most frequently used to help plan dates include TikTok, Instagram, Yelp
Many do not enjoy the planning process but are forced to take charge and plan because their partner is less involved in the planning process/doesn’t volunteer to plan
Problem Statements
I’d like to explore ways to make people return to the app to plan more future dates.
How might we add features that encourage users to keep using Twodate over and over again?
I’d like to explore ways for the app to be intuitive for couples of all age groups and backgrounds.
How might we create a familiar UI and create easy, frustration-free task flows for various users?
I’d like to explore ways for the app to be used by couples in different situations -- long-term vs. short term, long distance vs. iliving together, etc.
How might we cater to all the different types of couples using the app? What questions should be included in the questionnaire?
Information Architecture
The sitemap for Twodate focused on the app’s main features, which are planning dates, uploading entries following the date, and viewing past dates. While some of the competing apps diverted to other categories such as couples’ games, I decided to keep the focus more niche and centered around planning and reflecting. This sitemap allows the user to use the app for the past, present, and future.
Past — using the “Calendar” page to reminisce and remember past dates
Present — seeing the countdown which creates a feeling of excitement/anticipation
Future — filling out the questionnaire to create future plans, giving the user something to look forward to
User + Task Flows
As the date’s main focus is connecting with their partner and filling out a questionnaire to plan future dates together, it is imperative that the feature allows the two partners to link through the app and share screens, creating a feeling of “togetherness.” Standard flows include logging in/signing up, while some standout flows include the “upload” feature after going on a date, and using the questionnaire to have their next date itinerary created.
Flow #1: Signing Up
Allows the user to choose between logging in and creating an account
Phone number verification process + partner connecting through text message code
Flow #2: Planning Next Date
User goes into the “Plan” page
Questions are answered through check boxes + slider buttons
Allows user to link to phone calendar to add date when itinerary is ready
Flow #3: Uploading Date Recap/Photos
Can be done two ways — post-date (immediately), uploading whenever (via “Calendar” page)
Lo-Fi Wireframes
The lo-fi wireframes focused on creating the most important features and components. I had a clear vision from the beginning of what the home page, calendar page, and questionnaire would include, as well as the color palette. Since the features and goal of the app are rather simple, the main concern was making sure none of the pages looked too bare or boring. Additionally, I also wanted to make the personal for each couple through profile pictures and nicknames so I added these to the home page.
Moodboard + Component Library
Mid-Fidelity Wireframes
Most of the pages stayed the same from the low to mid-fidelity wireframes. One of the biggest changes was the addition of the “Search” in the navigation bar after I came up with a way to make the app useful for spontaneous, non-planned dates as well. After creating the moodboard and testing the colors out, I also decided to stick with the brighter red over the darker red for a less “strict, serious” feel. Twodate is monotone for the most part, but the serif font and pops of red keep the romantic feel alive overall. The UX focuses on being simple and easy to follow throughout all pages of the app.
Usability Testing
User tests were conducted over the phone, where users’ screen was shared as they went through each of the five total tasks including signing up, receiving a date notification + finishing a date, uploading through the calendar page, filling out the questionnaire, and going through the account settings. Users were also given time to browse through the app, then asked questions about their experience and any feedback they may have.
Participants: Five participants in their 20’s, all currently in relationships
Task flows: Signing up, completing a date, uploading a date, filling out questionnaire, accessing profile/account settings
Success metrics: Ability to complete tasks with little to no guidance, number of user errors, user frustration, user satisfaction, overall feedback
User feedback focused on the following:
Increasing line height and spacing between lines to make text throughout the app easier to read
Making title font/subheadings more bold and visible
Bullet points on the home page cause user to feel like the itinerary is more of a chore than it is recreational
Word choice to feel more fun/casual
Being limited to a single itinerary
Prototypes & Iterations
Increased line height overall + changed heading text from Antic Didione to Playfair Display in final version to make it more readable
Popups to announce date itinerary has arrived
Changed from a bullet point style to checkboxes to make it feel more interactive/optional instead of mandatory, also added a shuffle button to allow users to have an alternative plan
Added shuffle option so user can choose between two options based on questionnaire answers
Calendar page contains icons - one for sorting (most least recent, least - most recent, A-Z, Z-A, etc.) + icon to upload date reflections directly from calendar page -- previously no sort button
Fixed carousel to allow users to scroll horizontally through photo uploads
Added more questionnaire options, including calendar so algorithm can decide when to give the couple the itinerary
Put account-related settings (i.e. deleting account, logging out, etc.) under “Settings”
Conclusion
This project allowed me to be extremely creative, working from end-to-end on a mobile app for the first time. The ideating process took longer than usual because I didn’t want to create an app that felt overused or cliché.
The researching process allowed me to realize the different types of date apps out there, and the importance of UX and UI when comparing badly made apps to good ones. Additionally, I dove in deeper to really address as many different types of “dates” and “dating” as possible, and kept an eye out for accessibility.
For future projects, I would like to be more creative with my UI. This time around, I focused more on adding prime features and having it feel romantic and modern. However, I believe the aesthetic I was aiming for could have been improved if I were able to add more graphics or animation.
Overall, the scope of the project allowed me to be the most creative I have ever been and also to be the most critical of my own work. Prior to this project, I had worked more on adding features to existing products or working for a stakeholder so I didn’t take criticism to heart. However, I realized as a designer how much a designer can get attached to their work and how hard it is to take critique objectively, and reminded myself that the feedback was so that Twodate can ultimately be made better.