Task Slayer

Todo List App - personal project

Task slayer is an upcoming to-do list app with a visually stunning and user-friendly interface. Enjoy gamification features like discovering new creatures as you manage tasks with reminders, deadlines, and tags. With Task Slayer, productivity becomes a fun and rewarding adventure.

View prototype

Project impact:

We were visually able to present a to-do list in an engaging way which made productivity a more enjoyable experience. Despite its fun design, the app retains a simple and straightforward functionality, making it easy for users to manage their tasks. These claims were backed up by user study of the latest design (March) which showed a rating of 4.4/5 from participants who want to try this app on launch.

“I like the art, it is obvious what to do, good options like due dates and reminders.”
- User study participant

What I learned:

I learned techniques to create and conduct better usability studies. We also tested on actual devices (mobile) which was eye opening on certain constraints. Because of that we were able to make adjustments in the prototype. These where essential for creating a user-friendly product that meets the user's needs and expectations.

Project Overview

The problem:

Gamification to-do apps often focuses on external rewards as oppose to the task itself. This can be an issue where users can gamify the system in place to just get the reward without having completed the task set to do.

Date:

Dec 2022 to Mar 2023

The goal:

Design a gamification to-do list app that focuses on completing tasks and not time-consuming rewards.

Role:

UX researcher and ux designer

Tools:

  • Paper notebooks
  • Google Suite, (excel, word)
  • Figma (wireframes & prototype)
  • Discord (user study)
  • Google meet (user study)

Responsibilities:

  • Conduction research
  • Brainstorm on paper and digitally
  • Paper and digital wireframing
  • Low and high-fidelity prototyping
  • Testing prototypes
  • Conducting usability studies
  • Iterating on designs

Discovery

Research summary:

This is a continuation of an older project idea that I had. The work done in the past were competitive analysis, idea generation (crazy 8s) and a low fidelity prototype. I wanted to see if the idea still works so I combined a user study and combine primary research on the topic (todo apps) and prototype testing. The study consisted of 8 people over the span of 2 weeks. The main criteria is that users in the study need to have experience using a todo app or project management app. The results showed that most participants are using a robust, complex project management app and there is an interest for a lightweight, fun personal todo app. Also testing the prototype pointed out some interested findings (more in the "First usability study summary" section).

Persona: Joe

Joe is a recent graduate who wants a fun and interactive way to manage his personal life.

Joe's user journey

This table shows how Joe's navigate the problem of being productive and get things done. Task list describes what steps he is taking to do that, feeling adjectives describes how he is feeling as he go about the different steps and improvement opportunities describes how our app can make a difference in their life.

Competitive audit summary

Habitica

Pros

  • Engaging art and characters
  • Has tutorials and tips to guide new users
  • Robust reward system
  • Can form groups with other users online to complete goals together

Cons

  • Overwhelming amount of features and not all of them are explained
  • Lean too much on gamification, user can easily exploit system in order to advance in the game

Epic win

Pros

  • Large text, easy to read
  • Simplistic, clean design
  • Has tutorials to get started to guide new users
  • Easy navigation for the most part

Cons

  • Need to click and hold to complete a task and it is not intuitive for new users
  • Help section takes user to external link
  • Outdated, might not be compatible with new mobile systems

Productivity challenge timer

Pros

  • Simplistic, clean, good colour contrast
  • Easy navigation and simple user flow
  • Has a lot of achievements that can be earned
  • Has reward and punishment for failure (be demoted if not enough time is spent on tasks)

Cons

  • Hard to find "start" timer button
  • Gamification not super engaging (ranking and achievements only)

WaterDo

Pros

  • Engaging art and characters
  • Good tutorial for new users, can refer back to tutorial
  • Easy navigation and simple user flow
  • Satisfying action to complete a task (double click to pop balloon)

Cons

  • Subscription based
  • Limited numbers of gamification progression (upgrade your island)

Forest

Pros

  • Clean, minimalistic
  • Has reward and punishment for failure (instead of planting a nice tree, the tree died)
  • Engaging gamification system
  • Has lot of stats about user's performance

Cons

  • Cannot track specific tasks you are working on
  • Some features only in subscription

Low-fidelity wireframes

This is the low fidelity wireframes used to create the prototype for the first usability test. Here I are some of the important pages and features added.

Homepage

  1. The screen is set up to be like a tower defence game where the user want to clear the monsters as they are approaching the castle below.
  2. Each task created is represented by a different enemy creature.
  3. The "Add task" feature is prominent in the menu bar.

Task details

  1. Each created task is represented by a creature.
  2. Important task features like title, reminder, description as well as important actions like complete and delete.

Task list page

  1. Simple list view of all tasks for the day.
  2. Future tasks for upcoming days are easily scrollable.

Homepage

  1. The screen is set up to be like a tower defence game where the user want to clear the monsters as they are approaching the castle below.
  2. Each task created is represented by a different enemy creature.
  3. The "Add task" feature is prominent in the menu bar.

Task details

  1. Each created task is represented by a different creature.
  2. Important task features like title, reminder, description as well as important actions like complete and delete.

Task list page

  1. Simple list view of all tasks for the day.
  2. Future tasks for upcoming days are easily scrollable.

