Master's of UX Design Thesis Project
Designing a Social (Re)Connection App: UX Case Study
After a year and a half of studying UX Design at the Maryland Institute College of Art, I designed Date Night, an app for social (re)connection through shared interests and activities from singing your heart out in the car to getting takeout and curling up under a blanket for a movie.
Date Night design showcase
From Personal Frustrations to Design Pillars
In the wake of a sweeping global pandemic, the world's doors closed and silence fell on once-busy streets while we found new ways to define social connection. With the horizons of adventure shrinking and the depths of isolation growing, I found myself constantly looking for socially-distanced, digital activities to share with my partner and my closest friends. From Netflix Watch Party to Discord streaming, we fumbled through questions like "Which one of us has the Hulu subscription?!" and "How do we find something we all like watching?". When Friday nights rolled around, comparing, contrasting, and untangling schedules, time zones, watch lists, subscriptions, and streaming services created a headache that left us feeling like Charlie Day in It's Always Sunny In Philadelphia instead of Dina in Girls Trip.
Even as technology brings us limitless content, exposes us to new activities, and finds new ways to delight our taste buds, friends and couples are still left with an important question:
How do we find exciting new ways to connect with each other without falling into the same old habits, or neglecting quality time altogether?
Put another way: beyond the thrill of a new match on a dating app or a new suggestion on Netflix, how do we use technology to nurture fulfilling, long-lasting friendships and relationships?
​
This is where Date Night begins.
The Date Night App
Sing your heart out in the car while you jam to a playlist made for you and your partner in crime, or curl up under a blanket together to watch movies hand-picked for your shared passions!
DATE
NIGHT
QUALITY TIME JAMMING
OUT OR DINING IN
Date Night is an activity matchmaking app for friends and couples that compares and contrasts each person's interests to determine exciting and engaging shared experiences for date night activities.
​
How does it work?
Imagine Sydney wants to spend some quality time with her friends and nurture her social connections, but often feels frustrated sorting through tangled schedules, movie interests, and subscriptions. This weekend, Sydney wants to set up a watch party with her friend, Amber. She opens Date Night and looks through her list of movie night "matches" with Amber. Sydney picks out a movie they both have been wanting to watch and sends a date night plan over to Amber for Saturday night. Amber, while swiping left and right through potential playlist tracks, receives a date night proposal from Sydney. The movie and the date both fit Amber's schedule and interests, so she confirms the plan and eagerly awaits Saturday night!
Date Night creating a date night plan flow
Design Deep-Dive
Supporting friends and partners in finding ways to (re)connect with each other through shared
interests and activities from singing in the car to getting takeout and watching a movie.
Date Night onboarding flow
At it's core, Date Night provides an activity matchmaking service for friends and couples by comparing and contrasting each person's interests and desired date night activities. In turn, this augments user engagement with streaming services, food service apps, and related subscription boxes by providing a clear, direct pipeline to each activity. Therefore, the Date Night app supports partners in finding ways to (re)connect with each other through shared interests and experiences while creating an intuitive pathway linking users to the applications that address their date night needs, such as OpenTable or Netflix. This eliminates decision-making and schedule coordination stress.
Concept Deep-Dive
The Date Night app has 5 core features:
1. The Stack: The homepage hub - a stack of cards - that users swipe right or left on to express like and dislike
2. Connections: Adding, managing, and talking with friends and partners
3. Plan a Date: A pathway for users to plan out and send proposals for date nights that is rooted in existing mental models
4. Responding to a Proposal: A flexible, built-in reply feature that allows users to go beyond "yes" or "no" by supporting a response system that encourages users to reply with iterations on the initial proposal
5. Curated Spotify Playlist: A playlist automatically created for each connection or group chat that compares, contrasts, and reflects back shared music tastes in a unique playlist
Date Night UI showcase
The homepage card stack is the central hub for user activity. This space prioritizes exploration and leans into delightful interactions that provide exciting and engaging content. The user focuses on high-level content groupings including Movies, Music, and Food. Each card within the card stack features cover art and identifying details for the featured content. A user can either swipe right to "like" content, or swipe "left" to dislike content. Content that is "liked" by a user is saved for comparison with the corresponding interests of that user's connections. From this comparison, suggestions for date night plans are made that are directly based on content the users have "matched" on.
Date Night homepage featuring card stacks for users to swipe through
The card stack is populated by pulling movies, music, and dining options from the user's linked subscription services. For example, users that have linked their Netflix account and their Hulu account will see a movie options that are a combination of titles offered from both streaming services. A user also has the option to automatically import their existing "Watch Later" lists to ensure these are added to the user's 'Liked" content.
​
Continuing, the connections page allows a user to review their conversations and group chats with friends, partners, and loved ones. From here a user is able to start new conversations or kick off a new date night plan.
Date Night's My Connections page
When a user chooses to propose a new date night plan, they are able to sort through the content that individuals have "matched" on to find the movies, music, or food that both individuals are excited to engage with. After selecting an activity, the user picks a date and time to propose. For dine-in restaurants, this includes table reservations powered by OpenTable. Similarly, take-out options are supported by services including DoorDash and UberEats. Having chosen a restaurant to dine in, a user is also able to add a movie on to their date night plan before sending the proposal to their connection(s).
Summary view of composing a date night plan to send to a connection
When a user receives a date night proposal, they have several options for a response. They may accept the proposal as is and have it automatically added to their calendar. On the other hand, a user may also decline a proposal. Third, and most importantly, a user is able to iterate on a proposal by responding with substitutions or alterations to the plan. These changes can include adjustments to the date and/or time as well as substitutions for the proposed activity, such as swapping out one movie selection for another.
An image subtitle looks like this
The final primary feature of Date Night is the uniquely generated music playlist that is powered by Spotify. This playlist is generated in two steps. First, Date Night imports a user's existing Spotify preferences and combines this with any additional data the user provides by swiping through the music card stack. Second, for each connection, Date Night automatically compares and contrasts both individuals' music preferences and generates a unique Spotify playlist based on overlapping music tastes. This playlist includes songs and artists that both users have expressed interest in as well as new songs and artists from similar music genres.
Date Night's uniquely generated music playlists powered by Spotify
Target Audience
In order to determine the target audience for the Date Night app, research was conducted into the user audiences for dating apps like Tinder as well as the user audiences for service providers such as DoorDash, OpenTable, Netflix, and Spotify. As a result, the target audience was determined to be individuals who are confident using smartphones consistently and who are looking for new ways to connect with each other during a socially-distanced, pandemic era. More specifically, the target audience for Date Night includes couples and friends, both newly formed and long-term, between the ages of 18 and 55 years old. These individuals are streaming service subscribers, and likely frequent smartphone and mobile app users. Generally, these individuals visit local restaurants several times per month and enjoy trying out something new every now and again. The target audience also enjoys a stay-at-home date night with takeout and a movie. These users generally make use of restaurant reservation and food delivery apps, including but not limited to OpenTable, DoorDash, and UberEats.
Project Timeline
The Date Night project serves as my Master's thesis and is the culmination of a year and a half of studying design, user experience, and human-computer interaction at the Maryland Institute College of Art. Altogether, the project timeline extended over a period of 10 weeks and included the following development beats:
Formal Project Proposal: Project Timeline
Understanding The User Friction & Business Value
What is the user friction Date Night tackles?
This project kicked off with an exploration into the behavioral habits of couples in long-term relationships in order to map out the sociological paradigms structuring interpersonal social connections in the midst of a global pandemic. This yielded the following, surface-level user friction:
Individuals seeking to (re)connect with each other through shared experiences need to select a movie - or other activity - for a "date night" but feel frustration when facing difficulty identifying a movie - or other activity - that both individuals are interested in.
Knowing this, what is the core problem the solution seeks to address?
Individuals seeking to (re)connect with each other through shared experiences need to establish, communicate, and compare interests to determine date night activities, but feel frustration when facing difficulty sifting through and identifying activities that both individuals are interested in. These users require support through an activity "matchmaking" service that compares and contrasts each partner's interests and desired date night activities while creating an intuitive pathway linking couples to the services that address their needs, such as OpenTable or Netflix.
What business value might the solution bring?
After distilling the core user friction, the following questions were asked to determine the business value of the solution:
1. Does the market exist? What business value might the solution bring?
2. What is the market demand and size? How broad is the audience?
3. What is the competitive landscape? Are there similar products in the market and how are they positioned? Who is most successful in this space?
4. What is the value proposition? Who are the target users? How does the app achieve financial viability?
5. What are the key performance indicators for success? What are the qualitative and quantitative markers of a healthy product in this space?
Insight: There is an unmet market, and the market demand is high
Conversational user interviews and market research surveys were leveraged to reveal that 82.61% of participants report that they "often have trouble finding activities that both individuals are interested in". Continuing, 70.83% of users indicate "finding a time and date that suit everyone's schedules" is a primary stressor during activity planning.
​
So, how big is the current market?
Research into the current state of the market underscores the rapidly expanding nature of both the online dating and video streaming industries. With regard to the online dating industry, over 32 million Americans are currently participating in online dating. This forms a global industry that is expected to grow from $2.23 billion in 2019 to $3.592 billion by the end of 2025. In parallel, the global video streaming industry was valued at $38.56 billion in 2018 and is expected to grow to $149.34 billion by 2026.
Formal Project Proposal: Market Research
Further, a competitive analysis of the most successful products growing the social connection industry revealed that comparing and contrasting the activity interests of multiple individuals remains an unmet need in the market. Most digital products in the matchmaking space, such as Tinder or Bumble, focus on pre-relationship services for romantic couples, neglecting the needs of friendships and long-term romantic relationships. Moreover, subscription service products, such as Netflix or Amazon Prime, focus on the vertical slice of a single individual's needs, rather than providing robust featuresets designed around social connection.
​
Altogether, existing products in this market space are limited to:
Socially isolating product models that fail to support person-to-person connection
or
Pre-relationship services that do not build sustainable, long-term user engagement cycles
In contrast, Date Night supports partners and friends in finding ways to (re)connect with each other through shared interests and activities while creating an intuitive pathway linking individuals to the applications that address their date night needs, such as OpenTable or Netflix.
Insight: Exploring existing user behaviors uncovers a user friction potentially hindering the success of Date Night
A key problem emerging from user research involved addressing and supporting the ever-evolving individuality of users as each person's interests, passions, and life circumstances change over time. On one hand, as friendships and relationships change, Date Night must support the user through both happy and sad evolutions by avoiding potentially painful or traumatic reminders of emotional wounds. On the other hand, Date Night must also be sensitive to and cognizant of how an individual's tastes and interests evolve over time. The app necessitates a level of "revisiting" past content and prioritizing new activities that the users have not participated in. Providing this fine-tuned experience in a simplistic approach involves thorough and complex information architecture planning.
How to design a system that reflects back the ever-evolving individuality of it's users?
A thorough competitive analysis was conducted to seek inspiration and key insights from apps with similar needs including Netflix's "Top Picks for You" approach, Pinterest's suggestion architecture, and Tinder's connection archival process.
​
What was learned?
​
1. Designing for evolving individuality involves a balance between exploring new content and revisiting old content
"There’s no point in trying to eat something that has lost its flavor. I’d rather have many consuming if finite passions than wonder what it’s like to have even one."
- Katherine Ramsland Ph.D., 2014
An effective design focuses on surfacing new and exciting content, but takes time to revisit previous content to give space and allowance for a user's passions to evolve over time.
​
2. Create belonging, not shame
An effective design allows a user to quietly and seamlessly pause, archive, or renew connections with their social spheres. To be successful, the design must limit the negative influence of social pressures around popularity and self-valuation.
​
3. Design for exploration
An effective design encourages users to experiment and explore their existing passions as well as delve into uncharted territory. User engagement should be playful and fun, pushing on the horizons of existing identified interests.
Solution Ideation
Design Pillars: From Insights to Design Decisions
Leveraging the key insights arising from research analysis and behavioral psychology for products in this space, the following design pillars were established:
Date Night design pillars
With these design pillars in mind, the following methods of design ideation were utilized to reach the final product:
1. User Sit-Ins to evaluate social coordination mental models
2. Freeform Sketching for train-of-thought iteration
3. Pen & Paper Sketches anchored around usability questions
4. Digital Wireframing at a low and mid-fidelity level
5. High-Fidelity Design and iteration
6. Prototyping and interaction design iteration
Process: User Sit-Ins
In order to effectively evaluate the social coordination and mental models involved in planning quality time between individuals, user "sit-ins" were conducted. These involved sitting in on conversations between groups of people and listening while event coordination was conducted in order to better understand what information is being consistently communicated. While noting key phrases, questions, information tidbits, and general behavioral habits, several patterns of communication emerged that directly informed the featureset for Date Night. As the following graphic shows, these patterns centered on 6 key data points:
1. Schedule
2. Activity Category
3. Genre or Subcategory
4. Reputation
5. Accessibility
6. Substitutions & Negotiation
User sit-in key patterns summary
Process: Freeform Sketching
After evaluating the primary modes of communication through user sit-ins, a train-of-thought style sketching process began. This involved rapid iteration on very low-fidelity screens using digital pen and paper. By iterating rapidly on general screen layouts and flows, various concepts were put to paper and quickly ruled in or out. Through this rapid iteration, several home screen layouts were proposed and evaluated for usability. By anchoring Date Night around the Design for Exploration pillar, I was able to ascertain a design direction that involved leveraging the home screen as a place for users to explore new content and expand their library of activities. This naturally moved the product away from leveraging the home screen as a broad information overview - similar to what Fitbit provides - and into a more playful, engaging approach inspired by apps such as Tinder and Pinterest. Additionally, these train-of-thought sketches allowed me to explore multiple information architectures for the content. Initially, I delved into requiring the user to pick a content category as their first action. However, through rapid iteration I found that the design felt unapproachable and resembled apps where users take care of "chores". In order to reach a more user-centric, entertaining design I explored varying ways to surface content immediately without overwhelming the user and without surfacing content that felt unrelated or uninteresting.
Train-of-thought style sketches to quickly iterate on concepts
Process: Pen & Paper Sketches
Next, with a somewhat narrowed sense of the design direction, I began developing higher fidelity sketches for each screen that focused on the application's utility and purpose at each screen. In essence, each screen was posed with one question, "What do I do here?". In turn, each sketch answered this simple question by building interaction and information architectures anchored around prioritizing the answer to that question. In this manner, secondary and tertiary actions were appropriately de-emphasized in order to make space for the primary user goal. Most importantly, working through the Date Night app design with digital pen and paper surfaced key outstanding questions and feature opportunities. In addition, I was able to show these pen and paper sketches to 4 users to better understand the expectations users would potentially have at every screen, including opportunities for growth. Most notably, although Date Night was originally inspired by romantic relationships, these user interviews revealed that the functionality initially planned for could be extended to friend groups! As a result, the pen and paper sketches were revisited to rapidly iterate on an expanded featureset that caters to friends and friend groups seeking ways to spend quality time together. This involved adding plans for group chats, large databases of "connections", and a stronger information architecture surrounding the diverse interests, subscriptions, and schedules of multi-party date nights.
Digital pen & paper sketch of the Date Night home screen including outstanding questions
Digital pen & paper sketch of the Date Night My Connections screen including outstanding questions
Process: Digital Wireframing
Leveraging Adobe XD, I transitioned my digital pen and paper sketches to low-fidelity and mid-fidelity wireframes that pushed the design and functionality of Date Night even further. Seeing the product begin to take shape, I found that some of the information architecture and design elements that made sense on paper did not translate well to their wireframe counterparts. Most notably, the paper sketches imply that the cover art for the media in focus is separated by some negative space from the information panel that provides name, genre, year, and description details. Once put in wireframe form, this design felt like it was disconnecting the cover artwork from the information panel, and the two felt like unrelated elements. As a result, these elements were redesigned in a combined format that helped reinforce their interdependent nature. Additional on-screen elements were played around with to better balance negative space with interactable, engaging elements.
Initial round of low and mid-fidelity wireframes with stub images and text.
This phase of development also allowed for the refinement of the product's accessibility. In order to maintain readability, all primary body text is delivered at 20pt in the Bio Sans, a simple sans serif, highly-readable font. Secondary text is a minimum of 16pt, also in Bio Sans. While developing the wireframes and initial product personality, all screens and features were evaluated in grayscale to ensure that color was not leveraged as a primary line of communication for users. Relying instead on contrast and font weight, the product is fully usable without color cues.
Wireframes represented in black and white color filtering to address contrast levels
Process: High-Fidelity Design
To solidify, refine, and polish, the Date Night app, the final weeks of the thesis project were a sprint dedicated to developing a high-fidelity design and a functional prototype. To bring Date Night to life, a visual direction and personality for the application were iterated on. In conjunction with this visual polish, the a detailed pass was taken at fleshing out each screen in the core user flow to adequately illustrate 5 primary features:
1. Onboarding: Walking users through the primary app features
2. The Stack: The homepage hub - a stack of cards - that users swipe right or left on to express like and dislike
3. Plan a Date: A pathway for users to plan out and send proposals for date nights that is rooted in existing mental models
4. Responding to a Proposal: A flexible, built-in reply feature that allows users to go beyond "yes" or "no" by supporting a response system that encourages users to reply with iterations on the initial proposal
5. Curated Spotify Playlist: A playlist automatically created for each connection or group chat that compares, contrasts, and reflects back shared music tastes in a unique playlist
Date Night UI Showcase
While working through the polishing sprints of Date Night, I was able to sit down with a handful of potential users to walk through the varying screens and better understand what user expectations exist at each level of interaction. Through these conversational user interviews, I was able to determine shortcomings and areas of opportunity for the design. These included refining the calls to action, the focus elements, the onboarding flow, and the calendar section. Most notably, the calendar was initially designed as an iOS-style vertical scroll. However, several user interviewees noted that this presentation of the calendar was overwhelming while also providing little useful information on what activities a user has upcoming. As a result, the calendar was modified to show only one month at a time with a horizontal scroll. This freed up the vertical scroll space for highly-specific and applicable reminders of upcoming social events that a user can quickly review. Consequently, the calendar screen holds much more digestible and usable information without overwhelming users.
Date Night's My Calendar page before and after iteration resulting from usability testing
Even further, the user interviews conducted during the design polish sprint revealed areas of the app that brought users delight. To this point, leaning into the playfulness and engaging nature of the homepage's card stack allowed the app to parallel the delight and light-hearted exploration users enjoy within apps like Tinder and Pinterest.
"Oh! It's like Tinder, but for people who are already in relationships!"
- Usability Test Participant #4, 2020
Assortment of Date Night card stacks
A final accessibility pass for contrast and readability in grayscale was applied to safeguard the design. As the details and visual personality of the app became refined and polished, this grayscale assessment ensured that this augmented visual noise did not hinder or disrupt usability for hard of vision users.
Summary view of the final UI within a grayscale filter to address contrast
Process: Prototyping
To complete the final design sprint for Date Night, Adobe XD was leveraged to create a working prototype for the primary featureset, including general interaction design and iteration. The prototype begins with a short onboarding flow that highlights the primary interactions and solution goals. Most importantly, the Date Night prototype highlights the intended functionality for the homepage card stack as well as the user flow for individuals looking to either set up or respond to a date night proposal. Even further, the prototype includes a user flow for accessing each connection's unique playlist. Altogether, the prototyping sprint illustrates how a user is able to move through and within the Date Night app for a variety of user stories. It conveys the personality, functionality, and business model for Date Night and lays a foundation for engineering implementation.
Date Night prototype walkthrough. Please contact me for access to the full prototype!
Closing Thoughts
Challenges
In the course of developing the Date Night app design and prototype, there were 3 primary challenges to overcome.
​
1. How to turn the mundane into delightful
One of the first challenges encountered with the Date Night app was determining how to turn what is normally a stressful chore into a delightful user experience. More specifically, the comparing, contrasting, and untangling schedules, time zones, watch lists, subscriptions, and streaming services creates a headache that users shy away from. Exploring and playing around with how to turn this user experience into something fun and engaging was a difficult and rewarding challenge. To tackle it, I dove into apps that delight users with visual content like Pinterest and Tinder, and leveraged the playful and simple interactions as inspiration for Date Night. Making the sorting through media content a fun experience, and then handling the comparing and contrasting of interests behind the scenes turned an arduous process into a gamified user flow. Imbuing this concept with opportunities to explore, learn more about one's connections, and generally feel a sense of social connection during a socially distanced world pandemic created the fun, playful, and delightful user experience I aimed for with Date Night.
​
2. How to reveal and conceal information architecture complexity
Another challenge for the Date Night project involved the complex information architecture and how it is both revealed and concealed from the user. On one hand, the application demands that users are at least aware of the complex data the app can handle and organize on behalf of users. On the other hand, the minutia and details of that data and information architecture are not nearly as useful to a user as the results of the analysis are. Finding a balance between revealing the complex power of the application and concealing the overwhelming details was an important and nuanced design challenge. Tackling this involved approaching the concept with robust user interview analysis and behavioral psychology insights. Leveraging existing user mental models and sitting in on conversations between potential users as they coordinate date night plans illuminated a natural and intuitive information architecture that is infused into the Date Night app concept.
​
3. Time
One of the biggest constraints to this project was maintaining rapid iteration and agility under a 10 week time constraint. To manage this challenge, I began the project with a timeline in mind to provide structure to the process. In addition, my access to thorough user interviews was limited by both the time constraint and the limitations of the Covid-19 pandemic. As a result, I transitioned away from the traditional design process model wherein a segment of time is dedicated at regular intervals to user interviews and usability testing. Rather than have these two phases segmented out, I infused these into the process and continued conversations with my user interview pool throughout development. This allowed my project to be agile and adaptive to feedback throughout it's development. In addition, this allowed for the resultant feedback to be as iterative as the design was, which ultimately safeguarded against large reworks.
Date Night UI showcase
Reflection
At the core, this project helped me learn and practice taking a concept from user frustration to elegant product solution. Turning feature gaps into design pillars and leveraging a humanized approach to developing a technological solution, I learned how to effectively ideate, iterate, illustrate, and present the full life-cycle of a user experience design.
​
Moreover, I learned to not only act on, but actively encourage critique of my process and my design, and to adapt to a rapidly changing cultural context during a world pandemic.
​
Most importantly, I learned how to take the experience of frustration and leverage it to identify market gaps for which I can design highly creative and user-centric solutions. From this project, I take with me a passion for developing vivid and vibrant user experiences that balance immersive depth with purposeful design.
Thank you for following along with my journey through the process of creating Date Night! Please feel encouraged to reach out on LinkedIn - I would absolutely love to hear your insights, feedback, and ideas!