MENU

The process of creating a responsive Task Management Web App from research to visual design

665
18
Context

Taskly is a CareerFoundry.com UX Design Course project, created over the course of 10 weeks.

My Role

Market Analysis, User Research, Information Architecture, Wireframing & Prototyping, Usability Testing, Visual Design, and Copywriting

Objective

My research has shown that users wish their task managers to be simpler, more intuitive, and visual. My aim was to create a task manager that is simple and easy to use while offering all the functionality desired. For personalization purposes, I created light and dark UI themes.

Challenge

A major challenge was to find Taskly’s niche in a crowded task management app market. The tight timeframe and being a team of one were adding another level to the challenge. Given the short timeframe, I focused on the features of the free and GoSMART plans, which do not include any team features. This was in line with my research indicating that the majority of users use task managers as single users.

Approach

My approach was to systematically split the project into smaller steps, validating the results of every step with the users, then iterating my solutions multiple times. Given the short timeframe, I used the Lean UX approach as there simply wasn’t enough time to produce a heavy load of deliverables.

1.

First I did an Analysis of the market and competitors to define Taskly’s preliminary MVP as a starting point for my User Research.

2.

Next I conducted User Surveys to get general insights into user needs and potential market opportunities.

3.

To get more personal insights and to test my assumptions, I conducted Interviews with potential users.

 

Skills practiced:

Competitive Analysis, User Surveys, User Interviews

Tools used:

SurveyMonkey, Typeform, Google Docs & Sheets

Learnings:

My preliminary MVP was way too complex. The users only need a fraction of the functionality. With a longer timeframe, I could have surveyed more people and gotten more accurate results in my quantitative research.

4.

Based on my research, I created User Personas summarizing the needs of potential user groups to help me stay focused on the user when making design decisions.

5.

By creating Task Model and Customer Experience Map, I was able to gain more qualitative insights, as well as identify pain points and opportunities in the flow.

Skills practiced:

Personas, Task Model, Customer Experience Map

Tools used:

Sketch, InDesign

Learnings:

It is worthwhile to invest extra time in getting Personas right as they are a valuable resource for making design decisions throughout the entire process. Creating a customer experience map helped me experience the user’s frustration and uncover issues early on in the process.

6.

After conducting Content Audits of Taskly’s competitors, defining SMART business goals, audience, their goals and needs, I recruited potential users to test my Navigation Structure with an Open Card Sort.

With the insights I created a first draft Sitemap, which evolved during the Design Process until reaching the final state.

Skills practiced:

Content Audit, SMART business goals, Open Card Sort, Sitemap

Tools used:

Sketch, Realtimeboard

Learnings:

For any product that is not non-profit, business goals are just as important as catering for the user’s needs. User needs and business goals need to be taken into consideration equally.

7.

I sketched simple Wireframes for the User Flows of Taskly’s core features and created Paper Prototypes to collect feedback from potential users. This helped me uncover pain points in user flows and navigation, then iterate on my designs.

8.

Next I created mid-fidelity Wireframes and Interactive Prototypes for mobile, tablet, and desktop to test all features and user flows with potential users.

9.

Based on the data gathered from the User Tests of the Interactive Prototypes, I ranked the pain points by priority (Major, Medium, Low, Cosmetic). Starting with the highest priority pain points, I iterated on my solutions.

Skills practiced:

Low-fidelity Wireframes, User Flows, Paper Prototypes, Mid-fidelity Wireframes, Interactive Prototypes, Ranking of Pain Points

Tools used:

Sketch, InVision

Learnings:

Quick sketches on paper are incredibly effective for testing solutions early on without wasting too much time and resources.

10.

Before starting with the visual design I defined colors, typefaces, overall style, and visuals in a simple Style Guide and UI Kit to help me with consistency while designing Taskly’s high-fidelity screens.

Skills practiced:

Style Guide, UI Kit

Tools used:

Sketch, InDesign, Photoshop

Learnings:

Although the UI Kit was a good basis for laying out every screen, I ended up changing a lot of elements during the design phase. Afterwards, I had to update the whole UI Kit which cost me extra time. In the future, I might do only a rough Style Guide before designing the screens, then build the UI Kit step by step while laying out the screens.

11.

I designed every Taskly screen and created high-fidelity Prototypes for mobile, tablet, and desktop.

12.

With the high-fidelity prototypes I conducted A/B and Click tests to validate Taskly’s style and navigational elements with the users.

Skills practiced:

Visual Design, high-fidelity Prototypes, A/B Testing, Click Testing

Tools used:

Sketch, Usability Hub

Learnings:

When it comes to visual design, every person has got individual preferences, likes, and dislikes. It’s not as straight forward as testing the usability of navigational elements and sheer impossible to cater to everyone’s taste. Key is to consider best practices and let form follow function.