to-do app  |  2021
Quick exploration of a to-do list flow
The Objective
Given a week to complete, creating a to-do list flow was a great challenge to work my product designer brain. From research to prototyping, this quick exercise explores the methods of UX and storyboarding.
Multiple screens of the To do list app on a diagonal angle
Research
Finding that “ooh!”
With the time being a week (7 days), I quickly concluded each day would be a new task. The research was first off the list. I read multiple articles from a variety of sources to understand the behaviour of the need for lists, the sense of accomplishment and the type of users. After establishing a specific audience, I researched competitors, and listed out common or unique features that drove users to use them. I then simplified the list to a few features which I could create a simple user flow the next day.
Image showing competitors, app features and brief exploration
User Flow
Tiny tasks, multiple interactions
Since user flows can get big and messy quickly, I capped the user interaction into 3 steps: create new tasks, check off tasks and view old tasks. Even within these constraints, there were micro-interactions that needed to be addressed thoroughly. I started with a simple user flow, mapped out the important states by colour, and added functionalities that would benefit the user's needs.
Image of wireframes and interaction exploration
Design
Simplicity before Complexity
With the time limit, after creating the user flow, I created a low fidelity wireframe to get a sense of user interaction. This is where I tweaked parts of the flow and interactions that were confusing or weren’t working as well. Functionality had to be clear. Since this was a task-based app, the basic functionality of the app was the priority, not aesthetic (that’s marketing).
5 screens of app wireframe
Only when I felt that all the basic functionalities were in the right place did I start the aesthetic exploration to give the app a personality of it’s own.
Icon and colour palette design
To Do App illustration design
Two screens of final design- making a list and the list
Three screens of final design- past tasks, completed screen, completed pop up message
Storyboard
Creating a connection to the app
I could have finished this project a day sooner but presenting this app concept by just showing the prototype felt flat and something that people were ready to say “ok cool, next.” I needed to create some kind of emotional connection with the audience before presenting the app. And in comes my illustration abilities (limited) to really let the audience enjoy the presentation process.
Images of storyboard showing the usage of the app
Thanks to reading, now enjoy this prototype :)

Other projects you might wanna see :D

Back to Top