Case study: Solving the pandemic of loneliness

As we are in our last years of college, getting out and rebuilding our communities from scratch is terrifying. We wondered: is there a way to make it less scary — and even fun so that we can make genuine, in-person connections? Check out what we came up with below!

See Prototype

Our team: Kaleb Getu Gezahegn, Grace Lin, Isaac Wan, Anatoliy Cherednichenko, and Dan Bially Levy

Roadmap

This project was created as a result of the final design sprint for our human-computer interaction class. Before getting started, we agreed to follow the following design process:

Credits: Stevenson Technology Education

So, as soon as we got together as a team, we started thinking about defining the problem to understand how we could solve it best.

Define

Background

The epidemic of loneliness is killing us. Year after year, the average American gets more and more lonely.

This problem has gotten so significant that on May 2, 2023, US Surgeon General Dr. Vivek Murthy released a public health advisory, Our Epidemic of Loneliness and Isolation, where he states that being alone is as harmful to our health as other, more evident things.

The mortality impact of being socially disconnected is similar to that caused by smoking up to 15 cigarettes a day

While it may seem counterintuitive, lacking social connection may be more deadly than cigarettes, alcohol, or junk food (source)

When we learned about these and other factors, such as post-college depression and Harvard’s study on loneliness, we started wondering: can we use technology to improve real-life social connections of young adults who have just moved to a new environment?

Narrowing down the problem

To validate our assumptions about the severity and scale of the problem, we decided to get out and talk to a few recent graduates to hear their first-hand experiences living and adapting to a new place.

We then came back together and grouped our findings on the board:

After talking to 10 recent graduates, we learned that creating connections post-graduation may indeed be challenging.

We used their insights to narrow down the scope of our problem and solution as follows:

• Our audience is recent college grads aged 21–27
• We will build a mobile app because it is our target audience’s preferred way of engaging with the Internet and social media
• Most of them have built lasting connections in the past, so instead of focusing on creating deep relationships, we wanted to first focus on meeting new people
• Between doing so in professional or personal circles, we chose the latter based on the feedback we received

Having extensive research and these insights behind us, we were now ready to move to the next step: sketching the potential solutions.

Ideate

Brainstorming key features

Equipped with ideas, we met at our school’s Idea Lab: perfectly named for this stage space for entrepreneurs and innovators to experiment with different materials. We started by outlining the key features of our app based on our preliminary research.

Through a mix of teamwork brainstorming and individual inputs, we were able to identify key features during just one class time

We realized that given the sprint’s time constraints, we wanted to focus on designing for three main use cases:

• Register for first-time users
• Find and host an event
• Check your own and other users’ profiles

Sketching first wireframes

Before getting started with mid and high-fidelity prototypes in Figma, we wanted to have a clear idea of what elements and screens we wanted to have so that our end users would have a pleasant experience using our app. So, we started individually sketching different flows for various use cases.

Here are the wireframes we showed one another as we discussed similarities and differences:

Design

Creating a style guide

We decided to divide and conquer various flows to make sure we got this extensive project done on time. To ensure our designs look consistent, we came up with the following design guidelines:

As we worked on the project, we were able to refine colors, margins, and various text styles so that the designs look consistent and there’s a clear visual hierarchy

We chose purple and yellow to give a warm, friendly feel, and used Adobe’s color contrast analyzer to pick hues that would work well together and make our app visually accessible. We also wanted a simple, sleek aesthetic and chose a sans-serif font accordingly.

Based on the guidelines above, we then created a set of various screens that correspond to the initial flows we decided to focus on, as well as our established information architecture.

Prototyping

After we agreed on the styles and divided the work, we started creating an initial set of prototypes to use for future usability testing:

Our initial prototype

Test, Evaluate, & Refine

Conducting usability testing

Having the prototype ready, we came back to the people we initially interviewed to conduct usability testing. Here are the tasks we wanted our users to complete:

1. Register in the app
2. Find and RSVP for an event
3. Host an event

Some of our participants playing with the prototype

What we learned

For each interview, we let the users figure out the solutions to those tasks themselves while we were writing detailed notes on the interactions. Additionally, we asked the participants to speak out loud about what they saw and what they were about to do.

Here’s what we learned from the interviews:

Even though we weren’t able to address all the concerns due to the timing of the project, we did our best to solve some of the issues by redesigning our prototype.

Refining the prototype: Onboarding

Our friends were confused about the need for a separate “Get Started” screen and the name “RCNT.” Additionally, users preferred signing up for the app using their social media accounts rather than manually registering the account, as we proposed.

As a result, we:

• Changed the name, adjusted the logo
• Made the first screen more actionable and accessible for users who are already registered
• Added options for signing up with Google or Apple as primary registration options, while manual registration became secondary

Refining the prototype: Finding & RSVP for the Event

The next pain point we focused on was the scanability of the event page and clarification of our RSVP page. Users wished they had seen more information about the event upfront. Additionally, we forgot to consider an option for guests that don’t have any food restrictions.

As a result, we:

• Added “Event Tags” section for the event page to give users a better idea of what type of event they are looking at before reading more details
• Added yes or no boxes about food preferences to give guests a choice when they encounter this field.

Refining the prototype: Hosting the Event

The last pain point we addressed was clarifying flow and text when creating an event. We found that most users were unsure about writing sufficient titles and descriptions for their events, so in order to alleviate their concerns, we included gray example text to help them write their own text.

As a result, we:

• Changed the initial “Setting up your party” screen to avoid confusing steps with clickable buttons
• Added clarifying and example text every time we ask the user for input

Final Thoughts

Once we presented our Figma prototype on the last day of the Human-Computer Interaction class, our last design sprint concluded. However, that doesn’t necessarily mean this is the end of our project. Using our newfound skills and tools that we gained throughout our course’s design sprints, the true final last step would be to transfer our prototype using code into an actual app.

As always, a huge thank you to our professor, Lauren Milne, for teaching us the wonderful world of Human-Computer Interaction. Without her, we would have never been able to create the prototypes you’ve read about in our Medium blog posts.

Congratulations everyone! 🎉