VM

Project Overview

 

Taskly is a task management app for busy Millennial professionals who want to increase their productivity so that they can be more focused, accomplish more goals and be more successful.

 

The Challenge

 

The task management application market is saturated.  In order to stand out from the crowd, a new task management app needs to be able to deliver an excellent user experience.

 

The goals to solve this challenge thus became:

 

• Find areas of opportunity in the market through a competitor analysis,

• UX research to inform user goals, needs, and wants,

• The creation of 3 user personas to inform the development of Taskly’s design,

• Creating an MVP that hits the sweet spot between business and user goals,

• The development of information architecture to inform the content structure of the app, and

• User testing to improve upon Taskly’s design through iteration.

 

The Solution

 

Taskly is a minimalistic and intuitive application that allows users to quickly add their tasks while on the go.  In addition, it offers advanced features for task customization and organization.  Last but not least, Taskly’s calendar feature allows to visualize their tasks across time without having to leave the app.

UX Design - User Persona
UX Design - Site map for task management app and website
UX Design - Digital wireframes of user flow for task management app made with UXPin
UX Design - Style guide & UI Kit for task management app
UX Design - High fidelity mockups for task management app

Analytics & Testing

 

2 A/B tests and 2 click tests were performed in order to validate design decisions.

 

The A/B tests sought to validate the kind of menu arrangement that users preferred the most, especially when it came to the ADD NEW button.  One test was for the mobile version, while the second test was for the tablet version.  Both control versions, the current and original design, were far more popular than the variation version.

UX Design - Tablet high fidelity mockups
UX Design - Taskly, task management app design
UX Design - Customer Experience Map
UX Design - Task Model

Taskly

Competitor Analysis

 

A review and analysis of 3 existing task management apps yielded the following findings:

 

• Only one of the competitor apps had a calendar feature.  However, the feature was limited to a 3 month view.

• One of the apps was highly popular because of its simplicity and minimalistic UI,

• However, a second option hit the sweetspot between minimalistic and advanced features.

• On the other hand, the third app had an overly complex design.

UX Research

 

A series of interviews with potential users yielded the following data points:

 

• Users want to be able to remember the many tasks they have to complete-this is the main reason why they write to-do lists.

• Users prefer a simple and quick method to keep track of their tasks.

• Completing tasks is an ongoing process of prioritization and time-blocking as users juggle different demands in their life.

• Users want to be able to organize their many tasks into different groups and/or categories.

 

With this information in mind, a 7 question survey was created in order to quantify the qualitative data gathered during the interviews.  The most important results were as follow:

 

To understand and visualize the user persona’s interaction with Taskly, a customer experience map and a task model were developed.

User Personas

 

The data obtained from the UX Research stage informed the creation of 3 user personas to guide the design and development of Taskly.

 

Taskly’s target market is professional individuals, business managers, and/or business owners seeking to increase their productivity.  The app’s main goals are to help users:

 

• Create a task and add details to it,

• Organize tasks into projects,

• Track workflow and project's progress,

• Scheduling and event planning,

• Function across multiple platforms,

• Auto-sync, and

• Integrate with their social media accounts.

Minimum Viable Product & Business Goals

 

Taskly’s MVP will have the following features:

 

• Quick and easy adding and managing of tasks,

• Prioritization of tasks as center-front,

• Organizing of tasks into groups or projects,

•  Full calendar feature.

 

The business goals for the project include:

 

• Easy sign up for a trial using LinkedIn (or other social media) integration,

• Multi-platform compatibility,

• Elegant, minimalistic and easy to use UI, and

• Project and calendar sections integrated.

Information Architecture

 

A site map and information architecture were developed with the help of 4 card sorting exercises.

Paper Prototypes

 

Seeing as paper prototypes are an inexpensive way to kick start the lean UX workflow, a set of paper prototypes for Taskly’s mobile, tablet, and desktop versions, detailing 3 of Taskly’s main features were.  3 testers were recruited for usability testing and feedback was implemented.

 

Changes made to the paper prototypes after the initial round of testing include:

 

• Simplified the main dashboard to avoid choice overwhelm,

• Changed the design to resemble typical iOS apps,

• Re-arranged the navigation icons.

 

UX Design - Competitive Analysis
UX Design - Card Sorting excercise to develop sitemap and Information Architecture for Task Management app

Digital Prototypes

 

Once the paper prototypes had been tested and changes implemented, digital wireframes were created using UXPin.  These were tested digitally with inVision with 3 testers.  An additional 3 non-interactive tests consisted of the wireframe printouts.

 

Changes made to the digital prototypes after the 2 rounds of testing include:

 

• Re-designed the ADD EXISTING TASK flow due to confusion around the flow,

• Changed location of ADD NEW button on tablet and desktop wireframes due to confusion around its location,

• Labeled all icons in desktop and tablet wireframes due to users reporting “having to think” about the icon’s meaning,

• Added SHOW MORE OPTIONS to new task/project screens to allow for more advanced customization,

