More about Taskly

Taskly - A Project Management Application

A UX Case Study August 2016 - January 2017

.

During my 6-month User Experience (UX) course at Career Foundry the challenge was to create a project management application from the first idea into a production ready product. The app is called ‚Taskly‘ and my goal was to build a program that’s compatible for every day use and that should replace analog task tools. The app should be easy to use, casual and with a user-friendly interface. The target group are individuals, small teams, homemakers and freelancers that like to use it for personal errands, freelance projects and for team projects where users collaborating with others in small groups e.g.

.

Content

Research – User personas – Content strategy – Information architecture – Prototyping – Wireframes – UX Design – User testing – Analytics – User interface design – Visual design

.

Summary portfolio PDF-version

mock-up

Click here to open summary of Taskly’s case study

.

Interactive prototype of Taskly – mobile version

Click here to open prototype

Challenge

Taskly an MVP (Minimum Viable Product)

The challenge of this project management app was to create a product within a short amount of time so I was forced to focus only on Taskly‘s MVP core features and including unique selling points to let it stand out from the others. The MVP is the smallest thing to build to test each of my hypothesis. I focused on three features: creating a task, selecting a mode (private, team or business) and adding a plug-in for personal needs. I focused on three features:

  • creating a task
  • selecting a mode (private, team or business) and
  • adding a plug-in for personal needs.

There are so many task management apps out there. The problems are obvious: Some have bad usability, some are too overwhelming or too complicated and users feel frustrated about using it. Also most apps are created for entrepreneurs, big teams and digital pro‘s and aren‘t made for the use of ‚normal‘ users. Other apps are too simple and haven‘t got the features for a professional use but are still overwhelming with a bad user experience und unclear usability.

Taskly should be the first professional task management application that‘s suitable for private users, individuals, freelancers but also for small teams. Users should use it without the need of the knowledge about complex digital processes. The program should replace analog task tool solutions and give users the benefits of a digital product.

The most important fact you should always keep in mind: Create for the users, not for yourself, and testing and iteration makes finally a great user experience!

Lean UX

Everything starts with declaring my assumptions. Below is a visual model of an iteration process of building, measurement and learning. The next steps are preparations to declare my assumptions continuing by focusing on the problem statement, to have a starting point for Taskly.

lean ux process

1.1 Research

Competitor analysis

Competitor Analysis

My task was to conduct a competitor analysis of other task management applications. I decided to compare the most popular apps: Asana, Basecamp and Trello.

The task was to find about their strengths and weak points and how I could take advantage about it with building Taskly. I created a list with following analysis points:

  • Competitor profile (Industry, operating system, competitive advantage, competitive disadvantage)
  • Customer profile (Gender visit, education, browsing location, visitors by country)
  • Marketing profile (Target market, marketing strategy)
  • Website ranking/keywords (Top keywords, what sites users visited before, what sites like to the app, page title, meta description)
  • Core business (Product, pricing and costs)
  • SWOT Profile (Strengths/Weaknesses/Opportunities/Threads)
  • UI/UX (Usability, layout, navigation structure, compatibility, calls to action)
  • Content (Dashboard, project items, calendar view, due dates)
  • Design (Attachments & files, file or document library, support, team roles, labels & links, search function, milestones, content relevance, brand voice)
  • Performances (Aesthetic, visual design)
  • What’s good/bad/missing about their product

Based on this analysis I could determine that Taskly’s industry is available as SAAS (software as a service, a product you don’t own, it’s available online). Their potential customers are small to large companies, clients and business people who are collaborating with others.

I already figured out that normal users who aren’t business users or digital professionals need an application that is easy to use, just with a few core features and with a friendly usability.

All the big task management apps are created for business communications and for companies and they have a quiet complicated usability only tech affine users understand.

1.2 Research

User Surveys and interviews

User surveys and interviews

.

.

In order to validate or invalidate my hypothesis about Taskly’s customer needs I conducted a user survey with Survey Monkey. They survey includes a set of questions with Taskly‘s core features and its Minimum Viable Product (MVP).

.

My hypothesis

Many people don’t know there are professional and easy solutions out there for managing their daily business and tasks (and not solutions only for people working in a company/professional environment): They are called task management apps. Most homemakers, individuals and freelancers that don’t know those apps still prefer planning their daily business with analog features such as calendars, sticky notes, file cards and papers or they even use easily converted programs like excel. I conducted the test online with people fitting to my target group.

.

Conclusion

I figured out that many people haven’t even heard about such an app or have to get used to planning their daily businesses with analog tools. An app would people help organize, plan and simplify all daily businesses. People just need to get lead to this subject and a mentor or person who’s working with this tool could show how easily it works and users can get simplified their daily business management.

I figured out that many people haven’t even heard about such an app or have to get used to planning their daily businesses with analog tools. An app would people help organize, plan and simplify all daily businesses. People just need to get lead to this subject and a mentor or person who’s working with this tool could show how easily it works and users can get simplified their daily business management.

