centrd
centrd is a task management and task prioritization Pomodoro timer app used for health and wellness. centrd allows users to keep track of their tasks while promoting good mental and physical health habits.
User Research | Usability Testing | Interaction Design
Design System | High-Fidelity UI Prototype
Made using Figma and Figjam.
Context
For this indivudual bootcamp challenge, we had 2 weeks to conduct user research and design a health & wellness app. One of the main pain points my coursemates kept talking about was not knowing when to take a break from work, or that they had no time to exercise because they had so much work to do. I decided to research and come up with a solution to our bootcamp woes.
My Role: As both a UX researcher and UI designer, I was responsible for every phase of this project. From planning and prioritization; conducting surveys, interviews, and data-driven research; to the design, prototype, and testing of a MVP.
Problem Statement
One of the biggest problems that students and workers face is task prioritization and time management. According to Development Academy, 82% percent of people do not have a dedicated time management system. With more and more people working and studying remotely, time management and task prioritization have changed, as have the lifestyle of millions of people worldwide. While working from home might make you more productive, people are more sedentary than ever. With anxiety and depression on the rise, it is more important now than ever to make space in our schedules to take a break, breathe some fresh air, or exercise.
My mission was to give users a solution to their time management issues and to also incorporate a much-needed wellness factor into users' hectic schedules.
Project Goals
1. Allow users to manage their time effectively
2. To help users prioritize their tasks efficiently
3. To tailor to users' wellness needs
Phase One: Research
Word Cloud
To begin my research, I started off conducting a survey that received over 40 responses and conducting around 10 interviews to a diverse demographic. This demographic included people ages 21-50, including students, people who work from home, and people who exercise regularly.
My survey centered around ways people currently manage their time, tasks, and ways they de-stress. Not surprisingly, my data matched that of current statistics for 2020. An interesting revelation that the data revealed was how people felt when they had a lot of work to do, but not enough time to complete it. With that data, I took all of the responses and grouped them in a word cloud. A majority of users experience stress and anxiety when they have a lot of work and no time to do it. Others experience feelings of panic and of being overwhelmed. I knew that along with providing users with a way to organize their time and tasks, that there had to be a component to help de-stress users.
With this data in mind, I set out to complete a Lean UX Canvas and a Competetive Analysis as my next steps in my research.
Findings
Through the surveys and interviews that were conducted, I gained various insights into how people manage their time and tasks. There was an overwhelming lack of structure to people's schedules, especially since Covid-19 started.
One of the main pain points users had was not knowing how to effectively manage their time and tasks, especially when they had a lot on their plate. Another pain point was not being able to find enough time to do activities that de-stressed them because they had a lot of tasks to complete. One more pain point was that users described themselves as easily distracted and procrastinators. They found themselves looking at their phones and aimlessly scrolling through social media when they had a deadline near.
Another interesting insight I gathered from the competitive analysis was how helpful Pomodoro and other similar time management apps are for folks with ADHD. During competitive analyses, I like to check out other app's reviews. You can really gather some great insights from reviewers. Here is where I found how useful Pomodoro timer apps are for folks with ADHD, and others that find it difficult to prioritize and manage their tasks. Pomodoro apps have been really helpful to add structure and limits to work and break times. I knew something similar had to go into the app I was going to create.
As someone who struggles with time management and task prioritization myself, it helped me empathize with others who shared the same struggles.
Part of the Competetive Analysis
Phase Two: Defining the Problem
User Persona
User Journey
User Persona
With all of the data compiled and collected, we created our User Persona, Natalie. Creating a user persona allowed us to further empathize and put ourselves in the shoes of users who had lacked time management and task prioritization skills.
Natalie is a university student from Madrid. As she is nearing the end of her time at university, her coursework has gotten more intense than ever. She's always been a procrastinator but with so much work due this semester, Natalie is looking for a change.
Main Pain Points:
-
Natalie has a track record of forgetting to write down due dates and assignments.
-
Natalie has so much work piled up that she often misses out on hanging out with her friends or exercise.
-
With deadlines nearing and no end in sight for her work, Natalie is full of stress and anxiety.
-
Natalie doesn't manage her time well, resulting in no time for things like yoga or exercise - activities that usually destress her.
Phase Three: Ideation
Finding Solutions
After understanding all of the data and analyses, I began the ideation process. To kick everything off, I started with a brainstorming session. Continuing with my ideation sprint, I took those ideas that came out of the brainstorming session and I categorized them into an affinity diagram.
After completing these ideation exercises, I moved on to a MoSCoW analysis. This allowed me to prioritize which features and solutions were going to be featured in the first iteration of my MVP.
Some must-haves for the app would be a Pomodoro timer, to-do lists, prioritization features, and a "zen" feature that would allow users to add breathing, meditation, and exercise into their schedules.
With the prioritized solutions in mind, I set out to create a user flow. This user flow would be centered around someone, in this case, Natalie, adding a task to their to-do list, prioritizing it, and starting the timer and completing the task. As this is one of the most frequent task flows of the app, I thought it was important to see the user flow visually in case there needed to be any changes made.
User Flow
Site Map
Phase Four: Prototyping
Low Fidelity
After a round of Crazy 8's, I set off to do some lo-fi prototyping. When I do lo-fi prototyping, I like to set a timer for myself to get things done. As I was setting my timer I thought to myself, why don't I try out the Pomodoro method myself? So I did. I gave myself about 10 minutes to complete my lo-fi prototype, took a short break, and shared it with some friends for testing.
Usability testing showed that the app blocker feature I wanted to implement wasn't doing too well so I decided to put it on the back burner for this iteration.
One thing that I really love about lo-fi prototyping is how easy it is to put your ideas on paper (in this case iPad). I find it really relaxing and fun to imagine how your app or website will look like digitally. It's important to keep in mind the limitations of software like Figma or XD, and also development limitations. While it might be easy to draw whatever you want on paper, you always have to be realistic and think, "Will this actually work?" If not, you'll end up with more work to do and your colleagues over at development won't be too happy with you.
Wireframes
Mid-Fi Wireframes
Iterations of the "Breathe" settings
The UI
Colors
Tone
Shapes
Colors
Mood Board
With the wireframes tested and updated, it was time to work on the UI of the app. To start, I created a mood board by selecting photos that represented the look and feel of the brand. Based on a brand attribute test, the brand had to evoke feelings of focus, concentration, order, and relaxation.
One thing that I wanted to incorporate in this app was color theory. This is the idea that certain colors evoke certain feelings and mindsets. Because the interface of the app was so simple and distraction-free, the colors of the app should do the talking. I ran a color test, using a wide variety of colors and what emotions they evoke. With the results of that test, I was able to choose the colors for the different states of the Pomodoro timer. The focus stage of the timer would be green, pink, and orange: colors that evoke feelings of concentration. The rest stage would be blue and turquoise: colors that evoke relaxation. The zen stage would be a mix of light orange, pink, and green: colors that evoke mindfulness and energy.
Style Tile
The iconography of the app was changed in this final iteration of the style tile based on feedback given after the mid-fi prototype was tested. Something else that came up in the testing were the micro-interactions of the app. The pullout menus of the app were meant to be airy and "breathe" when opened and closed. These micro-interactions were validating during testing.
Space, Shadows, & Alignment
Solutions
Pomodoro
Timer
By using the Pomodoro method, users are able to focus on tasks that need to get done that day. User focus for 25 minutes, rest for 5, "zen-out" for a desired amount of time, and repeat until their tasks are finished. This method has been proven to help students and workers achieve their goals without getting burnt out.
Users can stick to the default timer, or customize it to their liking. Users will also be able to choose the "zen" feature that they most want for that session. Guided breathing, guided meditation, or exercise.
Organize and Manage
Your Tasks
With a user-friendly to-do list, you can keep track of your tasks, manage them, and prioritize what needs to get done first. You can also keep track of tasks that you've completed as well.
Your tasks don't always have to be centered around work or assignments. You can also add in your daily chores or any errands that you might have.
Work and Relax
The days of forgetting about mental health and self-care are gone. With centrd, you can plan in "zen" into your day. You have the option to do breathing exercises, meditate, or do exercise - all scheduled throughout your day. Make getting work done relaxing and less stressful.
A pain point many users had was not having enough time in the day to relax, work on mental health, or exercise. Being able to fit in those moments to de-stress into your schedule has greatly benefitted many users.
Keep Track
With centrd, you can keep track of all of your stats throughout your work or study time. You can also check up on your friends and see how they're doing.
Need that extra push to get you going? Centrd has teamed up with a multitude of companies to provide motivating prizes to help you along your journey.
High-Fidelity Prototype
Conclusions
This project was filled with firsts. It was my first individual project and it definitely had its challenges. Part of those challenges were managing my time, prioritizing tasks, and focusing to get things done. This is something that I have personally struggled with throughout my life. Putting the Pomodoro technique to the test with this project really saved my life. I was able to focus and get things done and have time for myself at the end of the day - something that I hadn't had for a few weeks. I'm glad that through this project was able to discover a time management method that worked for me, and that I was able to design an app that could help others in the future.
Overall, I'm very proud of this project and the feedback I received. Of course, improvements can always be made. Your first iteration is never your last. That's something I really like about UX/UI design. Things are always changing and evolving. Just because something looks good today doesn't mean it'll look good one week from now. One thing that I would like to expand on is designing for the future. To be ahead of the curve in terms of design and function. I'm excited to continue to learn and grow in my career as a UX/UI designer. Let's see where this road takes me.
Landing Page