• Re-designed mobile dashboard to include priority objects and upcoming dates to accommodate the user’s desire to have a more prominent calendar feature,

• Re-designed tablet dashboard to include calendar for the same purpose, and

• Replaced project customization with ICONS with color coding for simplicity.

Style Guide & UI Kit

 

A mood board, style guide  and UI kit were created for development purposes.

High Fidelity Mockups

 

Taskly’s final interface design was created with the UI kit and style guide in mind using Adobe Illustrator and Adobe Photoshop.

Similarly, the click tests sought to validate current design decisions.  Testers were asked to solve hypothetical situations on the screen by clicking on what they felt would be the appropriate area or buttons.

UX Design - Click testing

The Evolution of Taskly

 

From idea to product.

UX Design - Taskly, task management app design

The Final Product

© 2017 • Victoria Melchor • UX Designer

UX Design - Customer Experience Map
UX Design - Task Model
UX Design - User Persona
UX Design - Site map for task management app and website
UX Design - Digital wireframes of user flow for task management app made with UXPin
UX Design - Style guide & UI Kit for task management app
UX Design - High fidelity mockups for task management app
UX Design - Tablet high fidelity mockups
UX Design - Taskly, task management app design
UX Design - Competitive Analysis
UX Design - Customer Experience Map
UX Design - Task Model
UX Design - User Persona
UX Design - Card Sorting excercise to develop sitemap and Information Architecture for Task Management app
UX Design - Site map for task management app and website
UX Design - Digital wireframes of user flow for task management app made with UXPin
UX Design - Style guide & UI Kit for task management app
UX Design - High fidelity mockups for task management app
UX Design - Tablet high fidelity mockups
UX Design - Taskly, task management app design
UX Design - Taskly, task management app design
UX Design - Competitive Analysis
UX Design - Customer Experience Map
UX Design - Task Model
UX Design - User Persona
UX Design - Card Sorting excercise to develop sitemap and Information Architecture for Task Management app
UX Design - Site map for task management app and website
UX Design - Digital wireframes of user flow for task management app made with UXPin
UX Design - Style guide & UI Kit for task management app
UX Design - High fidelity mockups for task management app
UX Design - Tablet high fidelity mockups
UX Design - Taskly, task management app design
UX Design - Taskly, task management app design
UX Design - Competitive Analysis
UX Design - Customer Experience Map
UX Design - Task Model
UX Design - User Persona
UX Design - Card Sorting excercise to develop sitemap and Information Architecture for Task Management app
UX Design - Site map for task management app and website
UX Design - Digital wireframes of user flow for task management app made with UXPin
UX Design - Style guide & UI Kit for task management app
UX Design - High fidelity mockups for task management app
UX Design - Tablet high fidelity mockups
UX Design - Click testing
UX Design - Taskly, task management app design
UX Design - Taskly, task management app design
UX Design - Competitive Analysis
UX Design - Customer Experience Map
UX Design - Task Model
UX Design - User Persona
UX Design - Card Sorting excercise to develop sitemap and Information Architecture for Task Management app
UX Design - Site map for task management app and website
UX Design - Digital wireframes of user flow for task management app made with UXPin
UX Design - High fidelity mockups for task management app
UX Design - Tablet high fidelity mockups
UX Design - Click testing
UX Design - Taskly, task management app design
UX Design - Taskly, task management app design
UX Design - Style guide & UI Kit for task management app
UX Design - Competitive Analysis
UX Design - Customer Experience Map
UX Design - Task Model
UX Design - User Persona
UX Design - Card Sorting excercise to develop sitemap and Information Architecture for Task Management app
UX Design - Site map for task management app and website
UX Design - Digital wireframes of user flow for task management app made with UXPin
UX Design - Style guide & UI Kit for task management app
UX Design - High fidelity mockups for task management app
UX Design - Tablet high fidelity mockups
UX Design - Click testing
UX Design - Taskly, task management app design
UX Design - Taskly, task management app design
UX Design - Competitive Analysis
UX Design - Customer Experience Map
UX Design - Task Model
UX Design - User Persona
UX Design - Card Sorting excercise to develop sitemap and Information Architecture for Task Management app
UX Design - Site map for task management app and website
UX Design - Digital wireframes of user flow for task management app made with UXPin
UX Design - Style guide & UI Kit for task management app
UX Design - High fidelity mockups for task management app
UX Design - Tablet high fidelity mockups
UX Design - Click testing
UX Design - Taskly, task management app design
UX Design - Taskly, task management app design
UX Design - Tablet high fidelity mockups
UX Design - Click testing
UX Design - Taskly, task management app design
UX Design - Taskly, task management app design
UX Design - Competitive Analysis
UX Design - Customer Experience Map
UX Design - Task Model
UX Design - User Persona
UX Design - Card Sorting excercise to develop sitemap and Information Architecture for Task Management app
UX Design - Site map for task management app and website
UX Design - Digital wireframes of user flow for task management app made with UXPin
UX Design - Style guide & UI Kit for task management app
UX Design - High fidelity mockups for task management app