.

User interview

I conducted another survey, this time a user interview with consistent questions in person and on the phone with my target group. So I gathered qualitative data and I figured out user problems. I could validate a lot of assumptions and created optimized MVP core features for Taskly.

1.3 Research

Taskly's MVP's

Taskly's MVP's and S.M.A.R.T goals

Concerning my user surveys I could figure out Taskly’s user needs and its business S.M.A.R.T. (Specific, Measurable, Actionable, Relevant, Trackable) goals.

1. I want Taskly to be very easy to use, simple and with an elegant design.

2. I would like to make the project and calendar section more integrated and possibly located in the same place.

3. I want the ability to easily move individually between tasks and projects.

4. I would like to be able to visualize a project in progress and see who is working on it.

5. I want to show teammates’ tasks and priorities and assign them to the respective team members.

6. I would like to be able to notify each team member when a task is completed.

–> SMART goal: I want to provide a free trial package for potential customers to convince them by beneficial features regarding their needs to catch 20% of users afterwards as paid subscribers.

.

Taskly’s MVPs:

  • Easy usability and friendly modern design
  • Flexible dashboard (private/business)
  • Plug-ins for additional features like collaborating in a group
  • Calendar view or other analog tool view
  • Change and move tasks via drag and drop
  • Reminder notifications for tasks (what’s due, done upcoming)
  • Sign in with LinkedIn/Facebook or create new account

1.4 Research

User Personas

User Personas

I created personas to model, summarize and communicate them based on my quantitative data from user research and analytics. They are related to my target group. The user personas are depicted as specific persons but they aren‘t real individuals. I should create three user personas who all maintain:

.

– Demographics
– Occupation
– A quote
– Keywords
– Background
– Challenges
– Goals
– Frustrations
– Technology
– Identifiers/Personality

1.5 Research

Task model

Task Model

Task models are logical descriptions shown in a visual model all of the activities to be performed in reaching user’s goals. For Taskly I created this model to understand the steps users go through when they are planning a project e.g.
In this task model I created the process of a group who is managing and planning a project (a belly dance event planned on day x) with Taskly. It increases efficiency and conversion rates.

1.6 Research

Customer Journey

Customer Experience Map

A customer experience map is a visualized journey of a user’s process through e.g. conducting a purchase in an online store. I created a map regarding to Taskly’s belly dance group that helped me to identify problem areas. The journey map shows all stages from the event planning to the final event and post-event actions.

The map is listed in:

  • Stages
  • Doing
  • Thinking
  • Feeling
  • Opportunities

2.1 Information Architecture

Card sorting and sitemap

Card sorting and sitemap

sitemap

I conducted a content audit and a SEO research of the identified competitors of Taskly. After this I did card sorting with a group of people who helped me to figure out sorting Taskly’s main navigation.
To do the test I cut out pieces of paper where I wrote down Taskly’s navigation points like log in/out etc.
My test group needed to sort the cards into a structure and prioritize them. With the results I created the sitemap of Taskly.

3.1 Prototyping & Usability Testing

Paper prototypes

Paper prototypes

I created sketches of Taskly’s interfaces, drew then paper prototypes and sketched out every iteration. With the created paper prototypes I was going through the whole application and tested every single interaction a user could go through.

.

Usability testing

For usability testing I created user flows of several main interactions a user could go through, like creating a task. All user tests were conducted with paper prototypes while users pointed out with fingers where they would click. For every mistake or user flow that didn’t work or had bad usability I created iterations and tested them again with users.

3.2 Prototyping & Usability Testing

Wireframes

Wireframes

After the sketching phase I created digital wireframes starting with the mobile first approach. This approach helped me creating a better experience on tablet and desktop devices because it was the most challenging part when considering errors prevention, lack of space and opportunities.
I used UXPin to create the wireframes for all devices and tested the interactive prototypes with users.

.

Usability testing

Then I loaded the prototype into InVision and tested them with users and iterations helped me creating a great user experience.

3.3 Prototyping & Usability Testing

Usability testing

Usability testing

Pain points and solutions

pain points and solutions

Hypothesis and user feedback

My goal is to validate the proposed business solutions as precise as possible by user feedback.

The wireframes and prototypes I’ve created were tested again and again with users from Taskly’s target group and I went through a lot of iteration processes. I tested mobile, tablet and desktop versions.

I conducted live tests in InVision where participants tested alone and paper prototype tests with users sitting right next to me.

Both options have their pros and cons, when conducting a test. When test persons sitting right next to you, it‘s possible to distract or influence them in their user flow. On the other hand when you conduct a test where participants conduct the test alone they might feel lost or they‘re missing a helping hand when they have important or specific questions. Also a disadvantage contains that you can‘t see how the user interacts while he‘s doing the test and how long he takes for an interaction.

Through the tests other usability issues came up and I solved them through iterations and re-testings to make them validate.

Here is an example of assumptions and hypothesis I figured out during tests:

