Timeful for Mac

Put Your To-dos on Your Calendar Smartly

UI/UX
MAC
PROTOTYPING
SCHOOL PROJECT
DEC 2014

OVERVIEW

Timeful is originally an iOS app that allows to create to-do list and then assign it to your calendar smartly. I really loved this app and I've been longing for a desktop version of it so badly that I designed one for myself as the final project for my Digital Development Workshop.

MY ROLE

I sketched out the wireframe and application flow, designed the visual based on its original UI and branding, and finally hand-coded the prototype using HTML, CSS and some Javascript.

What is Timeful and Why I Want It on Desktop?

Timeful is an iOS APP that combines your calendar and your to-do list. It analyzes your calendar and smartly schedules time for your to achieve these goals.

Before it got acquired by Google in 2015, I loved this APP so much because it keeps crazy grad school life well-organized and helped me finished a lot of items in my to-do list that would probably stay forever. But creating tasks on my tiny phone has always been an unpleasant experience. Plus, since the phone screen is limited, you can never see your tasks and your calendar side by side. 

That's why I wanted an desktop version of it so badly: I believe with bigger screen, the input experience can be better and the interaction of scheduling a task can be more direct.

Sketching Out The Concept

To-do List Is Meaningless Until You Put It On Your Calendar 

And there's a lot more you can do on bigger screen when you put your calendar and to-do list side by side. I decided on 3 key interaction in terms of scheduling a task:

1. Drag and drop your tasks to the calendar
2. Click on the task to automatically find a time on your calendar
3. Click on a button to automatically put all tasks on your available slots in your calendar.

What About Those Half-Done Tasks?

Let’s just admit it, things just happen, and you’re not gonna finish everything on your to-do list all in time. So what can we do about these in between status where we finished just half of the task? Give it a check mark? That’s cheating. 

And here’s what I will do. I’ll immediately create a new task on my list says “task part 2” and schedule another time for it. The experience will be like:

1. Click the task you finished half
2. Select "Continue on..." on the pop-up menu to select a time you want to continue this task
3. Then a new task named "part 2" will be on your list and calendar.

What About Productivity? 

Finally, I'd like to know some data about productivity. 

I wanna know my achievement of week: how many task do I have this week and how many did I accomplished.


I wanna know my most productive hours and also my working status each day through out this week.

Wireframe and User Flow

Then I created wireframes to map out the flow.

Visual Design

Next, I finished visual design using existing styles.

Prototyping

Based on the design, i hand-coded the prototype using HTML, CSS, and some JavaScript. Here's a short demo video for the interaction.

Thanks for reading :)