Well BEE

A mobile App for cultivating self care & well-being

This design project is team work of a designer friend and myself.

The business owner wanted us to re-imagine how people can adopt and maintain a routine that enhances their well-being. The requirement was, to build an App that it tracks the users progress and pushes them to commit to a healthier lifestyle. The UI should reflect a fresh, updated image. The result is a native Android app for well-being with a holistic approach. It tracks and optimizes individual habits in order to reach the users set goal.

The project timeline was about 2 months. Since this was a part time project, we worked on it 11- 15 hours per week.

In the image below you can see an overview of the steps we worked on in the respective design part.

As an overall project approach, we used Design Thinking and started with the empathizing with the client and potential users of the target group. Afterwards, we put the pieces together in the Define phase and let our creativity flow when entering the Ideate phase. After setting up the Low-Fidelity and Mid-Fidelity Prototype, we conducted user tests. It helped us to get valuable feedback and we adjusted the prototype accordingly.


Since we already had all information from the client, we directly started with conducting user interviews with people from the target group. The target group is about busy people who want to reach a set goal by changing their habits in small steps and track their process regularly and easily. In order to better understand users’ experiences, motivations and problems, we conducted interviews. We gathered very detailed information about their pain points and got very valuable insights why and when they use mobile apps for their well-being.

Competitor Analysis

After the insights from the user interviews, we took a closer look at the competitors. We have chosen seven competitive brands and informed us about their wellness features, programs, content and philosophy. Based on our research, we set up the Marketing Map as you can see on the right side. We found out, that many of them have a focus on habit tracking in order to reach goals, simplicity and community features to stay motivated. One of the apps offers coaching sessions and is outstanding in terms of that compared to other apps. Another app is outstanding in terms of much content, features, colorful and rich in options and features, that can be overwhelming very easily. Since we have learned from the user interviews that an app should be easy to use with soft color schemes, we had the task to put a focus on simplicity and a bare minimum of features that let users reach their goals easily.

Affinity Diagram

In order to set up the profile for our Persona, we went back to the results of our user interviews, filtered out the main statements and organized them by using an affinity diagram (see image on the left). An affinity diagram is a useful tool to group ideas and summarize information. Finally all ideas that fit together are grouped and named. That helped us to see connections among them and identify patterns. We categorized in such as: Meaning of wellness, Usability, Frustrations while using an app, Improvements that an app for well-being should offer, daily challenges in terms of cultivating healthy habits

Define and Ideate

Finally, we bundled our insights and set up our user Persona (see image below). User Personas are fictional characters that are created based upon research. A user persona is very helpful in order to establish accurate user profiles of who will interact with the final product. With that step, the Design Thinking process enters the Define Phase. As you can see in the figure below, our User Persona Whitney is a busy woman that is searching for a more balanced and healthy lifestyle. Her wish:

“ I love my job, but I also love myself. I need to find a balance. I always used to think, I can plan to have a perfect healthy & wellness lifestyle later in my life. I now realized , there is no right time. And now is the only time which is right”

User Journey

After finalizing the User Persona, the next step was to create the user journey from a design project perspective. The goal of a customer journey map is to gain an understanding of how the customer experience develops over time. We sketched the user journey after a brainstorming session and refined the steps into our team’s version of an appropriate customer journey. As you can see in the figure below our Customer Journey Map has 3 zones.

  1. On the left-hand-side is our Persona Whitney and a rough scenario description

  2. In the middle there are possible thoughts, actions and feelings

  3. At the bottom, our ideas with possible solutions

We depicted a typical day when Whitney tries to stick to her self-imposed healthy habits. She starts the day in a good mood and realizes pretty quickly that she has hardly had anything to drink during the morning. The job stresses her out a lot and she is distracted from her health, which bothers her a lot. Normally, she wants to regularly note what she eats and how much water she drinks. But in our Journey she forgets this again and gets annoyed about it. At the same time, she would like to have tips and tricks adapted to her current situation so that she can stay motivated and get through the day in a more relaxed way.

We then defined the Problem Statement based on the user journey:

"Busy professionals need to find a way to take care of their daily habits which optimizes their well-being because they need a personalized support to improve their healthy habits and organization of daily structure in order to reach their wellness targets easily."

'How might We' statements

