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.

Research

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.

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:

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.