Ahmad Syuhaib Ali

Master Your Day, One Task at a Time

Imagine starting your day with a clear plan and the motivation to tackle each task with confidence. But we all have those moments when our to-do lists feel like a mountain, and it's hard to know where to begin.

Foottimer is your go-to solution for turning chaos into clarity. With smart AI-driven workflows, personalized reminders, and a dash of encouragement, Foottimer helps you take charge of your day and accomplish more with ease. Dive in and see how it all comes together!

Below are some of the screens in motion,

01
Watch your tasks bloom into success, one step at a time, with seamless reference access and a growing plant that illustrate your progress.
02
AI-powered companion, guiding you step by step, reminding you what's next, and fueling your journey with motivation, quotes, and encouragement.
03
Experience the flow with beautiful animations, microanimations, and illustrations that bring every screen in your task management app to life.
01
Watch your tasks bloom into success, one step at a time, with seamless reference access and a growing plant that illustrate your progress.
02
AI-powered companion, guiding you step by step, reminding you what's next, and fueling your journey with motivation, quotes, and encouragement.
03
Experience the flow with beautiful animations, microanimations, and illustrations that bring every screen in your task management app to life.
01
Watch your tasks bloom into success, one step at a time, with seamless reference access and a growing plant that illustrate your progress.
02
AI-powered companion, guiding you step by step, reminding you what's next, and fueling your journey with motivation, quotes, and encouragement.
03
Experience the flow with beautiful animations, microanimations, and illustrations that bring every screen in your task management app to life.
01
Watch your tasks bloom into success, one step at a time, with seamless reference access and a growing plant that illustrate your progress.
02
AI-powered companion, guiding you step by step, reminding you what's next, and fueling your journey with motivation, quotes, and encouragement.
03
Experience the flow with beautiful animations, microanimations, and illustrations that bring every screen in your task management app to life.

Understanding the challenge

The challenge was to simplify daily task management. Instead of guessing solutions, I took time to understand users first, so the design would truly help them. ( Explain more…)

1.0 Research

1.1 Interview

Task management is personal and varies by individual, so I interviewed 5 diverse people to understand their habits, tools, and challenges. I used open-ended questions and met them in their own environments to observe their real-time task management. This helped me uncover deeper insights and spot key areas for improvement ( Explain more …)

1.2 Persona Development

Interviews revealed that users struggle most with prioritizing, time management, and motivation. Mobile access was key, leading me to focus on mobile apps. These insights guided the creation of three personas. (Explain more…)

1.3 Hierarchical Task Analysis

My next step was to tell a story of how my personas were currently carrying out the tasks. My main strategy here was to

Use the three central tasks – add task, managing task and discover task - as the "storyline",

Label the negative emotions(red) and positive emotions(green) in order to tell where the problems are and what I could leverage in my design.

Find possible improvement opportunity to fix the issue

1.4 Competitive Analysis

I also analysed popular apps in the "Productivity" category on the Play Store to identify strengths and areas for improvement:

Google Tasks : offers a simple, intuitive interface with strong integration into the Google ecosystem, but lacks advanced features.

Todoist : provides powerful organizational tools and collaboration options but can be overwhelming and requires a premium subscription for advanced features.

Forest : uses gamification to encourage focus, making task completion fun, but it’s more limited in comprehensive task management.

This analysis revealed an opportunity to create a balanced app that combines simplicity with effective organizational tools, encouraging users to focus on completing tasks one by one. My goal is to develop a streamlined, powerful tool that meets the needs of users without overwhelming them.

1.5 My Proposal

I propose an app centered on three essential user flows to enhance productivity :

Adding Tasks : Users can quickly and efficiently create tasks, set priorities, and break them into subtasks, ensuring organized task management from the start.

Starting Tasks (Focus Mode): When users begin a task, they enter "Focus Mode," guiding them through subtasks one by one with minimal distractions, helping them stay on track and complete tasks effectively.

Discovering Tasks: This flow introduces a platform for users to share their tasks and discover others', fostering a community where users can inspire and learn from one another.

These flows create a combination of individual productivity and community engagement, making the app both a tool for focused work and a space for shared growth.

1.6 Designing a Habit-Forming Task Management App

I have studied several key concepts to apply and enhance productivity and user engagement:

