Hypertask
Design exploration for Hypertask, an AI-powered todo list app for students with busy schedules.
Introduction
The idea for this app came from my own experiences as a student trying to manage classes, personal projects, hobbies, extracurriculars, etc. It's not easy to balance everything!
One method I tried was time blocking—where you "block" off your day into small chunks each dedicated to particular tasks. I found this really helpful, (well, for about two weeks) but spending half an hour every afternoon creating twenty calendar events encompassing every single task, and then slotting each one into place, grew old pretty quickly. I wondered if technology could help me micromanage myself more efficiently.
The idea
My basic idea was that we could use ML/AI (wow, I really bought into the AI hype) to more efficiently organize a schedule. Users would prioritize their tasks into priority levels 1, 2, or 3, and give an approximate estimate for their duration. Your Brilliantly Organized Scheduling System (BOSS for short) would then take over from there, creating your schedule while accounting for events already on your calendar (e.g. swim practice, violin lessons, the movie trip you never thought would make it out of the group chat, etc.) as well as more subjective factors like reducing blue light exposure near bedtime.
The design
Enough talking. Let's look at some pretty pictures.
You might be able to see hints of the psychedelic, frosted glass-like style I was fond of at the time.
I split functionality up into two side-by-side panes, all set on top of a colorful gradient background à la Arc Browser (which is worth checking out just for the excellent interaction design if nothing else).
On the left, we have a small section of the card dedicated to the user's profile and settings. Below it, a list of tasks—this is the real meat and potatoes of the app!
Users can add tasks for each day, which could vary from the 15-minute "send email to Jonathan" to the three-hour "write my history essay". Clicking Organize would then send all these tasks to the right side of the screen - the calendar itself.
The tasks organized by BOSS (yep, we're sticking with this name) would then show up on the right pane, combined with tasks from the user's Google Calendar. The cards with solid backgrounds are Google Calendar events, and the others are tasks from the todo-list.
Below each AI-organized task is a short blurb describing why it was placed there - e.g. "reduce blue light explore before bed" or "relaxing after dinner."
Where do we go from here?
They say hindsight is 20/20. And it really is, because I can think of many things that I would do differently today.
The scope of this app was much too narrow. My original idea was much more complex, incorporating all sorts of data sources and a more capable personal assistant. In the process of paring this down to a minimum viable product, something essential was definitely lost.
User experience considerations. I think I did a decent job at creating a piece of eye candy. But there are a few issues with usability that I'd address if I could do everything again. For one, I think the difference between calendar events and todo-list tasks could be made more clear. In addition, there are a few places throughout the app where contrast & text size probably wouldn't meet accessibility guidelines.
year
2024
tools/medium
Figma
Electron.js
Desktop