Overview
Problem
Every year, students admit feelings of anxiety and stress as a result of poor time and task management. Yet, with the numerous solutions in the space, they aren’t being used effectively.
My Role
Project Lead
Sole UI Designer
Solution
A simplified user-oriented task management application, utilising gamification for boosted productivity.
Scope
University Project for Human-Computer Interaction Course (DECO2800)
Team of 4 Students
Key Features
Simplified Task Management
The app automatically prioritises urgent, time-sensitive tasks and hides less relevant tasks by default. Users can easily focus on their most important tasks without feeling overwhelmed by an extensive list.
Task Categorisation
Personalise experience to users through tailored task categories. This makes it easier to prioritise and manage different types of tasks and enable users to manage multiple responsibilities.
Pomodoro Timer
The app incorporates flexible timer options, including the Pomodoro timer, a standard timer, or no timer at all, to cater for different user preferences. The Pomodoro Timer is a proven method to enhance focus and productivity
Virtual Garden Metaphor
The virtual garden metaphor transforms completed tasks into plants, while neglected overdue tasks cause plants to wither. This visual, gamified interactive approach makes task management engaging and rewarding, motivating users to stay organised.
Push Notifications
Users receive personalised push notification reminders about plant completion and urgent tasks, keeping them motivated and organised
Statistics and Task Breakdown
Detailed statistics reflecting task and time breakdown for entire garden and individual user categories. These allow users to easily track their progress and make informed decisions on how to manage their time more effectively.
Research
Problem Space
The project brief required us to explore the domain of "Behavioural Change" and select a relevant subdomain. We chose Time Management because it is a pervasive issue that significantly impacts many individuals, yet there is still substantial room for improvement in this space. Effective time management is crucial for balancing various responsibilities and improving overall well-being, making it an ideal focus for our behavioural change intervention.
Ethics
Addressing time management is a widespread issue, requiring basic ethical considerations such as ensuring voluntary participation and maintaining the confidentiality of participants' identities and responses.
Desk research
We conducted extensive desk research, revealing that students are primary sufferers of poor time management in terms of both frequency and negative outcomes.
User research
Surveys and interviews with students highlighted specific challenges such as procrastination, lack of motivation, and difficulty in prioritising tasks.
Solution Space
We examined various existing tools and techniques that leverage gamification and structured approaches to enhance productivity and user engagement.
Forest
On Forest, users stay focused by planting virtual trees that grow as they spend time working, with trees dying if they leave the app prematurely.
Duolingo
On Duolingo, the mascot, badges, leaderboards, and notifications keep motivating users to engage in their learning journey.
Pomodoro Timer
Using the Pomodoro Timer, supported by cognitive science, enhances focus and productivity by encouraging individuals to work in regular intervals, typically 25 minutes, followed by short breaks.
Interaction Design
Flow Diagrams
I identified the three main requirements that informed our design
- Simplified task experience
- Incorporating the Pomodoro Timer
- Gamification through virtual metaphor
The team collaborated in creating the user flow diagrams that defined the V1 and V2 prototypes. Features were refined or culled through iteration, until a more concrete mapping of flow was defined.
Snippets from V1
Snippets from V2
UI Design
Tools
Figma
Process
As the sole designer, I was responsible for developing the UI prototypes for TimeBud. This role required initiative and discretion, as the V2 interaction flow was quite basic. The overall process involved creating mid-fidelity designs, conducting usability testing through talk-aloud interviews, and iteratively improving these designs to develop a high-fidelity interactive prototype, with further usability testing along the way. Using the final prototype, I collaborated with a team member to detail annotated interaction mode diagrams.
I began by implementing Google’s Material Design 3 using the online library and extensions available in Figma. This provided a strong foundation for the design system, which I then customised to suit the unique branding and theming of the task management application. I created a comprehensive component library to ensure consistency across all design elements.
Throughout the design process, I iteratively created and refined features, seeking feedback from users through talk-aloud usability testing. This approach allowed me to continuously improve the designs based on user insights, ensuring that the final high-fidelity interactive prototype was both user-friendly and visually appealing.
Onboarding
The onboarding process includes a series of questions to configure the app for optimal use. These questions are designed to gather essential information about the user's preferences, such as their preferences for task management complexity, notification settings, and timing options.
By doing this, we ensure a user-centric design that personalises the experience from the start.
Main Screens
Usability Testing
Mid Fidelity
After testing the mid-fidelity version with 3 participants, I found that users had difficulty recognising which tasks were urgent compared to less important tasks.
To address this, I incorporated a coloured warning icon to highlight urgency to the user. Furthermore, the amount of time until task deadline was added on the ‘My Tasks’ home page to quickly allow users to better prioritise and time manage.
High Fidelity
Testing the high fidelity with 2 participants, I found that some pages (such as settings) had too many functions for a mobile screen, slowing down flows and increasing cognitive load.
To counter this, I researched best practices in industry for mobile screens and modifying app settings, resulting in dedicated pages created for change email and change name.
Annotated Interaction Mappings
Reflection
This project challenged me, as project leader, to create a solution that stands out in the saturated market of time management applications. Through thorough background research and incorporating real users throughout the design process, I’m confident that our final prototype effectively met user needs.
As the sole UI designer, this project pushed me to achieve high-quality outcomes, allowing me to refine my personal style and make discerning decisions about what elements to include or exclude. I flexed my branding muscles by creating colour theming and typography, and extending upon a tried-and-tested system design, customising it to our specific context. Collaborating with colleagues at university who major in UI/UX design helped me bounce off design ideas and learn the hows and whys of design that my engineering degree hadn’t taught me.
Our process also highlighted the benefits of user-centric design. By involving users throughout the design process, from research to usability testing, we identified real pain points and areas where competitor solutions fell short, ensuring our final product was both useful, functional, and intuitive. This experience reinforced the value of continuous user engagement and the iterative nature of design.