UX Case Study: SOCO

A mobile app designed to help people stay socially connected with their friends over engaging activities

group-2_optimized

Timeline:

8 Weeks

Type:

Capstone Project - BrainStation UX Design Diploma

Role:

User Research, Wireframe, User Interface Design, Prototype, Usability Testing, Branding, Marketing

Tools:

Pen & Pencil, InVision, Figma, Sketch

Platforms:

iOS, Responsive Web

SOCO (short for social connection) is a mobile application that aims to help people stay socially connected with their friends by providing them with some fun and engaging activities such as playing card/board games or watching movies / TV shows when they can't be physically together.

Understanding The Problem

Problem Space

The unexpected outbreak of COVID-19 has taken "normal" away from everyone's daily lives. Due to the rapidness of the outbreak, many individuals have been at home practicing physical distancing as much as possible in an effort to prevent the spread of the coronavirus and to ensure the safety of their own and the others. However, meanwhile, people have traded in their daily social needs and healthy mental well-being for a safer society.

Secondary Research Insights

screencapture-camh-ca-en-health-info-mental-health-and-covid-19-covid-19-national-survey-2020-07-25-15_09_17

Project Goal

To help people who are affected by the pandemic the most that are 18-34 years old, I wanted to come up with a solution that maintains their daily social needs virtually while also experiences close-to-real-life social interactions.

Design Question

How might we keep people socially connected in order to increase the feelings of connection and reduce the feelings of isolation during the COVID-19 pandemic?

User Interviews & Insights

To understand the problem space and the potential users' pain points better, I conducted interviews with 5 university students (between 18-30).

After the interviews, I organized the qualitative data into 3 categories: motivations, pain points and behaviours, which lead me to 3 key interview insights:

  1. Most of the people use existing social platforms to maintain their connections and have felt some good impacts psychologically to some extent. However, there are still some improvements needed for the existing platforms as some people feel dissatisfied.
  2. People want to interact in a more fun, authentic and engaging way, which can enhance satisfaction with virtual interactions and the sense of connection. 
  3. For the virtual activities, people gravitate more towards movie watching and game playing for fun and engaging social interaction.

Market Research

From the interviews with the target users, I learned that those are the primary digital tools they used in order to connect with their peers during the pandemic. So I dug deeper to find out possible opportunities for intervention.

Group-4

A potential solution could be a mobile app that allows users to have face-to-face interactions while watching a built-in movie or playing a built-in game.

Hypothesis Statement

I believe creating an engaging and interactive platform where users can stay socially connected with their friends for 18-30 years old will help reduce feelings of loneliness and isolation. I know this is true when I see more and more people start to use the platform and more than 50% of users feel less lonely and isolated after using it.

Understanding The Users

Persona

From the interview insights, I created Caroline Lee, an outgoing full-time university student who's been impacted by the physical distancing due to the pandemic.

Building a persona helps me focus on target users throughout the whole process and drive my design decisions.

Primary-persona-Copy

Persona's Experience Map

I then created an experience map of Caroline interacting with existing digital products to start a movie-watching party with her friends. It gives me a better understanding of her emotional journey and also helps me identify potential opportunities for the intervention.

Experience-mapping-Copy

As a result, I defined 3 opportunities for intervention:

  1. Visibility of friends' activity and status
  2. Built-in movie/TV show library
  3. Ability to watch shows and have face-to-face interactions with friends at the same time

Ideation

User Stories

To start ideating a digital solution, I began with generating user stories to ensure that the features of the solution address potential user's pain points and needs. I then organized every user story into 3 different epics and chose the core epic - interacting and connecting with friends - that would best demonstrate MVP.

Core-epic-Copy

Task Flow

After creating the user stories, I developed a corresponding task flow diagram that focuses on starting a movie-watching party with invited friends.

Task-flow-Copy

Ideation Sketches

I translated the user task flow into several sketches on paper to better visualize the solution and the interaction for the users and selected the most appropriate sketches that would fit the brand best.

Then I digitized sketches into mid-fidelity wireframes with contents filled in to better represent the app when it's used for usability tests.

Test

Usability Testing

I conducted 2 rounds of usability tests, each with 5 participants, to obtain practical feedback that can be incorporated to improve the design and provide a more optimal user experience.

