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 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.
A number of deliverables were required for the project, including:
The app provides users with:
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 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.
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.
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.
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.
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.
Referring once again back to my initial research interviews with Jamie and the storyboarding process outlined above, I identified the brand's position as:
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.
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.
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.
Moving forward, my recommendations for the app include: