TODAY | A UX Design Case Study

Designing a daily visual task management app

The home screen of the Today app with iPhone on a green background

Project Overview

Summary

TODAY is a daily task management mobile app that gives users the ability to not only easily plan their schedule each day in a visual way, but also maintain that all important high level overview of their projects and the tasks within them.

My role

My role was to lead the design for the two week sprint, working independently. For this project, I followed the British Design Council's Double Diamond process with its four phases: Discover, Define, Develop, Deliver.

Key deliverables

A number of deliverables were required for the project, including:

The home screen of the Today app with iPhone on a green background
The second page of the on-boarding process, showing users the today screen and information on the current task.

Results

The app provides users with:

The today logo in a horizontal format
The logo I designed for the project to reflect TODAY app's brand personality.

Design Process

User Research

This project began with the aim of designing a mobile app that would improve my user's life. My primary user was a colleague of mine, who I shall call ‘Jamie’ for the purpose of this case study. I conducted two in-depth interviews with Jamie, quickly discovering that he struggled with prioritising tasks, causing him to rush work or miss deadlines. He also struggled to transition onto the next task; this was frustrating and stressful for him in addition to limiting his potential. Jamie’s quotes below illustrate this:

"I can easily get involved in something which doesn't need to be taken care of at that particular time."

"It takes me a while to get into something and then when I'm into something I don't want to move on from it."

"I'm at my happiest when I'm accomplishing everything and I'm prioritising correctly."

Mapping Jamie's current experience

Mapping Jamie’s current task management experience showed that although it can be beneficial, his current methods led to some significant low-points. This highlighted that the design would not only need to notify him when to move onto a task, but also allow him to visualise how far through a task's allocated time he was.

An experience map showing Jamie's current experience when managing his tasks
Jamie's task management experience map of his existing practice

Coming up with some initial ideas

I started off by sketching out multiple ideas, taking forward and merging the best of these. Reframing his problem and solution into an outcome statement and accompanying storyboard allowed me to ensure that Jamie (and his needs) stayed at the centre of the design process.

The storyboard showing Jamie's problem and his outcome
Jamie's task management experience map of his existing practice

Seeing the big picture

Creating a ‘happy path’ identified the priority being the today view, where Jamie would spend the majority of his time in the app. Using the happy path, I sketched a wireflow to show Jamie's progress through the app, converting this into a paper prototype.

A diagram showing the happy path user flow for Jamie
Jamie's happy path.

Following the creation of the happy path user flow, I sketched a wireflow to show Jamie's progress through the app. I then converted these sketches into a paper prototype.

Learning quickly

To test whether I was on the right track with my preliminary ideas, and to see what worked (and more importantly what didn't!) with the design, I conducted multiple usability tests.

An example of 3 of the primary paper prototype screens.
An example of 3 of the primary paper prototype screens.

After four rounds of testing and iteration, the design was more refined and I moved the design into a mid-fidelity digital wireframe. These designs then underwent another five rounds of usability tests prior to being made into high-fidelity mockups.

Improving

The process of iteration and usability testing lead to some significant design changes. The image below highlights some of these on the 'today' screen.

3 screens showing stages of iteration with highlights.
An example of some of the changes (highlighted in red) to the design from initial sketches (left), to a later paper prototype (centre), to a mid-fidelity wireframe.

Primary among these was the change to the timeline. For example, users found the central placement and style confusing and frustrating, preferring the second variant although some didn’t realise it was a timeline, instead seeing it as a ruler. To resolve this, am and pm markers were added. The timeline was also moved to the right which felt more natural for users when dragging and dropping tasks.

One of the key difficulties I ran into during the prototyping and usability process was the level of fidelity required. In particular, the drag and drop functionality to schedule tasks into the timeline for the day was not feasible within InVision.

Using Principle, I created an animation to show this interaction which could then be mirrored on the phone. Although more complex and time-consuming than using InVision this greatly assisted with usability testing as it allowed users to test and experience the intended functionality and interactions of the app.

An animation of the card drag and drop functionality.
An initial low-fidelity animation to illustrate the drag and drop functionality and the independent vertical scrolling elements when adding a task from existing projects to the timeline

Once testing had shown the design to be mostly suitable (and thus relatively stable in terms of its design), I moved onto develop the branding of the app.

Branding

Referring once again back to my initial research interviews with Jamie and the storyboarding process outlined above, I identified the brand's position as:

The moodboard showing multiple images illustrating TODAY's brand position.
The mood board for TODAY.

Using this, I developed a mood board. This identified that a clean, minimal look with subtle gradients and a calming colour palette was important, enhancing Jamie’s feelings of control, focus and clarity. The app’s style guide was created from this.

The typefaces chosen – Futura Bold for headings and Proxima Nova Medium for other text– were chosen as they reflect the brand values and enhance readability. I designed the logo to reflect the brand personality.

The style guide showing the logo, typeface, colours and gradients for the TODAY app.
The style guide for TODAY.

Using the style guide I developed a high-fidelity mockup of TODAY.


Solution

Some of the key interactions and flows of the app are shown in the three GIFs below of the high-fidelity prototype designed using Sketch and animated in Principle.

An animation of the onboarding flow in the TODAY app.

The animation above shows the start of the onboarding process, helping users to identify their key interaction with the app.

An animation of the add task flow in the TODAY app.

The animation above shows the today screen with details of the current task, including the timer. The vertical heights of tasks corresponds to their allocated time, enabling easy identification of relative length of tasks at a glance.

An animation of the add task flow in the TODAY app.

This final animation shows the flow for adding multiple tasks from projects. Usability testing showed that although the interaction of dragging and dropping cards from the project ‘pane’ to the timeline is easily learned, some users struggled to realise this interaction existed, resulting in the importance of onboarding.


Outcome

TODAY was received very positively, with Jamie stating that he wishes that the fully functioning version of the app could be developed as it would significantly help him with his task management.

Recommendations for the future of TODAY

Moving forward, my recommendations for the app include: