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.
.png)
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.
Procrastinators often find themselves unable to begin tasks due to perfectionism, overanalyzing, or other factors.
Procrastinators write everything they need to do down on a to-do list. However, this approach leads to them feeling overwhelmed as they don’t know which tasks to complete first.
Procrastinators don’t see the the reward at the end of the tunnel, they only see the hard work that is required to complete a task.
Procrastinators view the consequences of their delay as something that someone else will experience.
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.
.png)
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”).
.png)
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.
.png)
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”).
%202.png)
%204.png)
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.
.png)
%205.png)
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
.png)
.png)
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.
.gif)
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.
Designers often design things that just look pretty but fail to consider the actual usability of their work. I learned to minimize the number interactions and to keep them as simple as possible.
If I had more time, I would explore the following ideas: an onboarding experience to explain the app principles, a tab for completed tasks, a way to gamify of task completion, reminders notifications
.png)
.png)