1. Fogg Behavior Model
The app simplifies task management by balancing motivation, ability, and triggers. Intuitive design and timely reminders keep users motivated and engaged.
2. GTD (Getting Things Done) Methodology
Features enable users to capture, clarify, and organize tasks efficiently. Regular reviews and focus on sequential task completion help maintain productivity.
3. Parkinson’s Law
The app uses timeboxing and deadlines to combat the tendency to procrastinate, encouraging users to complete tasks within set time limits.
4. Gamification
The Rewards, badges, and points make task management enjoyable and encourage consistent use by turning productivity into a game.
1. Fogg Behavior Model
The app simplifies task management by balancing motivation, ability, and triggers. Intuitive design and timely reminders keep users motivated and engaged.
2. GTD (Getting Things Done) Methodology
Features enable users to capture, clarify, and organize tasks efficiently. Regular reviews and focus on sequential task completion help maintain productivity.
3. Parkinson’s Law
The app uses timeboxing and deadlines to combat the tendency to procrastinate, encouraging users to complete tasks within set time limits.
4. Gamification
The Rewards, badges, and points make task management enjoyable and encourage consistent use by turning productivity into a game.
1. Fogg Behavior Model
The app simplifies task management by balancing motivation, ability, and triggers. Intuitive design and timely reminders keep users motivated and engaged.
2. GTD (Getting Things Done) Methodology
Features enable users to capture, clarify, and organize tasks efficiently. Regular reviews and focus on sequential task completion help maintain productivity.
3. Parkinson’s Law
The app uses timeboxing and deadlines to combat the tendency to procrastinate, encouraging users to complete tasks within set time limits.
4. Gamification
The Rewards, badges, and points make task management enjoyable and encourage consistent use by turning productivity into a game.
1. Fogg Behavior Model
The app simplifies task management by balancing motivation, ability, and triggers. Intuitive design and timely reminders keep users motivated and engaged.
2. GTD (Getting Things Done) Methodology
Features enable users to capture, clarify, and organize tasks efficiently. Regular reviews and focus on sequential task completion help maintain productivity.
3. Parkinson’s Law
The app uses timeboxing and deadlines to combat the tendency to procrastinate, encouraging users to complete tasks within set time limits.
4. Gamification
The Rewards, badges, and points make task management enjoyable and encourage consistent use by turning productivity into a game.

By integrating these principles, the app not just only streamlines task management but also promotes habit formation and engagement, making it an integral tool for daily productivity.

2.0 Design

After completing thorough research, I move on to sketching wireframes with pen and pencil. This step helps me translate insights from the research into a clear, user-centered design.

By focusing on the app’s structure and flow, I ensure that the final product effectively addresses user needs before progressing to detailed design.

2.1 High-Fidelity Design

In the high-fidelity design phase, I translate wireframes into detailed visual representations. Using the iPhone Mini as my frame, I focus on refining the interface, ensuring that every element is polished and aligned with the user experience goals.

Adding Tasks New Task

