Some final assets of the project
HEALTH & WELLNESS
August 2024 - November 2024
METHODS USED
User Interviews, Heuristic Evaluation, Competitor Analysis, Prototyping, Illustration, Animation, User Journey Mapping
The Overview
Spearheaded by founders who struggled with eating disorders, Commune-ED was envisioned as a space where individuals battling eating disorders could connect with others who are facing or had faced similar struggles.
I was brought onto a team consisting of 3 developers. As the sole UI/UX designer, I led the ideation of the app design and website design from scratch. There was a lot to address, but the main goal was to create an online space where struggling people could find others for help.
Starting out with Visual Design
During the first couple weeks, I set out to lay the foundations for the app's look and feel for the pitch deck upon an urgent request by the stakeholders. A couple key considerations at this stage were color psychology and imagery.
For the first step, I wanted to create color palettes that felt warm and comforting to put the users more at ease. I expected that users who would come to the app would likely be looking for comfort and connection with others who share similar experiences. I tried palettes with emphasis on a few different colors: green (nature is found to invoke positive feelings in viewers), blue (calm, trust, stability), and purple (balance and introspection).
All palettes were designed to support how the user would feel while using the product.
A few of the color palettes brainstormed initially.
The second step was determining the visual language; namely, what images would be included. It was important to not have anything that might trigger users, as even having a specific body type can induce negative feelings and comparison. A softer, more abstract artistic direction allowed the app to remain visually engaging while prioritizing user safety.
↑ The first draft of illustrations
↑ The final draft of illustrations.
Returning to UX: Defining the problem.
After the initial work on branding and imagery, I came back to the question:
Why should an app like Commune-ED exist?
The founders had envisioned an online space where people could confide in each other and find community, but is that what users would want? Who are the users? Are there other apps that would fulfill this same need?
To start, I created a proto-persona.
Meet Samuel
With an initial brainstorming session with the founders, who have had personal experiences with eating disorders, I came up with the proto-persona Samuel Hardy.
The ideal user for the app would be someone who was open to connecting with others about their struggles with disordered eating, and who would proactively seek out a community space to talk about these issues.
What would Samuel do?
After creating the proto-persona, I tried to put myself into his shoes and think about what a teenage boy would feel, how he would be limited by his environment. I imagined what would lead him to download this app, and what a possible positive experience with FrED would result in.
What are real people experiencing and dealing with?
After the initial exploration on how Samuel would feel, the challenges he might face, and how he would feel along his journey to explore options to get help, I thought that it would be best to see how people who have struggled with these problems have felt dealing with the active issue and recovering from or managing their eating disorder.
To gather more solid data on how people feel, I reached out to online Discord groups that I am a part in, and was able to attain answers about experience with eating disorders from an interview. It is a personal topic, so I appreciated greatly their time and willingness to answer questions about their struggles.
As I only got one person for an interview within the intended timeframe, I also referenced Reddit, as the anonymity of the site allows for people to be more honest about their struggles (albeit, also with posts and comments that may not be trusted fully). In addition to gathering a little data on what people were saying on Reddit, I was also able to gather how people were able to interact in a discussion board versus an online chatroom.
I also looked for an official source, WebMD, on their articles about dealing with eating disorders and best ways to help others struggling with the illness.
There were a number of factors that I gathered from the research. I learned about how people felt during ED, how they felt after, when people should get help with their ED, methods for managing an ED, and what triggers and inner conflicts might prevent others from seeking help. The comfort of anonymity and need for people to have emotional support for their most honest thoughts supported the idea of having an anonymous chat app where people could say how they truly felt without the pressure of their identity.
The largest issue was a subscription cycle. While the team wanted this app to be accessible for all ages, including minors, introducing a payment model that the stakeholders wanted presented additional challenges for that goal. It lead to questions such as "Why not just use Reddit or Discord for free?" and "What does our app provide to amount to the cost?".
In the end, the minimal viable product did not have a subscription model in place.
The User Flow
For the user flow, we included the screens for choosing a subscription plan, while not adapted in the MVP. The user experience was carefully thought through, where I and the Product Manager went through the various options a user would have to go through to find the chatrooms, their favorite groups, video calls, and the AI chatbot.
UI Revisions
After the flow was decided, it was time to continue my UI work.
I built out the screens for:
1. Login/Sign Up/Create Account
Loading Screens
Selecting a Membership
Introduction Tutorial
Chatting with Fred
Joining/exploring chatrooms
Scheduling appointments/meetings
Video calls
Resources
Editing your profile/mentor profiles
While the flow was decided, many aspects of every individual screen also had to be carefully thought about.
For instance, the chat rooms was designed to allow people to explore groups and rooms, while still allowing the live group chat functionality. This was a bit different compared to apps for live chats, such as Discord, that only focus on being a live-chat interfaces. We wanted users to explore chatrooms without having too much overload on the senses, and one way to ease navigation is categorizing chatrooms under specific categories.
However, some category names (named to point users towards recovery and helpful, positive thoughts) would get fairly long. To accommodate this, I opted for larger content blocks that could display the full titles, rather than using pill components with truncated text or reducing the categories to single-word labels. Additionally, I included a section at the bottom highlighting recent individual chats, offering a more approachable entry point for users who might feel overwhelmed by the larger sections at first.
A part of the intro flow to the app.
Reworks after launch
With the release of the MVP, there has also been user feedback. One user found the dashboard to be confusing and unintuitive, while the rest of the flow worked well. With this feedback, I went ahead and did some thinking on what the user needs to see on the homepage.
The user would want to see any upcoming appointments
Notifications from chats or mentors would also be useful
The main navigation sections
Perhaps the main chatrooms that the user is active in
Their profile
From here, I created the dashboard 2.0.
The dashboard 2.0
Conclusions
I learned a great deal from this project. This was my first large-scale project where I was brought on as a designer for a genuine MVP that was intended for release into the market. While I made a few missteps, such as trying to accommodate for everyone's ideas (creating difficulty in coming to a conclusive design) and not getting as many user interviews as I'd like within the week timeframe I had, this project was ultimately an invaluable learning experience for me.
Managing the workflow of an entire project, from conception to finish, was something that I learned on the job. I gained experience on how to balance stakeholder needs with design recommendations, and how to pitch meetings in a more efficient way by presenting refined final ideations based on stakeholder feedback and requests.
Overall, this project taught me that the UX workflow is definitely a lot less structured than it was presented in class. It's similar to research or painting - starting with an idea, then using the UX tools available to iteratively develop and refine it.
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 112 120" xmlns="http://www.w3.org/2000/svg"><path d="M 61.5 13.5 L 0 13.5 M 12.5 0 L 0 13.5 L 12.5 27" fill="transparent" height="27px" id="BBn2IMvOT" stroke-dasharray="0" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="rgb(196, 123, 122)" transform="translate(25 41) rotate(90 30.75 13.5)" width="61.5px"/></svg>)