Nine: Todo List App

  • UX
  • UI
  • HTML
  • CSS
  • Responsive
Nine

View Live GitHub Repo

I'm a huge fan of productivity articles, particularly on Lifehacker. I'm always experimenting with new ways to remain focused and on task longer. One of the ways I do this is with the todo list. With so many options available, I have yet to settle on an app I really like. I was tasked with designing one of my own.

Defining the Problem

As simple as todo lists are conceptually, there are numerous approaches, so I began this design exercise with a bit of research. People often have a tendency to struggle with not only logging too many tasks, but prioritization of tasks as well. Both of these issues can make it difficult for an individual to complete tasks in a timely fashion.

One approach that aims to solve both issues is the ā€œ1-3-5ā€ list. It expects only that 9 tasks are to be completed, with 1 major task, 3 moderate tasks, and 5 small tasks. Writing tasks on paper is by far the simplest way to maintain a todo list, so I had to make sure my design would enhance this simplicity, rather than detract from it.

Design Process

Productivity is a huge app category, but I did not find any that approached to-do lists using the 1-3-5 strategy. I began by reading some articles about this strategy on the web, writing my thoughts out on paper.

Sketches

Writing allows me to move to sketching seamlessly. As I began to draw some concepts for the app, I tackled different approaches to the design, deciding that, while the 1-3-5 approach lends itself to a hierarchical design, simpler would be better.

Todo list thinking process and sketches.

Delivering the Solution

Due to the simplistic nature of this project, I decided to design in the browser. I coded the app in HTML5 and CSS3 using Sass and the Bourbon mixing library as a framework. I also added some basic interactive magic. There are a few bugs Iā€™d like to work out as I continue to study JavaScript and jQuery, but for now, it gets the job done!

You can view this product live, or check out the GitHub repository.