Design: Taskly

This is an overview of my design process on a responsive task management web app called Taskly. Check out my detailed Taskly Reseach page to see how I got to this stage in the process.

 
taskly-banner-image@2x.jpg
 
 

project background

Taskly was a responsive task management web app I researched and designed for a CareerFoundry UX course. I did conducted all research activities to understand users' challenges with similar apps and their needs from a task management product. I worked closely with Pia Klancar, a professional UX designer at Cliqz GmbH, who served as the Product Owner and a mentor on the project.

 

User research and design planning

Based on my research, I identified the following insights as drivers of my design strategy:

  • Users typically keep a master list of tasks on hand and then plan a daily queue either before before bed or when they start the day.

  • Users typically carry their task queue with them so they refer to it throughout the day.

  • Users responded enthusiastically to the idea of a task queue feature, while they currently use the calendar feature most in their task management products.
  • While users often delay a few tasks beyond their deadlines, they do not view this as a major problem.

See my full research process for this project on the Taskly research page.

 

design Approach

My design strategy was to optimize users' interaction during two key use cases.

1. Planning the daily queue, which might occur on desktop and/or mobile.

2. Quickly referring to the queue during the day on a mobile device.

 

sketching Concepts

I used a mobile-first approach to design a web app that would cater to these two use cases. Deriving directly from my research, the original concept featured a Dashboard with a master list (Todo List), a sequenced tasks to focus on next (Queue), and a Calendar. 

A user could create new tasks in the master list when brainstorming their todo list.

 
taskly-adding-task-flow copy@2x.jpg
 

Use case 1: During their planning before bed or when starting the work day, users could move a task into their queue by tapping on it and selecting the Add to Queue option.

 

 
 

This Queue tab in the Dashboard would allow users to easily check back in on their queue of upcoming tasks on a mobile device wherever they were.

The Calendar feature would still let users see tasks with upcoming deadlines.

 

Wireframes

I designed responsive high fidelity wireframes for both mobile and desktop versions of the web app. When scaling up the design to desktop, I modified the Dashboard concept to allow users to see each task's progress more visually. Since my users were not especially concerned with deadlines, I replaced the Calendar tab with a Done tab. This would enable users to interactively move things into their Queue from the Todo List and into Done from their Queue.

 
taskly-dashboard-mid-fi@2x.jpg
 
 

usability testing

testing methodology

After wireframing both the mobile and desktop flows for creating tasks and moving them through the sections of the Dashboard, I conducted in-person usability testing with 6 users. While I first created an interactive prototype in InVision, I ultimately used JustInMind for the final testing prototype because it enabled simulated drag and drop functionality for the desktop prototype.

I used both desktop and mobile prototypes to test the login flow plus two core user flows.

 

Test tasks

Task 1. Create a new task in your Todo List.

 
taskly-mid-fi-adding-task@2x.jpg
 

2. Move a task from your Todo List to your Queue.

taskly-mid-fi-add-to-queue@2x.jpg
 
 

usability test findings

Identified Issues

1. Users were somewhat unsure about the difference between List and Queue. One user suggested using Up Next, which was the label they were used to from iTunes, instead of Queue.  

2. 2 users expressed a desire to add more details to the task when they first created it in their list (rather than creating it first and editing it later).

 

Other Key Findings

1. Once they understood the concept, users liked the creating a task in their List and moving progressively into their Queue and then Done. 

2. Some users initially looked for a (+) button to quickly add a task, though they did not have issues figuring out how to add a task with the existing flow.

 

incorporating feedback

Final Wireframes

In response to the issues identified in usability testing, the following changes were made.

 
taskly-after-testing-updates@2x.jpg
 

1. In accord with user suggestions, the Queue tab was updated to Up Next. The Done tab was updated to Finished to add clarity.

2. A card layout was included to provide more space to display task details and to make Move and More Details interactions more distinguishable.

3. A plus button was added at the bottom right to make it easier to add a task and to make the design more consistent with other apps.

4. A complete modal form was added to let users add optional details to a task when first creating it.

 

visual design

While not the focus of the UX course, visual design was added to create full color mockups. I tried to incorporate design elements from popular apps, as well as common design languages.

 
taskly-visual-design@2x.jpg
 
 

next steps

If I'd had more time on this project, a primary goal would be to design Taskly as a native mobile app. Given users' desire to frequently refer to their queue on mobile throughout their day, a mobile app would allow easiest access. It would also enable me to improve the design by bringing it more consistently in line with iOS Human Interface Guidelines (for iOS) and Google's Material Design (for Android). As this was a web app, I tried to create a usable design by incorporating elements of both design languages. However, I think adopting the appropriate design guidelines more consistently in a native mobile app for each operating system would enhance the user experience.