Rank UX Design Case Study | Task Management

Ricky Zhang
6 min readFeb 25, 2018

--

How many of us frequently find ourselves with a never-ending to-do list, wishing there were more hours in a day?We want to achieve our goals and increase productivity, but sometimes it seems there’s just no way to get it all done?

Well, the trick to boosting productivity is not necessarily having more time, but instead it could simply be making the most of what we have. So what are you waiting for? Take the assessment today, and see how much more productive you can become!

Millennials should use an effective way to manage their tasks. It will be beneficial if millennials have a clear planner to manage their tasks and goals.

Most people have a planner to remind them what they need to do daily, however, it’s difficult to accomplish goals without a prioritized plan. For we have this idea of creating an adaptor for managing tasks to help you increase your productivities. I am aiming to help millennials get on top of the to-do lists and managing it all in an order decided by priorities.

Approach

This project brief is creating a digital prototype to test a behavior change app.

For the mobile application, a scenario and the persona was generated in order to understand the potential user. Low fidelity wireframes were created using Balsamiq and Sketch, high fidelity designs were created Using Framer.js, the prototype was developed and tested on a couple users.

Problems

You can’t focus on anything anymore at work, and it’s taking its toll on your performance and your sense of well being.

Insights

Have too many tasks, don’t know how to start

It’s a common phenomenon that people like to write down everything on one sheet. However, when they review the to-do list, they get more anxious and don’t know where to start.

Deadline-pressure​

When people face a list of tasks, they are used to switching attention from one task to another frequently, making it hard to for them to concentrate on any undertaking.

Deadline-driven mentality

A growing number of millennials prefer to sleep on things until the last minute. But for tasks without a specific deadline, where do we find motivation?

Design Challenges

  • How might we help millennials be more productive?
  • How might we help millennials focus on their key tasks?

Hypothesis

Distinguish which tasks are truly important, and which tasks are not.

If you’re the type of person who just needs to write down everything you need to get done–regardless of how important or urgent they are–you can at least make assessments on their importance. If you don’t get everything done, you would have at least made headway on the things that are important.

What if…

  • Prioritize the task — they can set priority by evaluating the urgency and importance
  • Visualize the task by using a box with different size — easily know the order and difficulties

The Eisenhower Matrix

https://www.developgoodhabits.com/eisenhower-matrix/

Interaction Design

paper sketch (Rank 1.0)

Test1.0

  • Why I need a daily planner?
    To keep me on track in the face of distractions..
  • How are you define priority?
    If something not urgent, but I need lots of time to finish, how can I know the priority for that one?
Rank 2.0

Test 2.0

  • lack of motivation

I enjoy the moment when I see all my tasks finished, but right now the never-ending list just makes me feel hopeless.

  • Color or size?

If the small rectangle in a bright color represents medium urgency, a big rectangle in a dark color represents a hardcore challenge, I will be able to tell the difference immediately whenever I look at them.

  • It’s not good if all the things customizable
Rank 2.1
Rank 2.2

Test 3.0

  • People like use the third way(change the priority by scroll the box) to interact.
  • The interface should only show the Top 4 priority tasks on the main page
Rank 3.0

Test 4.0

  • People will have more motivation if they see some excite moment when they finish the tasks
  • Still want to highlight the top urgent task
play with Framer.js

This is the first time I use Framer to make a high-fidelity prototype, even it’s takes me lots of time and I really get stuck on the coding part, but I think worth it, especially making some input modules and color libraries.

Visual Design

The mood-board
some experiments
theme color
screens

Storyboard

What I learned

Making the choice easier for users

Delivering a good user experience requires that first you find out the functionalities that will answer their needs; second, you need to guide them to the specific functions they need most. If users end up stuck in the decision-making process of “what next?”, they may become confused, frustrated, or leave your website.

By reducing the number of options on screen, the prioritizing process becomes more user friendly, and it’s more likely that the user will reach the end of the process than abandon the steps. In this project, I try to make some theme colors to let user less options, they are easy to manage their tasks.

Find a better prototyping tool to express your design goals

This is the first time I use Framer.js to make a prototype. On the one hand, when I do the user test, the user can get more sense by some gestures and haptic reactions I created. On the other hand, I noticed the user more engaged with the text input modules in this prototype. As a designer, we need to think about what kind of prototyping tools we use in each project.

If you enjoyed this article, feel free to hit that clap button 👏 to help others find it.

Other Case Studies

See you in the next post!

--

--