To-Do Planner: the Wireframe

Planning out a day’s work is hard because we don’t usually do them. While to-do lists are useful for getting a general idea of what needs to be done, it’s still up to our frail minds to decide the minute-to-minute work. As a result, we may spend too much time taking breaks during work items, or just procrastinate on work in general until it’s too late.

The To-Do Planner app aims to fix that. It helps the user plan out a day’s schedule from a to-do list. The user just needs to put in the tasks for the day, and the app would generate a timetable, complete with time blocks for each tasks and coffee and lunch breaks in between. This way, you can make more efficient use of your precious time.

Design

Before getting into sketching, I took a moment to draft out a list of functionalities of the app, and a rough information architecture. Besides the most basic functions of a to-do list with checkboxes and an accompanying schedule chart, I would like the user to be able to set estimated duration, due time (in case the task needs to be done by earlier than the end of the day) and additional texts for a task item. Another functionality is categories — when the user chooses the same category for multiple task items, the app would try to make sure they are not scheduled back-to-back, just to make the day interesting. Finally, the user needs to be able to rearrange task items to prioritize them. The app would then try to schedule higher-priority tasks earlier in the day to make sure they get done. Obviously, a lot of these things needs to be researched and tested through user research, but I feel that these are relevant functionalities that an user would need, in a design exercise like this.

The functionalities in the app naturally lends to a two-tab layout — to-do list and schedule. After coming up with the information architecture, I then sketched and iterated on the interface design, and after reaching a point where I’m comfortable with it, went to laying out the wireframe.

Wireframing

I used Figma for the wireframing. While Figma, like Sketch, is more geared towards higher-fidelity visual and interaction design, I have become accustomed to the tool that I didn’t think I would gain much from learning a more specialized wireframing tool like Axure on the spot. Besides, there are excellent wireframing kits for Sketch that I can take advantage of in Figma as well. I created the wireframes in grayscale using generic UI components, so that I can focus and get feedback on the overall interface design.

Evaluation

The feedback from my peer review group was positive. They had no trouble understanding the utility of the app, and the functionalities designed for the app felt natural to them.

There was some confusion over what some of the UI components meant — for example, the 3-strips icon on a task item that was supposed to signal draggability was lost to my peers. I’d expect, however, that these affordances would become more apparent with the prototype was higher fidelity and interactive.

Additionally, one of my peers suggested that I look into expanding the scope of the app so that the user can plan out tasks in a few days or a week in advance, rather than having to put aside time for it every morning. After some consideration, I decided that it was a good idea but a bit overambitious for a MVP.

We also discussed the color scheme for task categories, as they need to be of different brightness and saturation values for the app to be usable for the colorblind.

And then it was time to take these feedback and go to the next step — interactive prototype!