Hangout

Overview

Problem

As we get older, finding time to see friends gets complicated.

Schedules fill and responsibilities pile up, making it a logistical ordeal to find a time that works for everyone. It’s no surprise then that a lot of us struggle to maintain active social lives, seeing friends far less often than we used to in the good ol’ days. This can make us feel disconnected, isolated, and even depressed.

Solution

I designed Hangout, a mobile app that streamlines the event scheduling process by consolidating all the steps into one centralized platform. Its user-friendly interface enables organizers to visualize their friends’ schedules and identify mutual availability at a glance. Potential timeslots can be nominated for a group poll, allowing friends to efficiently decide on a time that works best for everybody. Plus, everything sits on one app, so no more hunting down links or scrolling through old texts for meetup details!

Problem

My role

UI Designer, UX Researcher

Project Type

Google UX Certification Project

Timeline

3 months

Tools

Figma, Draw.io, Miro

Plan Hangouts With Ease

Just put down a couple of details and suggest some times for your hangout. Don't worry - Hangout shows you when your friends are busy, making it easier to find openings in your group's schedule.

Vote on a Time That Works for Everyone

Our polling system keeps track of who prefers what so that you can avoid the chaotic back-and-forth in the group chat. Plus, with calendar integration, you won't need to open your calendar app to see what you have going on that day.  

All Your Events, in One Place.

View, edit, cancel, and withdraw from events, all in one hub. That's right: no more scrolling up and down old texts when you forget when you'd planned to hangout.
Jump to Prototype

.  .  .

01. RESEARCH

Interviews & Affinity Mapping

Understanding Current Methods and Pain Points

In order to design an improved scheduling system, I needed a deeper understanding of our user base, the current methods by which they're organize gatherings, and how these methods may or may not be meeting their needs.

To accomplish this, I conducted interviews with 4 people at varying stages of their adulthood and ended up with a heap of information in the form of lengthy Google Documents and scattered notes. For the sake of clarity, I synthesized my findings in an affinity map using Miro. Presenting data in such a way helped me identify patterns and pain points that would later come in handy when brainstorming for solutions.
Some key insights:
Because of these difficulties, some people are deterred from proposing alternative options when they cannot make the initially suggested times. Instead, they choose to save their friends the hassle and simply not attend the event. Others are deterred from initiating the planning process altogether. 🙁

Empathizing

Fostering Empathy: Personas and User Journey Mapping

After the interviews, I developed two personas that encapsulated the characteristics, thoughts, and behaviors of different user groups. This helps me foster empathy for users and ensure I’m keeping their needs in mind as I create my design.
With the personas done, it was time to start fostering that empathy and put myself in their shoes. I did so by creating user journey maps for my personas, which details the series of physical and emotional experiences they might go through when planning a hangout. To be mindful of this means to understand the good and the bad parts of the process, which will be an immense help as I ideate features down the line.

Competitive Audit

What Can We Learn From the Current Market?

Lastly, as the proverbial cherry-on-top of our user research process, I conducted a competitive audit to examine how existing scheduling tools in the market excel at helping people get together, as well as how they might fall short of that goal. 
I found that:
After conducting this analysis, I felt better equipped to create something comprehensive: an app that supports polling, provides a collective visualization of a group’s availability via calendar integration, and diverges from the typical productivity focus by catering to everyday individuals seeking to enjoy time with friends and family. 

.  .  .

02. DESIGN

Ideation

Feature Exploration & Prioritization

My goal at this stage was to push my own boundaries and try to think of unique ways to approach my design, so I tried to get as many ideas down as I could without much consideration for feasibility (yet). Then, I grouped them into categories to make the following mindmap.
Next came prioritization. I performed a MoSCoW analysis to systematically prioritize features by categorizing them into must-haves, should-haves, could-haves, and won’t-haves, all the while considering both feasibility of implementation and significance of each feature to the user experience. This approach provided me with a clear focus by highlighting which key features to address first when I begin wireframing.

Wireframing

Initial Design Drafts

Before going digital, I first sketched out some ideas on paper to explore their viabilities and narrowed in on the designs I liked. Here are the final wireframes I created for the main screens and user flow (that is, creating an event):
Once I had wireframed each feature, I transitioned to creating mockups and a low-fidelity prototype to present to potential users for feedback.

User Feedback & Design Revisions

