Client: We Well | Role: UX/UI Designer | Duration: 6 weeks | Tools: Figma
Overview
What had started out as a way to provide people with various tools to improve their wellness became so much more after some research. It became clear to design a solution that would hold people accountable through a social aspect in order to have a more positive impact and an everlasting effect on a person's well-being.
Challenge
The app is attempting to address many aspects of wellness which can make it convoluted. Limiting the amount of features so that the app doesn’t become cumbersome was a challenge throughout the process. Each feature needed to serve its purpose in a way that was balanced and allowed the user to stay focused on their overall wellness.
My Process
Below shows the different steps of my design process. With research, I discovered the various components of wellness and the different apps competitors have developed to address each one. After learning the users’ pain points I was able to define the problem with the question, how might we establish accountability and support for a person’s wellness? I then devised wellness features to see how users would interact with the app. After ideating, I designed and tested the app in order to receive validation from the users.
Goal
Design a new mobile app that helps users focus on and improve their overall well-being, as well as design the app’s brand and logo.
1. Research
It was crucial that I gathered as much information as I could on wellness as well as what people thought about their own wellness and what it means to them. The discoveries from the interviews allowed me to synthesize the common goals, needs and frustrations.
Secondary Research & Competitive Analysis
Having a deep understanding of what wellness is was the starting point for this project. Since wellness incorporates various components, it is important to have balance between each of them because being strong in one area and weak in another may still cause you to be unwell. The research then focused on mobile apps currently out in the market that provide solutions to each of the different areas of wellness.
Each of these apps focus on improving a different area of wellness.
Key Findings:
Wellness is the active pursuit of activities, choices and lifestyles that lead to a state of holistic health
It incorporates many different components that need to work in harmony
There are physical, emotional, intellectual and social components of wellness
Apps can now provide fitness tools, keep track of nutrition, help deal with stress, improve cognition and allow users to play games with one another through video chat
Interviews
I furthered my research by asking people about their personal habits, their stressors, their understanding of wellness and what they do to improve their wellness. This would help me validate the notion that physical, emotional, social, and intellectual wellness are key components to a person’s well-being. Below shows the participants’ common goals, needs and frustrations.
The overall insight I learned from these participants was that wellness is hard to achieve alone. In order to be well, they all needed someone to be there for them. They said that it has helped them physically and mentally. A surprising insight was that the majority felt that their finances are a key factor to their wellness. A few of them touched upon the intellectual aspect of wellness. As a result, I felt this app needed to focus around people being there for one another in the different aspects of wellness.
2. Define
Once I analyzed my research, I created personas to represent the users. Knowing the users’ pain points I create a list of features as solutions and tested it with flow charts to see the interaction and where issues may arise. It was at this stage where the focus of the app became the Social Circle Chat and the machine learning check ins as its main solutions.
Personas
Caren Wells was one of the personas created from my research findings. Although Caren has a good paying job, she works a lot and it has taken a toll on her. She needs a support system that will get her out of her sedentary lifestyle and people she can talk to to help cope with the other stresses in her life.
Felix Wellington was the second persona created. Felix likes to buy things for himself as a way to deal with stress. However, he has a hard time saving money and needs someone to teach him good habits and help him set goals to manage his finances better.
Feature Roadmap
With the personas in mind, I began to think about all the possible features that can help solve their problems. Prioritizing the features allowed me to identify the key differentiators that would bring more value to the app. At this point the chat feature and the informative pop-ups were the focal points.
App Map
From there I started to build the infrastructure around the two main features with an app map. At this point, I thought of a third main feature that would supplement the other two. This would be a questionnaire that would appear and assess a user’s emotions whenever they were on the app .
Main Features:
Chat
Questionnaire
Recommendations
Informative pop-ups
Task Flow
With the features and the structure in place, I needed to see how the flow would work. I came up with a task for each of the personas. Task 1 was to record a wellness activity recommended to the user based on their answers to the questionnaire. Task 2 was to start a conversation using the Social Circle Chat feature.
This chart was created to show the simplicity of accomplishing two separate tasks with the app’s main features.
User Flow
The user flows show the process of onboarding, choosing a wellness goal, setting it up with participants for accountability and support, and creating the action that is related to their goal.
With these user flows, I was able to identify at which point the user would be able to connect with other people to help accomplish their goal.
3. Design
When it came time to the design, I had numerous ideas that were inspired by other mobile apps. The layouts of my sketches and wireframes would consist of a mix of popular messenger and wellness apps. I used keywords to help me create the logo and color palette while I also renamed the app. I was then able to create hi-fi screens with an extensive UI kit.
Sketches
With pencil and paper, I started designing the core screens that would be the focus of the app. This would include the check in screen with the questionnaire and the chat screen.
Check in screen (left) and the chat screen (right)
Wireframes
Then I turned my sketches into digital wireframes and created other complementary wellness tools. Since the app has quite a few features, it was crucial to have a clean visual design so that all the needs of the users can be addressed seamlessly.
Branding
When it came to the branding, not only were there many variations of color palettes and logos, but also name changes as well. The name of the app was originally named Wellness for Me. I used that name to produce some initial ideation sketches for the logo.
At this point it seemed lengthy so I decided to shorten the name and make it more catchy and unique so that it can be memorable. I also felt it needed more of an association with the product. Rather than using “me” I shifted the focus on “we” which is a more accurate representation of the app since it is the coming together of an individual and his/her social circle that can have a tremendous impact on their wellness. I also cut down “wellness” to “well” so it could mean wellness and well-being simultaneously. And We Well was created!
When it came to the colors, it was important to promote a scheme that was colorful and light so the users feel positive when they use the app. The infinity symbol was chosen because its shape depicts balance and harmony which represents what is needed between the different areas of wellness. The symbol also shows connection and unity which represents the importance of personal relationships.
High-Fidelity UI Designs
After completing the style guide I was now able to create high-fidelity mockups. This was the starting point in developing different paths the user would take. The screens below outline the onboarding, the check in and the chat process.
UI Kit
From the UI designs, I was able to put together a UI kit to document the design patterns and components to ensure there is consistency with the elements throughout the app.
4. Test
In order to validate my design solutions, I needed to test it with users. I created my prototypes using Figma. With given tasks, the users were able to provide me with feedback to help me revise my designs. Overall the users were able to understand the app’s functionality and features but had trouble with some of the wording.
Prototype
In order to experience the functionality of the app, I put together three separate prototypes for usability testing below.
Shows the user going through the onboarding process and creating a chat.
Shows the user browsing through the app instead of creating a chat.
Shows the check in process for a return user with a follow-up message.
Usability Testing
The testing had participants complete 3 tasks:
Create a chat with friends to play basketball together
Find the Create a Challenge option and then navigate from the home screen to the profile, health and games screen
Share your new mood with friends and family
Affinity Map
Based on the results of the usability testing, I was able to identify common issues to address by creating an affinity map shown below.
Patterns:
The UI for the date and time under the chat settings screen was confusing
The flow of the third prototype was hard to understand
Did not know the difference between Activity and Exercises under the health screen
Revisions
Furthermore, I took additional feedback from the testing to make the changes below. These focused on changing some of the wording and adding in elements to improve the visual design so that it is clearer for the user to understand.
Next Steps
From the testing, there were a couple of suggestions that I felt would be advantageous to have for this app. The first was to have a shared calendar with all those people in the group chats to help with scheduling. The second was to have a feature to connect to a therapist, life coach or another professional to speak about wellness and provide guidance.
Final Takeaways
This project has proved to be the most challenging thus far. As a designer, it was difficult to come up with a solution to such a common problem. What is the most effective way to improve a person’s wellness? What it came down to was each other. And through research and development, this app was able to answer the question, how do we be there for each other when we aren’t with each other? In order to achieve optimum wellness, we must be each other's life coach.