This project was born out of my own desire to enhance my focus and mental energy throughout the day. I was finding myself to be dragging throughout the day and started experimenting with techniques to break my routine and get some physical movement in. I discovered that I could improve my mental energy and focus throughout the day by adding various activities at intervals. This got me thinking whether other people struggle with mental energy and focus and if they would want an application to assist them in managing those levels.
Project Overview
Role: UX/UI Designer Tools Used: Figma, Miro Time Frame: 2 Months
Designing a helping hand for self-care
In today’s fast-paced and over-stimulated world, many individuals struggle with managing their energy levels effectively. Factors such as work stress, screen time, lack of sleep, and poor lifestyle choices can lead to fatigue and burnout. People often find it challenging to identify what activities can help them recharge, leading to decreased productivity and well-being.
Problem Space Analysis
Figuring out Needs
I discovered that there are a number of energy tracking apps out there, but the space is pretty sparse in terms of competition. Likewise, most of the apps are tailored towards physical energy and utilize biometrics tracked by wearables. I wanted to create a product that would fill the specific niche of mental energy and focus, that would not be tied to the use of a wearable. This direction represented a hole in the current market and an opportunity to help a range of users.
Through looking at these competitors, I was able to glean insights into current design patterns for these products and the features that are available to users. It became clear that a potential challenge to designing this product would be balancing tracking input and showing trends with a simple and easy to use format.
When the question arose; “Who is going to use this app?"; my gut instinct was to say “everybody!” But, I pulled back on that enthusiasm and decided to focus my user research on people who take an interest in personal wellness, mindfulness, and/or have particularly taxing jobs and lifestyles.
Research
Where to start in adding a feature to an already outstanding app? I began by taking a comprehensive look at the app itself and 4 of its top competitors, Strava, Map My Run, and Runkeeper. I downloaded the other apps and went for runs using each of the other apps (I regularly use the Nike app). Additionally, I read user reviews in the app store and articles about the top running apps on Runner’s World, CNN, and Tom’s Guide. I wanted to get a feel for Nike Run Club’s strengths and weaknesses compared to its competition in order to discover opportunities to add a feature that could help the platform compete or that would build upon its current strengths. Through this methodology, I intended to build some assumptions around which I could develop the best questions to ask users.
All of the subjects reported that they do notice that their mental energy fluctuates during the day and have an idea about when they tend to drag and when they have peaks.
Most of the participants expressed an interest and even need for prompting in order to break them out of an energy slump and make them aware of the slump and what to do about it. They all expressed a little fatigue and trepidation about using an app to help them with mental energy. Worrying that it could be too time consuming, complex, or making them use their phones even more (which is an energy drainer).
Imagining the possibilities
“The app needs to be easy and simple”
It became clear that my interview subjects recognised that they had fluctuations in their daily mental energy and focus and that they would be open to help in “surfing” those highs and lows to better optimize their day around the tasks and goals that they have. Since they all already have some strategies in place, they all were interested in being able to have trends pointed out to them in addition to prediction of energy slumps with coaching on how to deal with those slumps.
I distilled my research into succinct problem statements in order to focus the direction of the design
Defining the Challenge
To bring the challenge into deeper focus, I grouped my research data into an affinity map in order to see patterns in the concerns of the users. From the patterns that I was able to see across my interview subjects’ experiences, common user problems began to emerge.
Insights
I interviewed 5 individuals from various backgrounds who all either have interest in wellness tracking or their personal mental energy levels, have tiring jobs that keep them in front of a computer all day, or who have kids and a lot of things on their plates.
My interview subjects all had differing relationships to their own mental energy and focus, but they all felt confident in their ability to recognise when their energy levels are low and high. They associate mental energy and focus and value both of these things as essential to performance and happiness. Though they had confidence in their ability to gauge their level of mental energy, they varied in their confidence to recognise patterns in their fluctuations over time.
Users struggle to identify consistent patterns in their mental energy fluctuations, leading to a reduced ability to utilize the times when they have more energy and recognize when they are going to need a boost.
Users desire personalized, actionable advice but fear the app will be too complex or time-consuming. They want nudges and advice on their mental energy, but they don’t want something that is going to just add to their cognitive load.
Keeping in mind that my users were looking for an app that would not itself contribute to lowering their mental energy; I focused on making a simple site structure with the basic features of an Energy Log, Metrics display, and Tool Kit.
I created a simple initial site map to begin building my features around.
Using my problem statements as a guide, I brainstormed possible features and organized them by priority in oder to begin formulating the roadmap to a solid MVP that would deliver solutions to my users’ needs and concerns.
“I would be discouraged from using the app if it was too time consuming”
Generic or irrelevant notifications fail to provide value to users
Bringing the users to life
From the data gathered from interviews and analysis, I developed two personas. I took elements from the perspectives and experiences of my interview subjects and imagined Mia and Jimmy.
Building a Brand
As the platform began to take shape, I began to build the brand identity around the around core values that I believe spoke to the needs of my potential users.
After workshopping my ideas with colleagues and mentors, I started to gravitate toward the simple image of the eye combined with wavy lines that represent energy. I wanted to play with the concept of the eyes being the window to the mind and representing a glowing energy from within.
I settled on the name Mindflo, as it was simple and communicated the basic concept of the app. The final logo as alluring and simple.
I like start my design process with brainstorming names and concepts using a mind-map. From thids mind-map, I look for ideas and words that reflect my brand ideals, the product’s purpose and that would make good visuals.
I then brain storm sketches of some of the concepts that are most attractive to me. There are no bad ideas in this phase of my design exploration. I want to work through as many ideas as I can, as quickly and freely as I can.
As the logo came together, I expanded upon the tone and color of the logo to develop a style tile to help guide my design aesthetic for the rest of the project and create a cohesive look for the product. I wanted to design with a “dark mode” look with bright, uplifting colors with geometrics and gradients to communicate playfulness, sharpness, and calm while playing upon current trends in design aesthetic.
Project Goals
From the defined problem statements, the Project Goals became more clear. To bring better clarity to the holistic development of the product, I created both User Goals and Business Goals. I knew that balancing the two would be important to delivering a viable product to our customer base in a way that will sustain growth for both product and the users’ needs.
User Goals
Users want help being more aware of the ways that their mental energy and focus fluctuate
They want to be able to predict when they will hit a slump
They want to know how to best use their time based on their patterns and the best times for them to do different types of activities
Users want solutions tailored to them
They want actionable advice that will actually work for them and take into consideration their own patterns and preferences.
Users want a simple experience that will not demand too much time and, ironically, sap their mental energy in the process.
Shaping the Experience (initial designs, task flows, and ideas)
I began the design process by quickly sketching out wireframes on paper. I like to work on paper first, to force myself to come up with as many ideas as I can without investing a lot of time into them. I want to clear out any bad ideas without putting pressure on myself and also give myself space to play with ideas that may seem unconventional at first. After working through some sketches, I selected the best ideas to further explore digitally so that I could bring them to my fellow designers for feedback.
Business Goals
We want to create an app that helps people to be more aware of their mental energy and focus so that we can help them to better deal with slumps and utilize their time the way that they want to.
Create a memorable app that is striking and motivates users to stick with the app.
The app experience will be key in creating brand loyalty and more likelihood of referrals and daily usage.
We want users to engage with the app on a daily basis
This will give the user a better chance for good outcomes, which will in turn drive user retention and referral.
Deepen user buy in by offering premium levels or services that users can see the value of once they start to see gains from their free usage.
Ideation
Focus
As the problem space and the product goals came more into focus, I began to realize that one of the key problems to deal with in this design would be the balance of simplicity and functionality in delivering metrics on energy fluctuations that can be understood easily, while also giving the user just the right type of recommendations and feedback. A needle would have to be threaded that creates just the right amount of content for the user. The app would focus on tracking mental energy and focus levels and provide analysis of those patterns for the user along with recommended tools to boost mental energy and focus.
I returned to my personas, Jimmy and Mia, in order to come up with the task flows around which I would build the architecture of the product.
Dashboard
Taking Shape
How might we empower users to better understand and manage their mental energy throughout the day—without overwhelming them with complexity or screen time?
From these initial task flows, I began creating some lo-fi and mid-fi wireframes of the basic screens. I began to flesh out the key screens by focusing on trying to keep the platform simple. I realized that a key task flow was going to be the sign up and onboarding flow. It would not only be the user’s first experience with the product, but it would also teach the user how to use the key function of the app: logging mental energy levels.
One of the most important interactions was going to be the Energy Log Screen . This is where the user will log their energy levels every day. This interaction needed to be simple, but also effective in capturing the user’s energy level and circumstances.
I created a few versions, but settled on two versions to test with potential users. The more simple, square version tested better and really seemed to make more sense.
Metrics Page
As I created the wireframes for the key screens, it became evident that creating engaging data visualizations was going to be key for the dashboard.
After showing my initial designs for the primary energy data visualization was confising and not workong for potential users. I would have to go back to the drawing board. But, I was getting good feedback from fellow designers and testers.
Energy Log
The Metrics Page would be the key place where users would go to understand their energy levels and make decisions on what to do to manage them for the best.
Though conversations with users, I understood that it was going to be important to give users simple explanations about their energy metrics and some simple visualizations.
Building on the foundation
After selecting my best lo-fi designs, I put them through a round of testing. My goals were to identify if the features that I was designing had value for users, how easily users could find all of the features, and how users responded to the ideas I was working up for the data visualizations. I knew that two of the most important designs would be the energy selection interaction for logging energy and focus and the data visualizations that would present the users’ trends to them.
I found that the simple two factors of energy and focus were the easiest for users to understand and the quadrant chart was the easiest to use. I started out working with some ideas that would give the user the ability to select 7 different types of energy and awareness factors but in testing, this format proved too complex. .
UI Guide
Before creating the Hi-Fi wireframes, I spent some time honing the data visualizations and creating the UI elements that would be the building blocks of the app. I wanted the UI to pop against the dark background and I wanted them to seem to exude energy themselves. I chose pink/coral to represent high energy and blue to represent low energy.
Runners need help knowing how to take steps toward their goals.
One of the features that my users were most excited about was the suggested run goal. Currently, the Nike Run Club app has a feature where a user can set a custom distance, time, or speed goal for a run that they are about to do. Part of my expanded metrics feature is to sync with the users long term goals to create an AI generated run goal based on the user’s history, current ability, and upcoming goals. Users needed to be able to distinguish between these two run goal tasks and set the goal quickly and easily before a run.
The high fidelity version of the Sign-Up/Onboarding task flow featured a refined aesthetic and an option to be guided through your first energy log.
Many test participants expressed confusion over the the process of logging energy. To help solve this potential problem, I added a guided energy log as part of the on boarding process.
Energy Log Screen
The Energy Log Screen uses the more simple, square energy level picker the considers only the factors of energy level and focus.
The user can log just their energy and focus level, or they can scroll to select relevant factors or circumstances that they want to associate with this log. Additionally, there is an option to write a journal entry to further describe how they are feeling and what else is going on. The app will analyze the journal entry and factor it into the user’s trends and metrics.
Daily Metrics Page
The Daily Metrics Screen shows an analysis of each day. Users can see each time that they logged on the day as well as noted dips and simple synopsis.
Dashboard
The Dashboard needed to be simple to use and contain quick to access and understand information about the user’s basic patterns.
The page features a large button linking to the Energy Log Screen and a visualization of the current day’s energy fluctuations, based on the user’s logs.
The Dashboard also contains short synopsis of the user’s trends, links to favorite tools, and a predictor of the next dip that they will hit.
Weekly Metrics Screen
The Weekly Metrics Screen shows the user their weekly stats going back as long as they have been using the app. This page also gives simple synopsis of trends for each week.
On this screen, users can scroll charts of the days from that week and can tsap on those days to access a more indepth look at each day.
Testing
After creating a prototype, I tested it with 5 runners ranging in skill level and enthusiasm. In creating this testing plan, I thought back on the personas of Alyssa and Jake. Alyssa would be training for a long race, probably a half marathon, and will want to check the progress in her training to the last time that she was training for the same race. Jake is in the process of pushing himself and wants to see his metrics to get a sense of where he stands and would like to get a recommendation for what mileage he should run for his next run.
Refining the structure
Refining
After completing the tests of the prototype, I created another iteration of the design before putting it through a round of feedback from colleagues. This iteration was about making the tweaks that would bring the design the extra inch toward fuller ease for my user group.
Users had some difficulty figuring out that they had to navigate from the default comparison screen (the month view) to the run view in order to select runs to compare. To address this, I created text prompts at the top of the page, changed the initial metrics display boxes to a disabled state, and created greater contrast in the navigation bar at the top of the page.
For the run compare page, users wanted more contrast between the visualizations in the graph, so I darkened both of the colors and made the pace line a little thicker. Additionally, I created a function where users can hide either metric or either run in order to see the other metrics isolated.
