Circles

Circles is an individual student project that explores remote communication methods as a response to physical isolation during the COVID-19 pandemic.

Circles

Overview

The Product: Circles is a mobile application that focuses on pushing current digital communication methods further to help individuals living in long distances feel closer together.

Target Users: People with loved ones living abroad, such as international students, frequent travelers, and long-distance couples.

My Role: Product designer

Practices: UX/UI, Product Design

Timeline: 6 weeks, May 2020-June 2020

Circles

Problem Statement

Due to the global pandemic, most people have been turning to online platforms like social media, messaging, and video conferencing apps in order to be in safe contact with their loved ones. However, these platforms may tend to make some people feel the opposite, as the concept of hyper-connectivity can ironically make individuals feel more isolated.

This problem also exists outside of a pandemic setting, as many individuals who live away from their loved ones rely on online platforms to keep in touch.

Circles

Approach

How might we push current digital communication methods to help individuals living in long distances feel closer together?

I used an iterative design process, where refinements and design decisions for each iteration were based on data from three rounds of user-testing, resulting in a highly collaborative design process.


The wireframes and prototypes were tested by 10 people within the user group, among them were international students, frequent travelers, and long-distance couples.

Persona

Persona

Research & Insights

I conducted user interviews with people who live away from their loved ones: Yvette (an international student), John (a flight attendant), and Alex (, who is in a long-distance relationship). I was curious about what communication methods or apps currently work for them, and the pain points that each comes with, if any.

Some key insights I gathered:

  • Social media is catered for a wider audience, so individuals tend to only share what they want others to see. It doesn't always reflect what one is really doing or how one is feeling.

  • Being in different timezones would mean having schedules that do not sync, therefore making it more challenging to find the best timing to talk to someone.

  • Some people can be hard to reach or tend to be unresponsive, which can make them difficult to get in touch with especially if they are living abroad.

Storyboard demonstrating a scenario of Circles in use

Storyboard demonstrating a scenario of Circles in use

Exploration

I considered both remote and in-person methods of communication, mapping out ways on how I might be able to "humanize" the experience of using mobile apps to communicate.

I wanted to expand on the concept of "virtual co-habiting" by having a shared digital space. I did this because I was trying to resemble the feeling of being present in the same room, where communication is highly accessible using as little effort as possible.

I applied my research findings into concept ideas and translated these ideas into app features.

Goals

I defined the project goals based on insights I gathered from conducting user interviews and peer feedback from early concept exploration.

Convenient & Easy to use

Ensure that individuals can easily communicate with their loved ones in ways that are both convenient for them and those on the receiving end.

Close-to-real

Resemble the feeling of being around others, possibly through having a shared digital space.

Personal

Explore ways that could make individuals feel less distant from their loved ones, and that they are able to comfortably share how they are doing.

Early-stage wireframes

Early-stage wireframes

Outcome

I designed Circles, a mobile app that enables users from different parts of the world to connect with their inner circle of friends and family. May they be frequent travelers, couples in long-distance relationships, international students, or simply those who want to keep in touch with loved ones, wherever they may be.

Circles

Home & Geographical info

The home screen is where users can view all their friends, organized based on the time of day in their respective locations.


Since Circles is designed for people living within long distances, this would make it easier to identify what the appropriate time is to contact them.

Circles

Plans & Schedule

One of the primary focuses of this app was to explore ways that could make individuals feel less distant from their loved ones, and that they are able to comfortably share how they are doing.


Circles enables users to update each other on their plans and share them with all or selected friends. This makes it easier to for them to work around each other’s schedules if they would like to interact.

Circles

Speak

Speak enables live voice messaging, which functions similarly to a walkie-talkie. This feature was added because it helps resemble the feeling of being around others, where anyone can speak without having to answer their phone.


Speak would be useful for a quick conversation, like when the user is unable to read or send a text message (i.e. driving or exercising). It can also be used for active reminders, like nudging your unresponsive friends to reply to your messages.

Circles

Message

Users can chat or leave their friends messages if they are unavailable.

Snap

Snap is a camera within the app that enables users to send photos to one or more friends at a time.

Circles

Mood

Since Circles is designed for loved ones and inner circles of friends, this feature gives users the option to quickly communicate how they are feeling to those who are closest to them.


This would enable friends to know when they should reach out or give emotional support.

Circles

UI Design

Once I addressed all usability flaws based on two user tests, I created a design system and started designing high-fidelity screens on Figma.

Legible and easy to navigate

Through user-testing, I found that the app is comprised of a series of buttons, so navigation was constantly present throughout use. Because of this, I wanted to ensure that all the elements communicate what they did, and gave the user a better sense of which screens they will be taken to.

Typography and Colour

I used the font “Roboto” because it was legible in small sizes and enabled me to implement hierarchy while sticking to a single font.


The colour scheme consisted of a muted blue and orange. I chose these colours because they were complementary, and looking at them on the colour wheel reminded me of two points on opposite sides of the globe. So putting them together somehow hints at the objective of this project.

Circles

Closing thoughts

I learned that with an iterative design approach, testing and feedback play a major role in every iteration’s progression. As the designer, I am given the opportunity to choose whether or not the user feedback should be considered based on my knowledge of design principles; and if an individual wants to make a specific change that will not work for majority of the users, I get to mediate that situation with ethics and empathy.

Key skills I learned from this experience

Storyboarding, personas, wireframing, usability testing, data analysis, interactive prototyping, creating a style guide, use of frames and groups on Figma.

What I could have done better

If given the extra time, I would have refined the Plans feature where users are able to share their schedules. This section was touched on and asked about during user tests, it seemed like something that users don’t often see on social media or messaging platforms. I would have liked to show how customizable this feature can be, and I had some ideas for enabling users to share daily, weekly, and monthly schedules, setting reminders, or even use this feature as a personal to-do list.