Stop and Check: Are We on the Right Track?

I conducted a first round of user testing to validate whether my designs are working as intended. I grouped my findings into three categories, and for each of them I devised action points to guide the improvement efforts I’ll be making in the second iteration of the design.
01 | Encourage Users to Sync Their Personal Calendars to the App
Everyone liked the concept of pooling schedules and nominating timeslots to vote on, but some pointed out that this would work best if everyone synced their personal calendars to their app.
  • Ensure that the benefits of calendar syncing are made clear to users through effective communication during onboarding process
  • To ease privacy concerns, anonymize and untitle all events synced from participants’ personal schedules
02 | Make events more comprehensive
Some users felt that some features surrounding events were missing, and that the app doesn’t support all the functionalities somebody might need to seamlessly organize an event.
  • Add a location picker during the event creation process
  • Add an overview page at the end of the event creation process, just prior to sending out invites
  • Allow participants to view the status of an ongoing poll, including individual responses to specific time slots
03 | Increase intuitiveness and accessibility
There were some instances of general confusion among users when navigating certain features or areas of Hangout.
  • Make navigation clearer by replacing icons with text (e.g. instead of a pencil icon, have an "Edit" button)
  • Opt for action-oriented verbs that align with the physical action the user is expected to perform. For instance, instead of “vote on a time” say “tap to vote”

Mockups & Prototyping

High-Fidelity Design: Iteration 1

Using the insights from user testing at the forefront of my design decisions, I created the first iteration of my high-fidelity prototype on Figma. The design contains some modified elements from Google’s Material 3 Design Kit.
Main User Flow
RSVP
Upcoming Event: Host & Respondent Views
Design System
View Prototype

.  .  .

03. ITERATE

Usability Testing Process

Moderated Usability Testing Plan

Now that my first iteration of a high-fidelity prototype was complete, I needed to conduct a second round of moderated usability studies to measure how well my design achieved the goals I had set. I recruited a new batch of users this time, again ensuring that they were from varying stages of adulthood and lived a diverse range of lifestyles so that my app could be evaluated from multiple perspectives.
A quick rundown on how I carried this out:
View Detailed Study Plan
To make an objective and quantitative assessment of my design, I created a set of Likert-scale questions, each of which are tailored to measure the efficacy of a specific design goal. Users can respond to these statements on a 5-point scale.

Results

Does the User Experience Align With Our Design Goals?

In short: yes, but there is room for improvement.

Analyzing User Feedback to Inform Design Iterations

During the usability studies, I received a lot of valuable feedback and was able to approach my app from multiple new perspectives. Again, I processed this information by creating an affinity map, and from there identified recurring issues and strategically addressed them in my design iterations.

01

| Multi-Day View
📝  TESTING INSIGHT
While nominating or voting on time slots in the calendar view, the banner only stated the currently viewed day and users could only view one day at a time. However, users expected to have an overview of what days they’re working with as well as the ability to view multiple days at once.
‍
✔️  SOLUTION
I redesigned the banner to include up to 3 days at a time and added a multi-day view (up to 3 days) so that users may review schedules across multiple days in one glance, enabling quicker recognition of mutual availability. The rationale for picking 3 days is that fitting any more may cause the calendar get too packed and hinder readability.

02

| Gesture Animations
📝  TESTING INSIGHT
Some users didn't grasp that they were to tap to vote on the timeslot selection screens.
‍
✔️  SOLUTION
I added brief gesture animations to provide some guidance. This animation would apply only to those carrying out the user flow for the first time.
‍

03

| Edit Invitee List
📝  TESTING INSIGHT
Users wanted the ability to modify an invitee list after already sending out their invites. This wasn't possible with the current design, giving hosts who had forgotten to include a friend no other choice but to remake the event.
‍‍
✔️  SOLUTION
I implemented this functionality by making the invitees list an editable field, whereas it was previously greyed out along with other non-modifiable details.
‍

.  .  .

04. LATEST PROTOTYE

.  .  .

05. TAKEAWAYS

First of all, thanks so much for reading my case study!

This project is very special to me because it's the product of my first venture into UI/UX design - a leap of faith, so to speak. Although the timeline of Hangout was brief, it was jam-packed with lessons and a lot of first-times.

Here are some of the biggest ones I'm taking away from this experience:
made by me with <3 and this album