The app features smart icon generation, automatically creating contextual icons based on the task's title and content. This enhances the user experience by providing quick visual cues, making task lists more intuitive and organized.
The calendar button at the top of the page enhances usability by allowing users to quickly view scheduled tasks in the calendar without leaving the task creation process. This integration improves workflow, making it easier to assign due dates and align tasks with existing schedules, ensuring a smooth and efficient task management experience.
The AI subflow feature automatically generates sub-task lists from user prompts, breaking down complex tasks into manageable steps. Users can easily edit these suggestions to fit their needs or create their custom taskflow, ensuring a personalized and flexible task management experience.
When selecting time/date, users can choose both analog and keypad options, allowing users to either drag a clock needle to select the time or input it directly via keypad. This dual approach caters to different user preferences, offering flexibility, precision, and an intuitive experience.
The file attachment feature includes a loading percentage bar, a green tick for successful uploads, a red alert for failed uploads, and a visible file size limit. These elements provide real-time feedback, clear success and error indicators, and guidance on file size, ensuring a smooth and user-friendly upload experience.
Other process of adding task
The app features smart icon generation, automatically creating contextual icons based on the task's title and content. This enhances the user experience by providing quick visual cues, making task lists more intuitive and organized.
The calendar button at the top of the page enhances usability by allowing users to quickly view scheduled tasks in the calendar without leaving the task creation process. This integration improves workflow, making it easier to assign due dates and align tasks with existing schedules, ensuring a smooth and efficient task management experience.
The AI subflow feature automatically generates sub-task lists from user prompts, breaking down complex tasks into manageable steps. Users can easily edit these suggestions to fit their needs or create their custom taskflow, ensuring a personalized and flexible task management experience.
When selecting time/date, users can choose both analog and keypad options, allowing users to either drag a clock needle to select the time or input it directly via keypad. This dual approach caters to different user preferences, offering flexibility, precision, and an intuitive experience.
The file attachment feature includes a loading percentage bar, a green tick for successful uploads, a red alert for failed uploads, and a visible file size limit. These elements provide real-time feedback, clear success and error indicators, and guidance on file size, ensuring a smooth and user-friendly upload experience.
Other process of adding task
The app features smart icon generation, automatically creating contextual icons based on the task's title and content. This enhances the user experience by providing quick visual cues, making task lists more intuitive and organized.
The calendar button at the top of the page enhances usability by allowing users to quickly view scheduled tasks in the calendar without leaving the task creation process. This integration improves workflow, making it easier to assign due dates and align tasks with existing schedules, ensuring a smooth and efficient task management experience.
The AI subflow feature automatically generates sub-task lists from user prompts, breaking down complex tasks into manageable steps. Users can easily edit these suggestions to fit their needs or create their custom taskflow, ensuring a personalized and flexible task management experience.
When selecting time/date, users can choose both analog and keypad options, allowing users to either drag a clock needle to select the time or input it directly via keypad. This dual approach caters to different user preferences, offering flexibility, precision, and an intuitive experience.
The file attachment feature includes a loading percentage bar, a green tick for successful uploads, a red alert for failed uploads, and a visible file size limit. These elements provide real-time feedback, clear success and error indicators, and guidance on file size, ensuring a smooth and user-friendly upload experience.
Other process of adding task
The app features smart icon generation, automatically creating contextual icons based on the task's title and content. This enhances the user experience by providing quick visual cues, making task lists more intuitive and organized.
The calendar button at the top of the page enhances usability by allowing users to quickly view scheduled tasks in the calendar without leaving the task creation process. This integration improves workflow, making it easier to assign due dates and align tasks with existing schedules, ensuring a smooth and efficient task management experience.
The AI subflow feature automatically generates sub-task lists from user prompts, breaking down complex tasks into manageable steps. Users can easily edit these suggestions to fit their needs or create their custom taskflow, ensuring a personalized and flexible task management experience.
When selecting time/date, users can choose both analog and keypad options, allowing users to either drag a clock needle to select the time or input it directly via keypad. This dual approach caters to different user preferences, offering flexibility, precision, and an intuitive experience.
The file attachment feature includes a loading percentage bar, a green tick for successful uploads, a red alert for failed uploads, and a visible file size limit. These elements provide real-time feedback, clear success and error indicators, and guidance on file size, ensuring a smooth and user-friendly upload experience.
Other process of adding task

Organizing Task