The 1st round was conducted on the sketch prototype to identify any issues that could cause potential frustration or confusion.

The 2nd round was conducted on the second prototype with improvements based on the 1st round, to see if the new changes were effective and also to get more feedback.

Participants were asked to complete the following tasks:

Task 1: Start a party room

Task 2: Invite friends from the friend list 

Task 3: Find a movie

Task 4: Rent the movie

Task 5: Watch the movie with friends

Round 1

Group
  • 60% of testers were not able to complete the first task with ease because "Start a party room" was hidden inside the kebab menu, which wasn't intuitive and accessible.
  • 20% of testers had trouble entering the invite screen due to a lack of instruction.
  • 100% of testers completed the rest of the tasks without any trouble.

Round 1 Iterations

After a round of usability tests, I organized and synthesized all the feedbacks and made adjustments accordingly. Here are the major changes that could be significantly helpful to the overall flow of completing the tasks.

Artboard-1
change-2

Round 2

round-2
  • The improvement made for the first task was effective as 100% of testers completed the task seamlessly.
  • 20% of testers had trouble exiting the invite screen as they were confused by the interaction: using the 'Back Arrow' to exit the screen.
  • 100% of testers completed the task with ease for the rest of the tasks.

Round 2 Iterations

change-3

Visual Identity

Brand Embodiment

Based on the interest of the target demographic and the purpose of the product, I wanted the brand to be fun, interactive, energetic and welcoming. It is a happy social platform full of friends laughter.

Brand Colours

Since the product is where users and their friends gather together and have fun, I decided to go with yellow, red and blue. These colours are associated with positive emotions that can play psychological tricks on users, and it also creates vibrant, fun, energetic and inviting mood to the brand.

Group-27

Typeface for Wordmark

I chose to use George Round for the wordmark. The geometric sans serifs with soft edges give the brand a friendly, playful and inviting feel while still keeps the appearance clean and modern, which can be attractive to the young target audience.

Group-32

Typeface for App

Gilroy is a modern sans serif with a geometric touch. It's modern, clean and playful, which matches the general feel of the brand.

font-for-app

App Icon

I avoided using wordmark as the app icon because it didn't seem to match with what's inside the product. Instead, I went for a more metaphorical approach - different colours represent different individuals, gathering together to have fun and form one happy face. On top of that, the app icon is cute, friendly and welcoming.

app-icon-1

High-Fidelity Prototype

Marketing Site

website-mockups

Conclusion

Possible Design Impact (Tech Tarot)

THE FORGOTTEN

The target audience for the product was imagined to be individuals from 18-30 who have experience with digital products to some extent. That being said, people who are 30 or older, and/or people who are not familiar with digital products are excluded. When they use the product, they might feel lost and confused.

To improve their experience with the product, I'd first interview them to have a better understanding of their needs, frustrations and expectations for the product. Then, I would make changes to the product accordingly, which I would conduct user testings on it with excluded groups.

The-Forgotten

Future Steps

In general, I would like to: 

  • Explore other potential task flows (such as games)
  • Conduct more usability tests, since no usability tests were performed after Hi-fidelity, for a better product

Feature-wise, I would like to:

  • Explore other activities (such as listening to music/podcast together) to adopt a wider range of users
  • Add parent control - considering the young audience for the product, some movies or shows are R rated. Having a parent control could add trustability and reliability to the brand

Key Learnings

This was my very first UX project, and I am very much proud of what I had done under a short time constraint. Thanks to the project, I was exposed to the UX design process and gained more confidence in it. All the challenges I faced along the way just made me realize the importance of every single step in the design process.

During the process, I also had a chance to reflect on myself as a UX designer and learned my strengths and weaknesses, which definitely helps me become more conscious of what to focus on in the future.

The biggest takeaways for me:

  • Every design decision is made for a reason, so always have a good rationale to back it up
  • Always keep persona in mind during the design process to stay focus
  • Document the process along the way, for better learning and self-reflection
  • Trust the design process, because every step exists for a reason

🙏🏼 Thank you so much for reading!

Let's connect!

Please feel free to reach out to me on any platform anytime! I'd love to connect with you and talk about anything.

Made with lots of 🥩 + 🍞 = 🍔 = ❤️