Taskly

Project Overview

THE GOAL & CHALLENGE

Project management tools are used by many businesses in many different industries, and the competition in the project management tool niche is high.

The main goal of the design project was to determine what kind of features users need in a project management tool. Then, based on that research, to create a web-based, responsive tool for individuals and teams that need to effectively manage their work.

The challenge was to enter this highly competitive market with a new tool that would meet the needs and requirements of the users.

THE STRATEGY

Before I could give Taskly more structure, it was necessary to understand the market, competitor products and the different user groups.

It was important to determine what existing project management tools could offer and what user needs weren’t being met by them.

To do this, I compared competitor tools, used surveys and interviewed a set of early adopters who agreed to help me with this project.

LEAN UX

I used the Lean UX approach throughout the design of Taskly. It allowed me to easily measure what works and what doesn’t, test assumptions, find the design issues and quickly adjust the product to generate solutions.

MY ROLE

UX Designer (individual project)

TOOLS USED

Pen and Paper, UXPin (Sketching and Wireframes), InVision (Prototype), Sketch (Visual Design)

Discovery Phase

Firstly, in order to help me determine user needs and user pain points, I did a competitor analysis and performed user research. I used this data to create my user personas as detailed below.

It was also apparent that the main frustration users had was that some project management tools were too simple, and others were too complex to learn.

The users wanted a tool that would allow them to work quickly and efficiently without having to spend too much time understanding the product, while still having some powerful features at hand.

 Screenshots of the Competitor Analysis spreadsheet and survey results

Screenshots of the Competitor Analysis spreadsheet and survey results

MINIMUM VIABLE PRODUCT

Gathering important information with the help of surveys and user interviews, as well as taking into account competitor analysis, allowed me to define the final MVP for Taskly:

  1. Creating projects with tasks and subtasks
  2. Calendaring feature with upcoming deadlines, milestones and workflow, and a simple project planner
  3. Dashboards and reports
  4. Communicating by personal and group messages
  5. Being alerted about important developments, comments and messages by notifications

Analysis Phase

USER PERSONAS

Next, based on the research I performed, I created three user personas – Jack, Laura and Tom.

The user research data revealed that the main three user pain points were the following:

  • Struggling to stay productive throughout the working day
  • Not being able to manage time well
  • Not being able to easily track the project progress

I made sure this was reflected in the user personas, and I used the personas throughout the design process to keep the design user-centric.

 Three personas made based on User Research data

Three personas made based on User Research data

 

TASK MODEL

One of the best ways to illustrate tasks that users would perform while using a specific product is task models. I created one for Taskly where the goal of the user is to create a new project.

This allowed me to find out what steps the users would take and what decisions they would have to make, which helped me in the design phase of the project.

 Task model for creating a new project

Task model for creating a new project

 

INFORMATION ARCHITECTURE

I also performed a card sort in order to understand the navigation of Taskly’s website and app. It helped define the information architecture for Taskly, organise the site navigation and improve the site flow.

 Taskly's website & product sitemap

Taskly's website & product sitemap

 

Design Phase

In the Design Phase, I put all of the above information into wireframes and prototypes, which I then put in front of the users to get their feedback. This allowed me to validate ideas, refine the design, and repeat the iterative process.

WIREFRAMES & PROTOTYPES

Based on user research, users felt frustrated by either not having enough features to achieve what they want or having to spend hours learning and training people how to use project management tools that are very complicated. Because of this, I focused on the design of features that would fill this gap.

  • Paper Prototypes

I used pen and paper prototypes to discover product issues and to easily change and improve the concept.

 Pen & Paper Wireframes

Pen & Paper Wireframes

 

  • High Fidelity Wireframes & Clickable Prototypes

My next step was to create wireframes for the main product features of Taskly using UXPin.

I used these wireframes as paper printouts to carry out user testing in order to create new iterations of the product features and to remove user pain points.

WireframeFlow.png

 

I then transformed the wireframes into an interactive prototype using InvisionApp.

After the paper wireframe and interactive prototype testing, I made the following changes to the design:

  • Date and time and upcoming holidays were added to dashboards as users needed to see it to plan their time more efficiently
  • Buttons to add new projects or new tasks were moved to the top right corner as user testing showed users would have had to scroll too much if they had a lot of projects or tasks at once
  • New project and  new task forms were moved to separate screens as the previous design solution confused users
  • Modal windows were added to explain certain features as user testing revealed users weren’t sure what they were for
  • “Cancel” button was removed in project and task creation screens to help users focus on the task at hand

UI KIT

I created the UI Kit for Taskly carefully taking into account colours and fonts and making it easier to create a consistent design.

UI Kit V3.png

 

DETAILED PRODUCT

While designing Taskly’s user interface, I took the most important design principles into account. This included principles such as precedence, spacing, navigation, icons, typography, alignment, consistency, chunking, closure and depth of processing.

Some final revisions were made here such as adding a couple of brighter colours to guide users to complete their tasks and emphasise details that were important.

 

03.png
04.png
06.png
11.png
13.png
27.png