Flo
A web extension to help you stay on track
I challenged myself to a 48-hour design challenge to push my problem solving and design skills and speed.
Many people struggle to complete tasks on time. Their distraction and procrastination take over, leading them to take a lot more time than they actually need. This decreases productivity, increases burnout and stress as they struggle to meet deadline after deadline.
Problem Statement
We tend to spend more time than we need on tasks. How might we help users stay on track and spend less?
Outcome
I designed a web app to help users time-block their task and breaks
Tools
Figma, Adobe Creative Suite
User Research
Results & Findings
Since I was limited on time, I turned to people’s discussion on online public platforms like Reddit. This was a time-efficient way to learn about people’s productivity, task, and time management, as I didn't need to conduct interviews or surveys.
“Work expands to fill the available time”
Parkinson’s law states people tend to use up all the time they’re given for a task, even if they don’t need it. This leads people to procrastinate and underestimate the time it takes to actually complete a task.
Overwork and burnout
People often fail to take proper breaks because they procrastinate. They never feel like their task is finished, so they never take a break. This leads them to feel overworked, burnout, and stress.
Key features
Many use to-do lists to be productive, but without a specific time or date, they can be counter-productive, pushed back or worse, forgotten.
Flo is designed to help users stay on track of their to-dos by introducing "flo time"— focused, time-blocked sessions for each to-do. Combining to-dos with an on-screen timer and tracker, Flo offers an easy, seamless experience way to stay focused and productive.
Time block your flo time
Flo helps you schedule focused, time-blocks for your to-dos. You can also "snooze" for my time.
Flo works in real time
Flo works in real-time, reminding you when it's time to work, take a break, or switch your tasks.
Browser
Schedule flo time anytime, anywhere on your browser.
Calendar
Flo's calendar plug-in makes it easy for you to schedule flo time into your calendar.
Browser
Schedule flo time anytime, anywhere on your browser.
Calendar
Flo's calendar plug-in makes it easy for you to schedule flo time into your calendar.
Time block your flo time
Flo helps you schedule your . If necessary, users can
Flo works in real time
Flo works with you in real-time, reminding you of your task and when it's time to take breaks and switch tasks
Browser
Schedule flo time anytime, anywhere on your browser.
Calendar
Flo's calendar plug-in makes it easy for you to schedule flo time into your calendar.
Time block your flo time
Flo helps you schedule your . If necessary, users can
Flo works in real time
Flo works with you in real-time, reminding you of your task and when it's time to take breaks and switch tasks
Design Iterations
Before and After
Improve visibility of content on the calendar
Improve visibility of content on the calendar
Improve clarity of hover states with text labels
Improve experience of timers
I added a countdown timer to track users tasks. However, users expressed timers, especially counting down, puts them under pressure, adding anxiety.
After
I replaced the timer with a progress bar. Rather than seeing the time decrease, they see their progress increase, creating a positive user experience. The timer is still visible, but only
on hover, to keep its functionality but …
Before
Before
When users hover over Flo's icon, the icon increases in size, but the difference is not clear and does not communicate the state's function.
After
When users hover over Flo's icon, the text label 'Flo' appears. This communicates and improves the clarity of the state's function.
Improve experience of timers
Before
I added a countdown timer to track users tasks. However, users expressed timers, especially counting down, puts them under pressure, adding anxiety.
After
I replaced the timer with a progress bar.
Rather than seeing the time decrease, they see their progress increase, creating a positive user experience. The timer is still visible, but only
on hover, to keep its functionality but
Change in background = change in environment
As Flo transitions between tasks or breaks, the background changes to reflect change in "environment". Research shows changing environments promotes productivity, helping users refresh and refocus.
After
Flo was static and consisted only one background.
Before
Before
Flo was static and consisted only one background.
After
As Flo transitions between tasks or breaks,
the background changes to reflect change
in "environment". Research shows changing environments promotes productivity,
helping users refresh and refocus.
