An app for increased productivity and mindfulness

Me.

an app to help you to reach your goals through good habits

a project by Tina Do and Sande Fleischer.

Project: Me. App

This project was initiated during the Covid-19 pandemic. People only started to grasp the meaning of working from home, a concept not many were familiar with. Thus, the concept of “Me.”, a simple everyday habit tracker, was developed based on James Clear’s book “Atomic Habits.”

The following describes the work process used to come up with the app and its UX: Me.

Work Process Overview

People pay too little attention to their health when working from home. Sitting and distractions lead to irregular daily rhythms and unproductivity.
“How can we help people to be more productive in home office?”, that was the primary challenge.
The main target group are mainly adults between the age 18-30, as that is the major target group working remotely or hybrid.

Our User-Research methods included:
- Surveys
- Interviews
- Personas
We synthesised our insights with the following methods:
- SWOT Analysis
- Target Group Analysis
- Stakeholder Mapping
The following methods were used in the ideation phase:
- Affinity Diagram
- Brainstorming
- Research
To determine the requirements, we used:
- storyboarding
- MoSCoW
- Site Map
In our design process, we first sketched the low-fidelity wireframes and mid-fidelity wireframes. Then, we created the first branding (determining the fonts and colors), before moving on to the high-fidelity wireframes in Adobe XD.
The prototype was then created via Adobe XD.

Researching the topic of healthy home office

Initially, we delved into the concept of a "healthy home office," conducting thorough research to pinpoint existing challenges. We probed into potential solutions through collaborative brainstorming sessions while also examining competitor approaches. Additionally, our investigation extended to understanding the mechanisms behind habit formation, seeking insights into fostering healthier practices. After the research phase, we were able to define the problem specifically.

Problem Definition Canvas

User Research

We have distributed our survey online on various platforms, such as LinkedIn, Instagram and Co. We received about 100 submissions and analyzed the results in Miro.
We have interviewed five people who match with our target group’s profile. Some of the questions were the following:
What does your morning routine look like?
Describe your commute to university/work when you are not in home office. What was your daily routine like last Wednesday?
How do you feel about only working from home?
What are the most significant differences?
What does your workplace look like?
Is there anything that often distracts you from work?
What would you like to change about working from home? Do you use apps to be more productive? If so, which ones?
Additionally, we also asked participants to send us a photo of their current workspace and desk situation.
Through the insights, about three personas were created.

Surveys

Personas

Synthesis

Synthesis describes the process of combining all ideas and insights as a summary. In the following, the insights were synthesised in a SWOT Analysis, Target Group and Stakeholder Map.

A SWOT analysis is a strategic planning tool used to identify and evaluate the Strengths, Weaknesses, Opportunities, and Threats of a business, project, or situation. It involves systematically analyzing internal factors (Strengths and Weaknesses) and external factors (Opportunities and Threats) to gain insights into the current state and potential future scenarios. SWOT analyses help organizations make informed decisions, capitalize on strengths, address weaknesses, seize opportunities, and mitigate threats.
The Target Group method involves empathizing deeply with specific user demographics to understand their needs, preferences, and pain points. By focusing on a well-defined target group, teams can tailor solutions that resonate with users on a personal level, ultimately leading to more successful and impactful design outcomes.
A stakeholder map is a visual tool used to identify and categorize the individuals, groups, or organizations affected by or involved in a project, initiative, or decision-making process. It typically displays stakeholders based on their level of influence and interest, allowing teams to prioritize engagement strategies and effectively manage relationships throughout the project lifecycle.

Ideation

In our ideation process, we brainstormed ideas and used our current insights to come up with a solution to our initial challenge of a healthy-home-office app. We created an Affinity Diagram to cluster our ideas and thoughts.

Brainstorming Mind-Maps

Affinity Diagram

Requirements

We sketched a storyboard to imagine the user in the use-case situation, using the MoSCoW method to further narrow down the must-have features as well as the out-of-scope features. This helps us to not lose focus on the important things. The site map helps to provide the first structure of the app.

MoSCoW Map

Site Map

DESIGN

To craft our app’s final design, we kicked things off with good old-fashioned pen and paper, sketching out low-fidelity wireframes. This hands-on approach helped us brainstorm with clarity, free from distractions.

Next up, we leveled up with mid-fidelity wireframes, providing a clearer vision of the site's structure and flow.

And finally, with Adobe XD, we brought our vision to life with high-fidelity wireframes. Through rounds of prototype testing, we honed and polished our design until it was polished in terms of both UI and UX.