UX Case Study: SOCO
A mobile app designed to help people stay socially connected with their friends over engaging activities
Capstone Project - BrainStation UX Design Diploma
User Research, Wireframe, User Interface Design, Prototype, Usability Testing, Branding, Marketing
Pen & Pencil, InVision, Figma, Sketch
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
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
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.
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:
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.
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.
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
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.
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.
As a result, I defined 3 opportunities for intervention:
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.
After creating the user stories, I developed a corresponding task flow diagram that focuses on starting a movie-watching party with invited friends.
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.
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 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.
Round 2 Iterations
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.
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.
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.
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.
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.
Possible Design Impact (Tech Tarot)
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.
In general, I would like to:
Feature-wise, I would like to:
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:
🙏🏼 Thank you so much for reading!
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 🥩 + 🍞 = 🍔 = ❤️