Penelope Rance

UX Researcher & Designer

TaskMaster Case Study

The Brief

I was asked to design an app which would address a key problem in Zhenjie’s life.

My Role

UX Designer

Project Details

Date: September 2015

Duration: 2 weeks

The Process

Zhenjie is a full time student and training for a half marathon so I interviewed him on his daily schedule to see what key issues he had.

From what I learnt I created some sketches of how an app could fix some of the issues that had come up. Being a runner myself I was interested in how an app could fit his half marathon training into his busy calendar, including a training plan which would change depending on the training Zhenjie managed to do that week.

Me interviewing Zhenjie.
Interviewing Zhenjie about his daily schedule

However when I went back to Zhenjie for a second interview I realised he was quite happy with his training plan and the real issue was more to do with having several large tasks to complete and needing to prioritise them.

This changed the focus from a running app to a to-do list app.

There are many to-do list apps available already and I was struggling to do anything interesting with mine. But as I wrote out a list of possible tasks it suddenly occurred to me that most of them were things that could take days or even weeks to complete, for instance reading text books for his studies.

"Wouldn’t it be cool if you could tick off small bits of the task to show some progression, even though the bigger task continues to sit on your to-do list"

The thought that got me started

A tiny sketch which started the idea for the app.
This tiny sketch gave me the inspiration for my app

I sketched out the different screens that the app would need giving me a paper prototype which I could use to check how the flow of the app would work. This helped me to see where I was missing things like back buttons or even where whole pages were missing.

At this point I also started to sketch out a possible homepage widget which could show how you are getting on with a task without having to open the app.

A sketch for the paper prototype.
Sketch of a possible homepage widget

With a working clickable prototype using POP App, I tested with four possible users including Zhenjie. Feedback was positive. Two new ideas were discussed; Motivational quotes rather than just ‘keep going’ text and the idea of showing people stats of how long a task was taking along with an estimated finish date.

A sketch for the paper prototype.
Just one of many sketches for the paper prototype

Next I started the visual design process by creating a mood board. I was looking for images of peace and motivation which meant pastel colours and landscapes for me.

My mood board.
Everyone loves a bit of cutting and sticking

The mood board coupled with a word association exercise helped me to create a style tile which collected all the fonts, colours and sample images together, which helped me to keep the app consistent when I built the high fidelity mock ups.

My style tile.
I created a style tile to help me be consistent with my design across the app

I created the visual designs using Sketch App. I started with the main page which shows the breakdown of subtasks for the bigger task. The idea being that every time you tick a subtask off your list the background image and motivational quote change as a ‘reward’.

It was really important for motivation that you can see what you have already completed, so I started by greying out the completed subtasks, but this was very hard to read.

When I discussed the issue with some of my colleagues the idea of ticking things off or crossing them out as you would on a paper to-do list came up and when I changed the design to reflect this it worked much better. The line also shows the affordance of how you would cross a subtask off.

The app.
The app.
Here you can see how the image and quote change as you tick off another subtask, and what the stats page would look like

Happy with the main list page I moved on to the stats page. Here I added two circles, one showing how much was complete and one showing how long it had taken. Deciding on a background for this page was difficult, but once I blurred the ‘reward’ image the information stopped feeling lost and the two pages felt connected.

Next Steps

At this point I ran out of time, but the next stage would be to look at the other pages in the app and how to style them so they feel connected to the sublist pages without the ‘reward’ of the beautiful images becoming lost.

I had also started to play with how the app ‘button’, instead of a homepage widget, could indicate how far you have gotten with your main task, but this also needs more work.


General Assembly Logo

Back to the top

Contact Me

If you have any questions about my work please feel free to contact me.

Email me on peneloperance@gmail.com or find me on Twitter or Linkedin.