First usability study summary

The first study was performed on 8 participants for 15-30 minutes. The goals of the study is to see if user interface and user flow makes sense. Here are the main themes from the results.

Navigation on task details

There were too many CTAs (add, save, delete, complete) on the task detail page. Participants were often confused on what they needed to click.

Undo completing tasks

Some participants wanted an efficient way to undo a completed task if they made a mistake.

Subtasks

Some participants wanted to have the ability to break down a task into smaller one even for personal tasks.

Upcoming days' tasks

Some participants felt scrolling down to upcoming tasks is not efficient and want a better way to see upcoming tasks.

Things that could be improved

  • Making sure activity prompt don't include any labels so people are not actively looking for them eg. instead of saying add a task, say track a new activity in the app
  • Paying more attention to their behaviour as they interact with the prototype ei. any hesitation, any interesting interaction, time it took
  • Asking participant what made something easy or difficult if participants don't give a lot of information

Wireframes and Prototypes

Homepage

  1. Popup at the top show how many tasks are out of bound and can be reached by scrolling up.
  2. Task name can be easily identified with which creature based on where the speech bubble is coming from.
  3. Menu indicating the primary pages of the app. Instead of "add task" in a button, a large plus button is used for simplicity.

Task details

  1. Subtasks added
  2. More features were added like due date, tags, repeating time and subtasks
  3. Now only two sets of CTAs exists depending on what state the page is in (new task, exiting task, completed task)

Undo completed tasks

  1. Access completed tasks page easily by clicking the "slayed" icon in the header.
  2. "Slayed" page contain all previously completed task. We put emphasis on tasks completed today because those are the one likely to be undone.
  3. Easily undo a task by clicking on the "X" by the name or clicking the "uncheck" button.

Task list page

  1. Scrolling to see upcoming tasks can be tedious for further dates. It is also not very intuitive if today's task list is very long. This was changed by adding a calendar at the top that can be expended for the whole month.
  2. Task list now also includes completed tasks and tasks with no due dates.

High-fidelity prototype

This prototype was created based on the wireframes discussed above. It focused on solving the issues of the first user testing. To test all the main features of the app without having an overcomplicated prototype with a bunch of lines going through it, we separated the prototype into 6 different user flow. Each one follow the next so it is easier to represent the data changes as well:

  1. Add a task
  2. Completing a task
  3. Managing overdue tasks
  4. Undo a completed task
  5. Check upcoming tasks
  6. Check productivity stats
Click here to view prototype

Second usability study summary

The second study was performed on 5 participants for 15-30 minutes. The goals of the study is to see if the addition of the art still made the app easy to use and also address changes made from the last study. These are the main themes of the results.

Navigation to app stats

Most participant had a hard time navigating to the app stats area. They were confused that it was under settings.

Menu icons

Some participants were confused on which page tabs they are currently on. The menu icon that participants are on should be more prominent.

Guide page location

Some participants felt that the guide page is unnecessary and taking an important spot on the main navigation.

UX writing

Some participants were confused by the word "slay" for completing a task. This is replaced by the more universal term "complete".

Things that could be improved

  • Testing the prototype on actual device more thoroughly to check if all the interactions can be done on a touch screen
  • Making sure all prompts have the right context - I asked how users would take care of an overdue task. This was confusing to them because it depends on whether the task was done and forgot to be checked off or simply not completed.
  • Adding some navigations in the prototype that are not necessarily part of the use case to allow greater amount of exploration

Refining the design*

*Product at launch may vary in design because of technical constraint or new findings

Better navigation

  1. Stats location has been changed to make navigation more straightforward.
  2. Stats page also now includes the creature index (previously called guide) and achievements. In a game menu, these things are all closely associated.

Menu icons redesign

  1. Icons that are clicked on are now designed to be more visible with a white highlight.
  2. "Add task" button has been redesigned to be more subtle. It will brighten up when clicked. This is to make other menu icons even more visible.

Adding fun animations

  • One thing that we wanted to do is to design a positive experience when completing a task. We want the action of completing a task to be the focus rather than an external reward like getting coins or xps like how other gamifications apps do.
  • Mobile app have the feature of click and hold but it is normally not intuitive. To take advantage of this feature, we added clear instruction on the button and added a loading animation on it too to give feedback to users.

Refined prototype

This prototype is a refined version of the previous prototype. The last user flow was removed because the change of productivity stats from settings to main menu tab made it really easy to navigate to. The rest of the user flow are the same:

  1. Create a new task
  2. Completing a task
  3. Managing overdue tasks
  4. Undo a completed task
  5. Check upcoming tasks
Click here to view prototype

Next steps

  1. We are working on improving the art, adding more creatures and creating more animations to produce a more gaming aesthetics to the app.
  2. Development of the app will start soon, using the platform Unity. We chose this platform because it seems easier to get started (some drag and drop elements) and can be useful to learn should we decide to dive more into video game development.
  3. We will conduct more user testing as we go along especially if any new features are added. User testing could also serve as quality assurance, helping finding bugs before launch.

Get in touch!

© Jianle Tang 2022 | Designer

Get in touch!

© Jianle Tang 2022 | Designer