StayBalanced.AI
This AI-powered iOS app schedules events and tasks, suggests strategies for completing tasks, and promotes a healthy work-life balance.
Objective
End to End App
Timeline
Dec 2023 - Feb 2024
Role
Product Designer
Team
Research Participants
Tools
Figma
Figjam
Google Forms
Dovetail
Calendy
Zoom
Background
According to StudyFinds, 60% of adults feel that there isn’t enough time in the day to get everything done while balancing work, errands, and chores. The average person also only completes half of the items on their daily to-do list. This never ending cycle leads to stress, burnout, and other negative consequences.
Problem
Time management is crucial to productivity, balance in life, and mental well-being. Without proper time management, individuals can experience depression, anxiety, low self-esteem, and even detrimental effects to physical health. Source: McLean Hospital
Solution
Create an AI powered productivity app that assists users with scheduling tasks and events, meeting goals, and recommending tools and methods for completing unfinished tasks.
Research
Screening Surveys
The research process started with aiming to find the differences between individuals who feel confident with their time management skills and individuals who struggle with time management. To ensure each group had approximately the same number of participants, I created a screening survey asking users about their time management approach.
Competitive Analysis
While waiting for participants to complete the screening survey, I researched existing AI-powered productivity products. The majority of these products seemed either too simple or overly complex. This observation inspired a goal of creating an app that meets a variety of user needs while also having ease of usability.
Affinity Mapping from User Interviews
I interviewed 5 users who feel confident in their time management skills and 4 users who struggle with time management. I initially expected to have to tailor my app to one of these groups, but to my surprise, both groups essentially had the same needs, goals, motivations, and pain points. The confident group just had a more consistent schedule and were more disciplined and organized. The struggle group had a more inconsistent schedule but still met deadlines, completed tasks, etc.
Interview Insights
-
7/9 research participants use Google Calendar
-
4/9 research participants had used AI powered tools such as ChatGPT
-
6/9 research participants use to-do lists
-
5/9 research participants had mixed feelings about AI
-
7/9 research participants prefer AI to be more visual
-
8/9 research participants get distracted by their cell phone/social media
-
5/9 research participants said their biggest time management pain point was balancing work and chores with personal time
-
6/9 research participants said an ideal feature would be notifications/alerts/reminders
These insights formed a persona and defined what features would be necessary for the website.
Define
Persona
Due to both groups having corresponding data, I was able to create one persona from both groups’ data.
Feature Roadmap
I listed every feature that I thought would be helpful according to my persona and affinity mapping, and then organized them in order of importance due to time constraints and for the purposes of creating a MVP.
User Flows
I initially created 2 user flows: creating a task and approving AI changes. However, I later decided that these flows could be combined into 1 flow, then I further realized I could show more of the app's capabilities by creating 2 more user flows: rescheduling an incomplete task and using a pomodoro timer to motivate completion of an incomplete task.
Design
Design Patterns & UI Inspiration
Before jumping into sketching out low-fidelity wireframes, I examined design patterns from productivity apps, calendar apps, and other types of apps that contained elements I would use in the product. Due to AI app features being relatively new, I had a hard time finding AI design patterns readily available. Therefore, I drew upon other design patterns to create AI design patterns & the UI.
Low-Fidelity Wireframes
Next I created low-fidelity wireframes using the design patterns I collected as a reference. For the home screen, I knew it would be helpful to divide up tasks and events with subtasks and “subevents.” I also made time blocks expandable so users could close some if seeing everything at once made them feel overwhelmed.
Mid-Fidelity Wireframes
Highlights
All Wireframes
To ensure the screens would work to create a prototype, I designed each screen necessary for each flow starting in the mid-fidelity stage. This made prototyping later much easier.
Branding
I wanted to create a product with a relatively minimal feel due to the nature of the app. This resulted in fairly simple branding heavy in neutral colors with splashes of the blue primary colors, purple accent colors for AI content, and red colors for errors and incomplete tasks. Although there would not be a logo featured within the wireframes, I still wanted to create one to produce an identity for the app. I began by brainstorming other words that connected to my brand words. Afterwards I sketched out some logos and brought my favorite sketch into Figma.
UI Kit
I created a UI Kit using the branding elements as a guide to establish consistent design patterns and build prototyping interactions within the
high-fidelity wireframes.
High-Fidelity Wireframes
Highlights
All Wireframes
To ensure the screens would work to create a prototype, I designed each screen necessary for each flow starting in the mid-fidelity stage. This made prototyping later much easier.
Test
Usability Testing Results
5/5 research participants did not figure out that incomplete tasks were under notifications on the first (or even second) try. It was clear that they needed a new location.
Prioritizing Usability Testing Revisions
-
Make incomplete tasks easier to find/less hidden
-
Change color of “quick date” buttons so they don’t look inactive
-
Make toast notifications more prominent
-
Add the ability to create events on the date itself
-
Show incomplete tasks on previous dates they were scheduled
I prioritized revisions keeping in mind effort over impact and time constraints.
Revisions
-
Moved incomplete tasks location to home screen, front and center, which made incomplete tasks have its own special page
-
Changed “quick date” buttons to the same blue as “cancel” & “done” buttons
Before
After
Before
After
Conclusion
Though it was challenging to find AI design patterns to reference since AI features are relatively new and the research participants had a little bit of trouble navigating the app, I feel that the product met the personas’ needs. My usability testing participants really enjoyed the “tools/methods to complete tasks” feature and found that feature the most useful.
Future Considerations
Things I would do differently in hindsight:
-
Place incomplete tasks at the top of the home page initially like I considered while creating low-fidelity wireframes
-
Use the Figma Confetti Genie plugin more (it is so fun to use and the wireframe with confetti was my favorite to design, check it out here)
-
Add a little more “piazza” to the UI, such as gradients, shadows, and highlights
-
Reference more error design patterns
-
Conduct more usability testing
Next Steps
-
Continue working on usability test revisions
-
Add more features
