TODAY | A UX Design Case Study
Designing a daily visual task management app
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:
- Experience map
- User flow and wireflow
- Mood board
- Brand position
- Style guide
- High fidelity digital prototype tested with multiple users
- Presentation to the client
Results
The app provides users with:
- a habit forming process of quickly setting up their day's schedule every morning, using a simple drag and drop interface
- the ability to easily see, at a glance, the loading of tasks during the day and the relative time spent on each task
- a visual way of identifying what projects various tasks belong to
- subtle nudges throughout the day alerting them when it is time to move onto the next task
- an easy way to stay focused on the current task using a visual timer to show them the time remaining or elapsed for the task
- the ability to easily see an overview of current projects and tasks.
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.
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.
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.
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.
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.
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.
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:
- clean
- simple
- modern
- focused
- practical
- but never a hindrance.
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.
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.
The animation above shows the start of the onboarding process, helping users to identify their key interaction with the 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.
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:
- further refining the on-boarding process. In particular I would like to transform the on-boarding process from being based on learning through watching short animations, to learning through doing as this would enhance user learning of the core functionality and make on-boarding faster.
- create customisable notifications for tasks within the app rather than just the ability to turn on or off the default notification when it is time to move on.
- develop a companion Apple Watch app. This would allow the user to focus even more on the task at hand, as they would receive subtle notifications, such as a vibration on their wrist, reducing the potential for distractions that every phone pick up brings.