4.1 Visual design

Style Tile and UI Kit

Style Tile and UI Kit

For the visual design of Taskly, I decided for a rounded, harmonic typography, a color palette with three main colors regarding the three dashboard modes and two other colors, one for the background and one for highlighting. Also, I created a mood board with an emotional design regarding the user needs and a harmonic friendly layout. Concerning the mood board, I created a style tile. A style tile is more specific as a mood board but less precise than a mock up. It shows already the guiding style and examples of the program or website how it should look like.

Then I created the UI Kit for Taskly that should demonstrate all buttons, icons and its interface design. We discussed the UI Kit and I made iterations for a great user interface and a strong brand awareness.

4.1 Visual design

Interface design mobile

Interface design mobile

This is the interface design of Taskly for mobile devices. Taskly has three modes:

  • Private mode (green)
  • Business mode (yellow)
  • Team mode (pink)

The interface includes:

  • 6 task tools: calendar, file cards, notes, notebook, grocery list, address.
  • Adding plug-ins
  • Creating a task
  • Showing the three different modes

4.2 Visual design

Interface design tablet

Interface design tablet

This is the interface design of Taskly for tablet devices. Taskly has three modes:

  • Private mode (green)
  • Business mode (yellow)
  • Team mode (pink)

The interface includes:

  • 6 task tools: calendar, file cards, notes, notebook, grocery list, address.
  • Adding plug-ins
  • Creating a task
  • Showing the three different modes

4.3 Visual design

Interface design desktop

Interface design desktop

This is the interface design of Taskly for desktop devices. Taskly has three modes:

  • Private mode (green)
  • Business mode (yellow)
  • Team mode (pink)

The interface includes:

  • 6 task tools: calendar, file cards, notes, notebook, grocery list, address.
  • Adding plugin’s
  • Creating a task
  • Showing the three different modes

4.4 Visual design

Mascot Mr. Task

Mascot Mr. Task

I created this mascot Mr. Task for Taskly. He should bring a bit fun and joy into the program, create a user-friendly design and guide the user through the program for a great user experience.

5.1 A/B testing and analytics

Click testing

Click testing

Conducting the test with VerifyApp
I created a multi-page click test with VerifyApp. I uploaded four different pages of my Taskly‘s app to test if there are still problems to solve. The link was shared via social media (facebook and slack) and also sent via email. 30 people conducted the test. I created a task for every page and users had to click on random spots on the screen where they thought it was right. One example would be: Where would you click when you want to create a new task?

.

Results
After testing, it was clearly that one navigation on a page was totally misunderstood. It had a huge usability problem because participants couldn‘t find the right solution to select and change the task tool button (from calendar mode to file cards mode). I made iterations and designed a new interface module for this page and tested it again with users with the result of a better usability and a great user experience because users can easily find the right button where they see an overview of all the task tools.

.

Red spots
The red spots on every page showed where users had clicked and gave me insights what I could improve and what it already a great user experience for them.

5.2 A/B testing and analytics

Google analytics

Google analytics

I conducted an A/B test with google analytics. I created two versions of Taskly’s sign up page. Version A with the option to sign up via email and version B with the option to sign up via email or by using a social media account. I wanted to find out which version would have more conversions with the result of more paying subscribers.

5.2 A/B testing and analytics

Data AARRR

Data AARRR (Acquisition-Activation-Retention-Revenue-Referral)

5 metrics that represent behaviors of customers

Acquisition: I want to implement a user-friendly landing page that invites users to sign up and register for Taskly. A catching copy that lists the benefits for users and reasons why they should sign up, its USP and eye-catching calls to action buttons. Regarding the log in section the social media log in icons shouldn‘t be missing (users can easily log in also when they‘re registered in other social media channels). The conversion rate will raise what leads to more users who will subscribe to Taskly.

.

Activation: Users that are now already registered are excited to explore Taskly: I want to implement a first guide for all new subscribers. My mascot Mr. Task shows them how to create tasks, how to implement own design styles to the dashboard and he shows how to change the mode (note: CTA to upgrade 😉 ).

.

Retention: It‘s important that users return to Taskly. This should be working as simple as possible. A great solution would be implementing preset options like saving user data, automatically log in functions or preset functions for tools that users use frequently that start automatically or important tasks that are already shown on their dashboard.

.

Referral: If users like Taskly a lot they can recommend and invite it to friends, family or colleagues. This could happen by sending an e-mail invitation to them. To make this process even more inviting to users they could get free extra features for Taskly or a free trial of a premium mode. I would write a CTA copy text with a send invitation button plus a friendly illustration that users alert about recommending Taskly to others.

.

Revenue: For long-term users of Taskly I could implement more features for extended use and offer them subscriptions for lower prices or special offerings that users are willing to make more purchases and trust to spend more money on that program.

6. Final interactive mobile prototype on InVision

Interactive prototype

Interactive prototype

Click on the link and try my final interactive mobile prototype on InVision

Click here to open prototype