The "My Task" homepage enhances task management by allowing users to sort and view tasks in various ways—by date, view type, and category. This flexibility provides a personalized and organized experience, enabling users to find and prioritize tasks based on their needs and preferences.
The indication around the clock and detailed timeline of subtask design offers an intuitive and visually engaging way to see start and end times, helping users quickly understand their schedule and task overlap, enhancing the task management experience.
Focus Mode enhances task management by allowing users to access resources like to-do lists, photos, and links directly within the focused environment. It provides flexibility with adjustable time management and the ability to skip or revisit subtasks, ensuring users can maintain progress without feeling stuck. Additionally, users can exit Focus Mode if needed, supporting a more adaptable and user-friendly experience that helps them stay on track while accommodating their individual needs.
The Achievement Page allows users to easily track and analyze their progress through visual graphs, with options to sort by "day, week, month, year" and task type category. This flexibility helps users identify trends, set goals, and stay motivated by providing a clear and personalized view of their achievements over time.
In the app, badges are awarded for meeting specific milestones, enhancing user motivation through gamification. This feature rewards users for their achievements, encouraging continued engagement and reinforcing positive behavior, which leads to a more rewarding experience.
The "My Task" homepage enhances task management by allowing users to sort and view tasks in various ways—by date, view type, and category. This flexibility provides a personalized and organized experience, enabling users to find and prioritize tasks based on their needs and preferences.
The indication around the clock and detailed timeline of subtask design offers an intuitive and visually engaging way to see start and end times, helping users quickly understand their schedule and task overlap, enhancing the task management experience.
Focus Mode enhances task management by allowing users to access resources like to-do lists, photos, and links directly within the focused environment. It provides flexibility with adjustable time management and the ability to skip or revisit subtasks, ensuring users can maintain progress without feeling stuck. Additionally, users can exit Focus Mode if needed, supporting a more adaptable and user-friendly experience that helps them stay on track while accommodating their individual needs.
The Achievement Page allows users to easily track and analyze their progress through visual graphs, with options to sort by "day, week, month, year" and task type category. This flexibility helps users identify trends, set goals, and stay motivated by providing a clear and personalized view of their achievements over time.
In the app, badges are awarded for meeting specific milestones, enhancing user motivation through gamification. This feature rewards users for their achievements, encouraging continued engagement and reinforcing positive behavior, which leads to a more rewarding experience.
The "My Task" homepage enhances task management by allowing users to sort and view tasks in various ways—by date, view type, and category. This flexibility provides a personalized and organized experience, enabling users to find and prioritize tasks based on their needs and preferences.
The indication around the clock and detailed timeline of subtask design offers an intuitive and visually engaging way to see start and end times, helping users quickly understand their schedule and task overlap, enhancing the task management experience.
Focus Mode enhances task management by allowing users to access resources like to-do lists, photos, and links directly within the focused environment. It provides flexibility with adjustable time management and the ability to skip or revisit subtasks, ensuring users can maintain progress without feeling stuck. Additionally, users can exit Focus Mode if needed, supporting a more adaptable and user-friendly experience that helps them stay on track while accommodating their individual needs.
The Achievement Page allows users to easily track and analyze their progress through visual graphs, with options to sort by "day, week, month, year" and task type category. This flexibility helps users identify trends, set goals, and stay motivated by providing a clear and personalized view of their achievements over time.
In the app, badges are awarded for meeting specific milestones, enhancing user motivation through gamification. This feature rewards users for their achievements, encouraging continued engagement and reinforcing positive behavior, which leads to a more rewarding experience.
The "My Task" homepage enhances task management by allowing users to sort and view tasks in various ways—by date, view type, and category. This flexibility provides a personalized and organized experience, enabling users to find and prioritize tasks based on their needs and preferences.
The indication around the clock and detailed timeline of subtask design offers an intuitive and visually engaging way to see start and end times, helping users quickly understand their schedule and task overlap, enhancing the task management experience.
Focus Mode enhances task management by allowing users to access resources like to-do lists, photos, and links directly within the focused environment. It provides flexibility with adjustable time management and the ability to skip or revisit subtasks, ensuring users can maintain progress without feeling stuck. Additionally, users can exit Focus Mode if needed, supporting a more adaptable and user-friendly experience that helps them stay on track while accommodating their individual needs.
The Achievement Page allows users to easily track and analyze their progress through visual graphs, with options to sort by "day, week, month, year" and task type category. This flexibility helps users identify trends, set goals, and stay motivated by providing a clear and personalized view of their achievements over time.
In the app, badges are awarded for meeting specific milestones, enhancing user motivation through gamification. This feature rewards users for their achievements, encouraging continued engagement and reinforcing positive behavior, which leads to a more rewarding experience.

Discover task

