Celeste
Celeste provides a private digital sharing space that allows you to escape the distractions of ads, social media, and superficial connections. It is designed for the people who matter the most to you, regardless of your physical location. By eliminating the noise and clutter of traditional online platforms, Celeste enables a more focused and meaningful connection with your loved ones.
Overview:
Free from the noise & toxicity of social media and the tediousness of messaging apps - Celeste is a private digital sharing space for the most important people in your life.
Role:
As someone who felt a lot of anxiety from social media when the pandemic first hit & in addition was unable to see family abroad, Celeste was passion project created during the pandemic as an alternative social communication platform.
In this project i was a:
UI/UX designer
Strategist
Researcher
Built wireframes & prototypes on Figma & InVision to communicate with fellow engineer to test red routes & usability heuristics
Team:
Me! & Antonio Chan (iOS engineer)
Scope:
UI/UX Design, User/Market Research, Prototyping, Branding, Usability Testing, Wire-framing,
Tools:
Figma, Adobe Photoshop, Miro, InVision, Overflow
Duration:
5 months ( Nov. 2020 - Mar. 2021)
The Problem
The COVID-19 pandemic abruptly halted the fast-paced nature of our modern society and the abundance of social interactions. As a result of these necessary social restrictions, individuals have been confronted with the daunting reality of isolation. To bridge the gap and maintain connections while in quarantine, we have increasingly relied on phones and digital technologies. Research conducted by the Commonwealth Fund and SSRS, a research firm, revealed that since the outbreak of Covid-19, 33% of people in the U.S. reported experiencing stress, anxiety, or sadness that was challenging to cope with alone. Similarly, approximately 26% of respondents in Canada and the UK also expressed suffering from mental health problems as a direct consequence of the pandemic.
Source: The Commonwealth Fund, SSRS, August 2020 Release
The Idea
It became apparent to me that that everyone can all benefit from developing digital habits that support meaningful human connections—especially since that it may be our only option until the outbreak calms.
As a result, Celeste was created!
My goal was to…
Research Data
To gain a better understanding of people’s needs & wants & struggles, i conducted 15 in depth user interviews with people of all different ages.
The main “how might we” questions i wanted to address were:
How might we enable our close ones to have a reliable space that we can share with them
How might we create a more private/ secure environment to allow users to post freely amongst our close ones
How might we create a platform for our close ones so they can rely on solely one platform for virtual communication
How might we reduce feelings of isolation & anxiety for those who are separated from their loved ones due to COVID-19?
How might we help users feel connected to each other without it feeling forced?
My goals were to:
Based on survey results, i sorted all the data into groups, based on their natural relationships (affinity map below)
Synthesis
Based on the research and data i collected, i generated two potential target users & personas so that i can truly uncover their needs and prioritize certain features.
Heuristic Evaluation
For my heuristic evaluations, I chose three major apps in the space of virtual communication and messaging: WhatsApp, Zenly, and Facebook Messenger. Below is my rating system for evaluating these three products using the main heuristics I chose to focus on: Visibility of system status.
Visibility of System Status: Communicating the current state allows users to feel in control of the system, take appropriate actions to reach their goal, and ultimately trust the brand (Nielsen Norman Group)
Prototype
Ideate:
Before undertaking preliminary usability testing & creating my hi-fidelity mockups, i organized and structured all relevant entities in a user-centric way. Doing so will help anticipate how the user-flow will work.
Information Architecture
To get a good feel for the app and some of the core features i’ll be designing, i brainstormed & sketched out some wireframes with potential UI designs & red routes.
Site Map:
User Flows:
Lo-Fi Wireframes:
Wireflow
With this flow in mind, i went on to create simplified digital lo & mid-fidelity mockups on Figma & Overflow. I sent out a beta version to 20+ people to conduct both unmoderated & moderated usability testing.
Usability Testing
Initially, users were asked a brief set of questions to establish some information about themselves personally. Users freely navigated around the app however they wanted to so they could get an idea of the brand & gauge their perspective of the concept entirely. This would also help allow us to identify their habits as a user.
Secondly, a test-scenario and set of tasks formed from the initial research was given & assigned to the users. Users were given a specific starting point and task to follow through. This enabled me to test the usability & flow of each of my routes to see potential usability issues, highlight interaction-level pain-points, and interaction costs.
After sending out beta version, i found out that a lot of the wireframes were in fact somewhat redundant. In fact, certain buttons/features were also unused or confusing for the user. The + button on the homepage for new posts created confusion between uploading photos into the shared gallery vs onto the feed. Other feedback i received were users hoping to include a shared calendar feature.
Interaction Decisions
How can i ensure that my designs are simple and intuitive for users to view the other features offered on celeste? i prototyped 3 different mid-fi interfaces and tested among 15 users to find out which screen was the easiest to interact with.
Findings:
From user test results, majority disliked the hamburger menu option. Users didn’t want to have the extra step to search for what they’re looking for & would rather the options presented directly on the main interface.
80% of users preferred the features/menu to be above the messaging chat due to the fact that phones have the keyboard at the bottom which felt the most natural to them.
Based on my findings, i implemented the horizontal scrolling feature bar and iterated my wireframes. With these design decisions in place, i was ready to move onto the next step: creating the my hi-fi interfaces & prototyping!
Test
Hi-Fi Interfaces
Below are three key interfaces with bullet point explanations of the features on each screen. The main goal for my designs were to present all the information & features in one screen in the most simple yet aesthetically fitting way.
Interactive Prototype
Homepage
Top bar - Users can add stories & active members are highlighted with a green circle
Features bar: Calendar, Gallery, Call, Location, Settings
Message/chat feed
Location Tracking
Live location updates (*if user chooses to enable location tracking)
Live time zone & weather beside every user
Automatic feed updates to the homepage when the user returns home or to a specific location (dependent on user & group setting)
Shared Calendar
Ideal for event planning & group scheduling
Features include: My Tasks - To-Do - Events
Automatic birthday & anniversary reminders (notification settings depends on each user)
Style Guide
The color palette utilizes mainly pastel tones. Due to the inviting, calming, soft nature pastel tones represent i thought that this would be a perfect fit for Celeste. The monotone tones in combination with the pastels work well together creating a more visually sophisticated yet inviting interface.
The main typeface for Celeste is SF Pro Text. SF Pro is the main system font for iOS, iPad OS, macOS and tvOS. As a result, to optimize legibility and accessibility for users, this was the best choice. The typeface is flexible and features nine weights, variable optical sizes for optimal legibility, and includes a rounded variant.
Retrospective
Designing an entire app from scratch is challenging and super rewarding at the same time! I love thinking and making my thoughts come to life. Reflecting back, I learned that it’s imperative for the hypothesis to be backed up by loads of qualitative research, multiple usability tests, clear user flows, and lots of iterating.
Takeaways:
1. Design thinking is a non-linear process
Knowledge/Information acquired at the later stages can loop back to earlier stages.
The perpetual loop that is created - in which the designer is gaining new insights, developing new ways of viewing the product, and the possible uses it creates, significantly creates a far more profound understanding of the users and the problems they face.
2. Design iteration brings validated & strong results
As designers, we need to constantly refine & improve our designs in order for them to continue to create the best value for our users = iterate, iterate, iterate!!!
Test, iterate, and test again
3. Explain your design process to the engineer
Go through user flows and even edge cases! constant communication between each other helps accelerate the effectiveness of creating the product.
As a designer, it’s important to be flexible and understand certain design constraints the engineer might face
4. The ideation process requires users early on
Feedback I received prior to the first usability testing helped me immensely with identifying tangible goals. The user stories and research certainly contributed to a smoother design journey.
5. I love designing!
From the early stages of just brainstorming, researching, and designing to actually using the final product on my phone is so fun! Throughout this whole process every step was so fascinating, starting from conception all the way to completion.
Due to time constraints & other projects, i wasn’t able to test out my final prototype as thoroughly as i wanted to. My next steps would to conduct more usability tests, A/B testing (like Snapchat, i wanted to try testing the menu bar as the whole screen - scrolling right would take you to the next feature) , and of course iterate again (based on test findings/feedback).