Wunderlist Personal Project

Overview

Wunderlist is a simple to do application for all tasks that matter to you. Whether you’re planning a wedding, sharing a shopping list with a partner or managing multiple work projects, Wunderlist helps you tick off all your personal and professional to-dos.

Wunderlist has apps for every platform. Check out their download section to find an app for your device.

I wanted to reimagine and redesign Wunderlist to solve real pain points. There's so much more that it can do to help users get more stuff done.

The Problem

Wunderlist makes it really easy to capture tasks. Users can create lists to be more organized. There are features such as subtasks, notes and file attachment for those that want to add more details to their tasks. Then there are features that attempt to help users prioritize and complete their tasks such as starring and setting due dates and reminders.

Even with all these features users, like myself, are unsuccessful in managing their to-do lists effectively. In this exercise, we are going to take a dive into finding out why and how we can empower users to complete more tasks in Wunderlist.

Research

I tried to focus my efforts in finding research of user behavior using task management apps like Wunderlist. Ordinarily, I would conduct user interviews to capture pain points from users. Without any insights on what to start looking for, I started asking myself who are the users, how are they using Wunderlist, what drives them to complete tasks and what are their user needs and desires.

I need a place to start so I started writing down pain points from my own experience using Wunderlist. This helped me gather the main pain points with task management apps and begin my search online for research articles.

I found a study done by iDoneThis. It wasn’t too surprising other people experienced the same pain points as I did. In fact, 63% of professionals write to-do lists, but 41% percent of all to-do list items never actually get done.

Too many tasks

Wunderlist, like many task management applications, is great at capturing tasks. Users dump all their tasks and organize them in lists so they feel great about writing them all down. But now there is a problem — there are way too many tasks and users don’t know where to start.

Unplanned tasks

Many users fail to think and plan their tasks when they write them down. Tasks are often added without knowing what needs to be done, how long it will take and when it needs to be done by. As a result, a user reviewing their long list of unplanned tasks do not know where or how to start.

Poor time management

Users give themselves too much time to complete a task. The more time that is given to do something, the less likely it will be finished in the timeframe. Add that to a future of unknowns, interruptions and changes that come in life, it becomes even harder to complete tasks.

A LinkedIn survey reported that the most common reason for failure to get through a to-do list was unplanned tasks, such as unscheduled calls, e-mails, and meetings.

The Solution

I wanted to dig into what helps users complete tasks. I found research online (Fast Co., Harvard Business Review) that recommend scheduling tasks in a calendar. It forces users to think about the task and plan how long it will take and when to do it. Many people in this digital age live and work out of their calendars for both personal and work — it tells you how busy your day is, where to go and what to do. It also forces people to prioritize which meetings or events to go to when there are scheduling conflicts. Which task is most important for this day? How long will it take? When can it be done?

I like to write a big idea statement for projects like these. It is a guiding principle that I use to make design decisions during sketching all the way through to high-fidelity visual design.

Empower Wunderlist users to complete their tasks by finding free time (gaps) in their calendar for their most important tasks for the day.

Technically feasible

A view of both calendar events and tasks would help users prioritize and plan their tasks during time gaps. Before going into design, I wanted to make sure it is technically feasible to sync calendars to Wunderlist. It is — adding support for various accounts like Google, Outlook, iCloud, etc will allow users to sync all their calendars to Wunderlist. Alternatively on iOS, users can allow Wunderlist to access the iOS calendar.

Adding a step to sync users calendars in on boarding will help users properly setup the new Wunderlist.

Finding commonalities between tasks and events

In order to display both tasks and events in a schedule view, I completed a feature audit to identify common elements and primary actions for tasks. The common elements between tasks and events are the name, list/calendar association and start and end date and time. The primary interactions are complete and schedule a task and will be the most important to solve for.

Structure

I explored the structure for both desktop and mobile platforms by drawing a couple of sketches. I want to make both experiences as consistent as possible, but also leverage certain aspects of each platform to improve the experience. My second goal is to make it simple so users can focus their energy on their tasks, but also powerful so they can adjust their schedule when something comes up.

In the first two sketches, I wanted to figure out how to display tasks with events and also start exploring interactions to schedule tasks. The split view wasn’t simple enough. I had concerns with having two sets of views, list view and schedule view, shown at the same time. Users may not know where to look and which side to interact with. In addition, the interaction of dragging tasks to a calendar to schedule a task worked well on desktop. However, on mobile it just didn’t work — there is not enough space for a split view and there are is a usability problem when it comes to precise dragging of elements.

Iterating on the split view concept, I tried a different structure using tabs. Schedule, List and Starred tabs are views that alternate between the same set of tasks (Nielsen Norman Group on tab usage). The views are much simpler allowing users to focus on a view depending how they want to tackle their task. The views are on the the list level, so each list will have the same three views. This structure works great on mobile and desktop keeping them consistent but also allowing me to leverage the additional space on desktop.

Simple interactions

I explored how to complete and schedule/reschedule tasks in any of the three views. It is important to have the same actions accessible in all views giving the user mobility to complete and schedule/reschedule tasks in any view. This also establishes a predictable pattern that the user will remember. The complete and schedule interactions need to be as simple as possible. It is especially important in supporting the insight that users need to adapt to their ever-changing schedule.

I ended up with a swipe solution for mobile. It is clean and simple with the task name and the starred status. A left-to-right swipe will mark the task complete and a right-to-left swipe will open a schedule panel. For desktop, showing the actions on the task object is best for discoverability and usability.

The schedule panel makes scheduling a task simple by suggesting times based on the user’s calendar availability. It can learn from user’s past reschedules and decide what duration and time slots work best. The suggestions alleviates the need to review the calendar and decide where to schedule it.

The Outcome

I chose to skip over wireframes and jump straight into high-fidelity visual designs to save some time. In order to have a consistent look and feel for desktop and mobile, I started with mobile first. I did a few iterations playing with shapes and colors mainly to distinguish between events and lists. This is what I ended up with.

I wanted the interaction to feel intuitive, simple and a little fun. Marking a task successful is a quick swipe to the right. The use of colors and a check mark icon are used as feedback. With more time, I would like to explore an interaction to easily unmark the task (undo action) so users can correct any accidental swipes.

The user can schedule or reschedule a task easily by swiping left. A panel animates up from the bottom giving user suggestions of free time in their schedule.

Desktop

Designing for desktop in addition to mobile was part of my workflow from the very beginning. It was necessary to consider both platforms during the design phase to reconcile any challenges in either platforms. The outcome is a consistent design and structure for both platforms. There are some differences such as interactions for marking a task complete and schedule tasks. Due to space constraints in views such as the week view, the mark as complete and schedule tasks are hidden and shown on hover. Actions on hover always have some discoverability concerns, which is why the same actions can be performed on the task detail panel. This panel opens whenever you click on a task.