In the task management app, users can discover and add tasks shared by others, fostering collaboration and inspiration. This intuitive feature enhances the user experience by promoting knowledge sharing, streamlining task planning, and encouraging collective productivity.
Users can view their past posts in their profile, providing easy access to their shared tasks and contributions. This feature enhances user engagement by allowing users to reflect on their past activity, track their progress, and revisit tasks they've shared. It also adds a personal touch to the user profile, making it a valuable resource for both personal reflection and ongoing task management.
The AI feature provides personalized comments, offering positive reinforcement, motivational quotes, or helpful tips in the comment section and displayed privately only users can see. This interaction enhances the user experience by adding a layer of support and encouragement, making the app feel more personalized and engaging. The AI-driven feedback helps users stay motivated and offers tailored advice, contributing to a more supportive and productive task management environment.
In the task management app, the AI also sends direct messages to users via chat, reminding them about tasks and offering motivational quotes or tips. This feature enhances user engagement by providing timely, personalized interactions that help users stay on track. The direct communication makes the app feel more proactive and supportive, reinforcing positive habits and ensuring users receive the encouragement they need to maintain productivity.
In the task management app, users can discover and add tasks shared by others, fostering collaboration and inspiration. This intuitive feature enhances the user experience by promoting knowledge sharing, streamlining task planning, and encouraging collective productivity.
Users can view their past posts in their profile, providing easy access to their shared tasks and contributions. This feature enhances user engagement by allowing users to reflect on their past activity, track their progress, and revisit tasks they've shared. It also adds a personal touch to the user profile, making it a valuable resource for both personal reflection and ongoing task management.
The AI feature provides personalized comments, offering positive reinforcement, motivational quotes, or helpful tips in the comment section and displayed privately only users can see. This interaction enhances the user experience by adding a layer of support and encouragement, making the app feel more personalized and engaging. The AI-driven feedback helps users stay motivated and offers tailored advice, contributing to a more supportive and productive task management environment.
In the task management app, the AI also sends direct messages to users via chat, reminding them about tasks and offering motivational quotes or tips. This feature enhances user engagement by providing timely, personalized interactions that help users stay on track. The direct communication makes the app feel more proactive and supportive, reinforcing positive habits and ensuring users receive the encouragement they need to maintain productivity.
In the task management app, users can discover and add tasks shared by others, fostering collaboration and inspiration. This intuitive feature enhances the user experience by promoting knowledge sharing, streamlining task planning, and encouraging collective productivity.
Users can view their past posts in their profile, providing easy access to their shared tasks and contributions. This feature enhances user engagement by allowing users to reflect on their past activity, track their progress, and revisit tasks they've shared. It also adds a personal touch to the user profile, making it a valuable resource for both personal reflection and ongoing task management.
The AI feature provides personalized comments, offering positive reinforcement, motivational quotes, or helpful tips in the comment section and displayed privately only users can see. This interaction enhances the user experience by adding a layer of support and encouragement, making the app feel more personalized and engaging. The AI-driven feedback helps users stay motivated and offers tailored advice, contributing to a more supportive and productive task management environment.
In the task management app, the AI also sends direct messages to users via chat, reminding them about tasks and offering motivational quotes or tips. This feature enhances user engagement by providing timely, personalized interactions that help users stay on track. The direct communication makes the app feel more proactive and supportive, reinforcing positive habits and ensuring users receive the encouragement they need to maintain productivity.
In the task management app, users can discover and add tasks shared by others, fostering collaboration and inspiration. This intuitive feature enhances the user experience by promoting knowledge sharing, streamlining task planning, and encouraging collective productivity.
Users can view their past posts in their profile, providing easy access to their shared tasks and contributions. This feature enhances user engagement by allowing users to reflect on their past activity, track their progress, and revisit tasks they've shared. It also adds a personal touch to the user profile, making it a valuable resource for both personal reflection and ongoing task management.
The AI feature provides personalized comments, offering positive reinforcement, motivational quotes, or helpful tips in the comment section and displayed privately only users can see. This interaction enhances the user experience by adding a layer of support and encouragement, making the app feel more personalized and engaging. The AI-driven feedback helps users stay motivated and offers tailored advice, contributing to a more supportive and productive task management environment.
In the task management app, the AI also sends direct messages to users via chat, reminding them about tasks and offering motivational quotes or tips. This feature enhances user engagement by providing timely, personalized interactions that help users stay on track. The direct communication makes the app feel more proactive and supportive, reinforcing positive habits and ensuring users receive the encouragement they need to maintain productivity.

3.0 Prototype

4.0 Evaluation and Iteration

After completing the design prototype, I conducted usability testing to identify areas needing improvement. During these tests, I noticed that users were spending more time than expected scanning the homepage, particularly when searching for references, timelines, and workflow sections. Although they understood the content, my observations indicated that they needed extra time to interpret the design. Users also sometimes felt confused about distinguishing between main tasks and subtasks and were occasionally unsure of which page they were on.

These insights led to several key adjustments to enhance usability:

1. Solid Color in Headings:

To enhance differentiation between the main task page and other sections, I applied a solid color to the headings. This created stronger visual separation, helping users quickly identify whether they were on the main task page or elsewhere.

2. Consistent Border Radius:
Inconsistencies in the border radii across different sections disrupted the visual flow and caused minor confusion. Standardizing the border radius can reduce cognitive load.

3. Reduced Transparency in Border Line of Title Section:

I found the borderline in the title section container made it harder for users to focus on the content. Reducing this transparency not only improved readability but also provided a clearer visual hierarchy, allowing users to quickly identify key information.

4. Light Background Fill for Workflow Sections:

To help users better differentiate workflow sections, I added a light background fill to improve visual separation. This enhances clarity and makes it easier for users to navigate tasks at a glance.

5. Added Illustrations to Subflow Tasks:

To distinguish between main tasks and subtasks, I added specific illustrations to the subflow task interface. These visual cues help users quickly identify subtasks, reducing cognitive load and improving task management efficiency.

5.0 Visual

When deciding the color scheme, I chose blue as the highlight for buttons, logos, and key elements, set against a neutral white and grey palette. This makes the blue stand out, guiding users' attention to important actions while enhancing visual hierarchy and creating a cohesive, functional theme.

Back :

Home

Design System

Work

Footimer

Overview

Understanding

Research

Interview

Persona Development

Hierarchical Task Analysis

Competitive Analysis

My Proposal

Design

High-Fidelity Design

Prototype

Evaluation and Iteration

Visual