A web extension to help you stay on track
This case study is a work in progress! Feel free to contact me for more in-depth of my work!
Timeline 48 hours
Role Designer
Tools Figma
Problem
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 and increases burnout and stress as they struggle to meet deadline after deadline.
Solution
I designed a web app to help users time-block their task and breaks
In-State Tuition Tool
A web app for an undisclosed non-profit to help undocumented students access education and financial aid
This case study is a work in progress! Feel free to contact me for more in-depth of my work!
Timeline 16 weeks
Team 4 designers, 2 PMs, 2 developers
Role Designer, Researcher
Tools Figma
Problem
Many students pay up to 3 times more in out-of-state, than in-state tuition. I worked in a team of 9 to create a tool that helps students determine if they qualify for in-state tuition and financial aid, and next steps if they don't qualify. Due to privacy, I can only share a high-level overview of the design.
Solution
My team and I designed a tool to help students determine their eligibility and if applies, their next steps to qualify for in-state tuition
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.
In-State Tuition Tool
A web app for an undisclosed non-profit to help undocumented students access education and financial aid
This case study is a work in progress! Feel free to contact me for more in-depth of my work!
Timeline 16 weeks
Team 4 designers, 2 PMs,
2 developers
Role Designer, Researcher
Tools Figma
Problem
Many students pay up to 3 times more in out-of-state, than in-state tuition. I worked in a team of 9 to create a tool that helps students determine if they qualify for in-state tuition and financial aid, and next steps if they don't qualify. Due to privacy, I can only share a high-level overview of the design.
Solution
My team and I designed a tool to help students determine their eligibility and if applies, their next steps to qualify for in-state tuition
