As part of a design challenge, I was tasked with creating a to do list type mobile application within a 10 hour time frame.
*The following is a hypothetical application created for practice*
While performing researching, I came across an intriguing paper by E. J. Masicampo, an associate professor of psychology at Wake Forest University. He claimed that procrastinators tend to use to do lists as a tool of procrastination rather than productivity.
I looked through Reddit threads on subreddits such as r/productivity and r/getdisciplined to learn why people put off doing work.
While secondary research uncovered a myriad of reasons for stalling productivity, I chose to focus on 4 reasons to narrow the scope of the design.
I ran a moderated usability test with 5 participants in order to benchmark the site’s performance. The participants indicated that the site was frustrating to navigate, induced headaches due to information overload, and featured an outdated visual design that contributed to an overall suboptimal user experience.
When I ran Google Analytics on the site, the data indicated that users tend to click off the site pretty fast. When they do stay, they visit only a few pages, making discoverability of the volunteer and donation pages critical.
In this framework, impact (created by completing the task) is denoted by one axis while effort (required to complete the task) is another. Users plot their tasks on this graph, according to the effort and impact they assigned. The quadrant each task lands in designates its priority (i.e. “do now”, “do next”, “do later”, and “do last”).
The psychological principle of inertia states that people tend to remain in the state of mind they are in. Users can build inertia by starting with easy tasks and transitioning to more challenging ones.
This design focused completely on large task. However, adding smaller tasks created unnecessary complexity to the design, violating the requirement for the app to be simple. Moreover, momentum inspired in the user was too weak with just a simple progress bar and manually setting the priority of tasks (i.e. “high”, “medium”, “low”).
Connecting task priority back to the effort required and outcome achieved allows users to more easily see what they should do first. Additionally focusing on smaller one-off tasks rather than large tasks broken up into smaller ones allows for more simplicity in the app.
Using the cards instead of filters makes the user have to go to a separate page then press back in order to sort to-do items, resulting in an inefficient flow.
Old Design: Extra screens required to go back to home flow
New Design: Filters allow for sorting directly from the home screen.
Since “overdue” items are sort-able, it made sense to change the placement of the “overdue” items from its own list to a filtering option.
The initial design featured color coding for the different priority levels. However, the colors I picked were inverse from the traditional color schemes assorted with priority levels. Additionally, Considering “overdue” is highest priority, I increased the visual hierarchy by changing “overdue” into a tags with a box around it.
With feedback I got from testing the existing site, I redesigned World Cares Center's website by making it more visually engaging and easy to use. Below is a selection of pages from the final design.
I had a lot of fun exercising my creative muscles for this design challenge. While the UI & flows could be polished further, I think the design I came up with is a great first pass.