With all of our insights it is time to challenge assumptions, think outside the box to explore and to ideate. This Ideation Phase is about generating ideas, how might we as aspiring UX Designers might solve problems for our target group. Ideation is a deep understanding of your consumer and a focused, well-articulated challenge to solve, it’s time to start developing potential solutions. The How Might We technique is a powerful way to turn insights into actionable design solutions. “How Might We” (HMW) statements are mighty questions that allow Designers to re-frame insights into opportunity areas and innovate on problems, found during user research. At this point we broke down the larger problem into smaller, actionable pieces and consolidated our ideas into these 3 HMW questions:

Afterwards, we brainstormed ideas about how to solve the 3 HMW Questions and used the MoSCoW Method to give our ideas a prioritization. After a dot voting about possible solutions, we sorted our notes into the MoSCoW Method quadrant (see figure on the right) and put a focus on the must haves in order to set up our MVP.

MoSCoW Method

The MoSCoW analysis is a popular prioritization technique for managing requirements. The term MoSCoW itself is an acronym derived from the first letter of each of four prioritization categories (Must have, Should have, Could have, and Won’t have), with the interstitial Os added to make the word pronounceable.


It was now time to take action regarding setting up the mobile app structure by creating a Sitemap that represents our MVP. A Sitemap is essentially a well structured design and plan of the app’s hierarchy. It has far reaching effects on everything, starting from search engine optimization to making sure the visitors have a smooth and great user experience.

In the figure below you can see the whole Sitemap structure.

User Flow with happy path

The Happy Path is an ideal user journey that users take when opening the mobile app on their mobile phone. The Happy Path should satisfy users and the business owner at the same time. The user should find all information easily and enjoy a great user experience. The business owner should get a lot of usage traffic and as many customers as possible, since the call to action is set perfectly. Our Happy Path starts with letting our user persona Whitney discovered this new app and is curious if it will help her with tracking drinking enough water, tracking her nutrition, digital detox and a better sleep routine.

Concept Testing

After choosing a Happy Path, we made first drawings to give it more life and to be able to test our thoughts visually as well.

As a response, we got feedback from our testers, such as follows:

First 4 screens (Landing and onboarding screens):

"I liked the name and the logo. The idea with the bee makes the first four screens, they're great. They're very clear. Because usually entering your data in an app can be quite annoying."

Edit habit: "It should be more clear, that it's really just one page for a habit."

Goal: "I like the calendar and the journal. It is great because it helps to look back to see what what you did on that day. Or maybe when something when good. The habits should have more space in between, so that the user can click and see more easily."

Explore screen: "I like, that you have this nice message that encourages. I'm really curious what happens when when you're not really doing great."

Home screen: I find it a bit too crowded compared to the other pages. I'm missing a bit of simplicity.

Habit overview: It should be more clear, how I can track my progress.

Challenges screen: the mood should be just smiley faces and a bit smaller.

Mid-fidelity flow

Mid fidelity prototype is a prototype with limited functionality. It has several clickable areas presenting an application's interactions and navigation potentials. It usually presents the mid part between low-fidelity and high-fidelity prototypes. Usually some of the critical functionality and content used in the product is shown, but it does not contain all of them. Graphics and photos are not there, or high-level interactions such as animations are also not present. It is more of a series of wireframes that are linked together to provide certain levels of interactivity.

UI Part

In order to create the look and style of the final product, the next step is the User interface (UI) design process.

Our target is to create an outstanding mobile application style and look that gives our product a unique positioning compared to other competitors. That meant for us, to do research about the competitors’ websites. Visual competitive analysis involved identifying our direct and indirect competitors to reveal their strengths and weaknesses in relation to our own planned website and business.

Mood board and Brand Attributes

A Mood board helped us to get an idea of what feelings we want to evoke in our target audience (see figure below). It also served as an inspiration and gave direction for defining the brand attributes, the right typography and color style for the mobile application. You want your mood board to offer inspiration and direction.

Brand attributes are adjectives that represent the essence of the brand and are a set of human characteristics that identify the physical, character, and personality traits of a brand. Our final brand attributes are: Effective, Approachable, Friendly, Personal, Optimistic.

Typography and Colors

With the insights from our Mood board and feedback of our testers we explored colors and fonts and presented them to our testers as well. We set up a final color palette and found the favored font after letting our testers do their work.

You can see the result in the figure below.

High-Fidelity Prototype

Finally, you can see here the final High-Fidelity prototype. This prototype includes visual elements such as pictures, icons, colors, the final typography and all included interactions and the navigation are closer to the final product. Enjoy our Well BEE mobile application.