Claro
End to End : Educational Productivity App
Background
There are a lot of distractions in the world and sometimes this prevents us from getting our to do list completed. This case study explores the development of Claro, a mobile application that helps users be more self aware of their mood and encourages productivity.
The product utilizes a mood tracker, pomodoro timer, and AI assistant to help users stay focused on completing their tasks.
“Claro”, a phrase commonly used in the Spanish language, meaning “clear.” Claro emphasises mental and task clarity, which is crucial for productivity.
“A clear mind produces better results”
Problem
Roughly half the population (57%) of the US think they are addicted to their phones.Our phones can cause constant distractions and a link to a disruption in our productivity.
While it can be a tool to aid us it can also disrupt our work flows causing us to lose concentration on school, work and everyday tasks.
Solution
An AI productivity application that educates users on mood awareness, blocks distractions, and assists them through task completion. We want your goals, tasks and priorities clear. Clear from distractions, making better decisions and working with intention.
My Role
Researcher,
UX/UI Designer
Tools
Figma, Zoom, Lottie
Animations
Duration
100 hours
Device
Mobile
Competitor Analysis
I reviewed some of the top productivity applications, while there were overlapping features there seemed to be a gap in app harmony. The applications appeared to either lack customization or were too overwhelming. These limitations on task dependencies and lengthy set ups leaving users overloaded and unmotivated to continue using these applications.
User Interviews / Survey
Following a competitive analysis, I conducted user interviews to learn more about users experience, pain points and challenges. It was interesting to learn more about users motivations, how they understood their needs, and their road blocks. I conducted user interviews and survey responses to get more insight on users productivity.
“Not being so addicted to my phone”
“I wish I had the discipline to be more organized and write things down. I tend to keep a lot of information in my head ... If I had the ability to do that, then I think I can be more focused therefore I wouldn’t be so distracted.”
“Myself because I just get distracted easily or if I’m tired, I have a hard time staying focused and it will take me a lot longer to complete what I need to get done. Sometimes if the task seems overwhelming, it makes it harder to start... it’s hard for me to compartmentalize and push those aside to work on the things I need to get done.”
Research Synthesis
Taking the information I gathered from the user interviews and surveys, I used an affinity map to organize the information and identify patterns in the connections. This research helped inform the need to design certain features, such as the app blocker during focus time to minimize distractions and the mood tracker to allow users to educate and be more self aware of their mood to maximize productivity levels.
Affinity Map
Key Insights
Social Media/Phone
10/12 survey participants noted their phone or social media was something they found distracting
More Discipline
Participants note needing more discipline when trying to stay focused. Participants note needing deadlines and in some cases consequences.
Users can feel overwhelmed with task paralysis not knowing where to start. Once they feel distracted they have a hard time staying focused
Overwhelmed
User Persona
I reviewed some of the top productivity applications, while there were overlapping features there seemed to be a gap in app harmony. The applications appeared to either lack customization or were too overwhelming. These limitations on task dependencies and lengthy set ups leaving users overloaded and unmotivated to continue using these applications.
Feature Roadmap
The user pain points and insights then guided the feature roadmap which I explore the feature priorities.
Sitemap
From these user insights, I created a site map to create a blueprint to breakdown the structure and content of the product.
User Flow
I created the user flows to picture the path that the user might take through the features. I walked through the possible decisions and interactions they might make through that task.
Task Tracker
Helps users manage tasks and break them down into smaller intervals of time.
Mood Assessment
Daily mood check in to assess our daily needs. Our mood affects our physical and mental state which in turn can affect our productivity.
Rewards
Daily streak rewards to keep users accountable and engaged.
Branding
Mood Board
I wanted to develop a calm and motivational mood for the application. Something simple and intuitive to not overwhelm the user.
Logo
Logo shows a “C” in a play button which is one of the main features in Claro. Claro’s main recurring icon is a play button to represent starting our goals.
UI Kit
The focus for the UI was intuitive straightforward experience. I wanted the tone to be friendly, fun and warm while also having a calming feel. The warmth of the yellow is meant to activate participation and attention while the blue draws the user to focus.
Wireframes
Low Fidelity Wireframes
After creating the feature map and task flows, I sketched out and created low-fidelity wireframes to layout the structure and brainstorm concepts.
High Fidelity Wireframes
Once tested, I added in the elements from my mood board and UI kit to give users a visual representation. The colors, animation and icons for this helped give users clarity for the design vision and interaction.
Success Metric
Task completion (5 participants)
User rating usability (Scale of 1-5)
4.5
How clear were the tasks? (Scale of 1-5)
4.5
App satisfaction (Scale of 1-5)
4.8
How long it takes for a user to complete a task
Around 30 seconds to 1 minute
Errors made
0-1
Is this something the user would use?
50%
What are areas for improvement
Mood Tracker
Users would like to use this function but fear that it could be a function that could be overlooked if not reminded. They are looking for a stronger connection because they are looking for tools to help them with their moods
Reward System
Users were interested to learn more about the reward system. Users do feel a connection to daily streaks to keep them accountable
Usability Test Results
t
User Feedback
Received positive feedback overall and had participants expressing interest to see how this application could further develop. Participants mentioned that the app was simple and clear. Users seemed to gravitate towards certain features and mentioned the other features as nice to have but maybe wouldn’t be something they would occasionally use. One user brought up that adding the ai to the timer portion made sense as it still minimizes the distraction from blocking apps but still allows the user to obtain information they may need help with.
My objective for user testing is testing the usability for the following features inputting mood,
setting up a new task, and user checking to see if they've completed their daily streak
Iterations
Iterations to prioritize
Taking the user testing feedback the flows make sense but to provide further clarify to the user I needed to work on clearing up any UI that was not intuitive. The following items cover the edits I will be addressing.
Users noted some questions and confusions on icons that weren’t labeled
Adding guiding screens such as
Warning screens guiding the user to the next step
Mood assessment, instead of a pop up adjusting to a full screen to indicate results to the user
Adding titles to icons to minimize any confusion
Adding a reflection calendar users can reflect on log
Updating task track in an urgency order
Prototype : Claro
Keeping you in check when you need a little extra accountability. Sometimes you need to just check in with yourself to get your priorities straight
Daily mood check ins to make sure your needs are met. Reflections can improve your self awareness. This can not only affect your productivity but also how you feel physically and mentally.
CLAI is Claro's AI assistant. Meant to act as your guide whether it be accessing your mood or conducting a quick search for your flow. CLAI is here to help
Claro helps you lock in by minimizing distractions (from your phone) and helping you stay focused, and break down tasks using the pomodoro technique (interval work method; 25 min work flows with 5 minute breaks)
View Prototype
Final Takeaway
Users enjoyed the simple flow of Claros design. Throughout this product development of Claro it was interesting to work on improving user pain points and building a tool that still assists users throughout what their focus is. While Claro’s flow is meant to be simple, refining the effectiveness of the design was crucial. I noticed that I find it hard to have the balance of whether I should add labels to every icon but in this project after reflection any labels to icons really add to the user experience. It was important to address all of the users' needs allowing them to learn more about their needs, reflect and focus.
pc
About
Projects
Contact