Timesaw

Introduction

Final Design

Empathize

Define

Introduction

How 'relentless busyness' fuels anxiety

Most of us struggle to recall what we accomplished during the day. By the day's end, this relentless busyness leaves us anxious. This sparked the question: why do we struggle with time management?

People often feel anxious due to relentless busyness at the end of the day.

My duties as a team leader and UI/UX designer

Led the team of 6 working through the design thinking process.
Conducted 10+ interviews and usability tests.
Designed UI and flows based on research insights
Collaborated with developers to implement the product.

This is me! Presenting Timesaw on an offline meetup for side projects.

Final Design

Experience the gamified scheduling solution

High-fidelity mockup video of Timesaw Puzzle, showcasing its core features.

Empathize

Users found it hard to leverage their trivial time because...

After 80+ surveys, we noticed that over half of our participants had practiced time management techniques, but most of them felt that they could not use their trivial time well.

“It took me a lot of time to learn a new and complicated app, and the design of the timeline made me feel a lot of stress.”

After the interview, we organized the insights through the card sorting method, and concluded the following pain points :

The system is complicated and has a high usage threshold.
Manual operation, too time-consuming to use.
Lacks integration.
Timelines could cause stress.

Define

Users need a more intuitive and engaging option for their time management

We make life easier for busy users by simplifying tasks and reducing stress. Leveraging gamification and task visualization further eases pressure and highlights daily achievements.

“I'm not good at breaking down big tasks into smaller tasks.”

“Thinking about the schedule makes me feel stressed.”

“Some apps are too complicated, so I give up on time management.”

Ideate

Design a brand and flow that helps users develop their scheduling habits without feeling stressful.

After determining the goal of reducing stress caused by timelines and creating an intuitive flow for developing scheduling habits, we decided to ideate from two different perspectives: Brand Design and User Flow.

"While puzzling tasks on the timeline, we experience reduced stress in managing our time"

Mascot "Tim": Combining elements of a clock and a puzzle to represent the metaphor of "puzzling your time".
Primary color "Soda Blue": Promoting a calming atmosphere which help ease anxiety around scheduling tasks.

Mascot “Tim” and brand color “Soda Blue”; click to zoom in.

Drag and drop to schedule your time, similar to arranging puzzle pieces.

Schedule Timeline: This feature enables users to visualize their schedules in an easily understandable timeline format.
Puzzle Tasks: These are reusable tasks that users can incorporate into their schedules.
Messy Box: This is a space where users can store tasks they are unsure about in terms of scheduling.
Dashboard: This tool visualizes users' task completion and performance, assisting them in reflecting on their progress.

UI flow and wireframe of Timesaw puzzle; click to zoom in.

Test

Key iteration: Natigating between messy box and timeline

The messy box serves as a digital brain dump where users can input their tasks, and it should facilitate an easy transition of these tasks to the main timeline.

Usability issue - 4 out of 5 participants reported difficulty navigating this process.

Before: Users had to manually change tabs after selecting the ‘Edit’ button; however, this did not match the user’s mental model of adding a task to the timeline

Iteration 1: Adding an icon button to simplify the process.

To simplify this process, we added an "Add to Timeline" icon. This approach users to navigate to the page "Add to timeline" with only one click.

After: Added an ‘Add to timeline’ icon to insert a task into the timeline

Iteration 2: If it serves as a main function, designate it as a primary button.

However, in the second round of usability test, all of the participants reported that the icon button was too small and easily overlooked. As a result, we make it a primary button.

Enhanced the visibility of the timeline feature by converting the icon into a primary button.

Develop

Building Timesaw Puzzle with developers

Timesaw is currently in the mid-development phase, with our focus on transitioning the product from a mobile application to a responsive website (RWD). This shift is aimed at aligning with our budget constraints while reaching a broader audience.

Optimizing design handoff with developer-friendly spec

I led the adaptation of our design system for the web, using Figma to provide developers with detailed specifications. This included reworking the UI for consistency across devices and optimizing interactions for both desktop and mobile users.

Screenshot of breakpoints for mobile, tablet, and laptop, showing the UI adjustments for each device. Click to zoom in.

Using a detailed view to explain motion to developers

Example of the transition animation for the FAB. Click to zoom in.

Lessons Learned

What I'd do differently next time.

Expand the design system for faster development and consistent delivery

While we had a UI system that accelerated design and supported consistency, a more comprehensive system could have reduced the time spent explaining component usage to developers. Even though building it would require significant upfront effort, it would streamline workflows, allow for quicker usability testing, and ensure consistency across iterations.

Avoiding leading questions in user interviews

During user interviews, I discovered the challenge of designing unbiased questions, particularly when discussing personal experiences. Additionally, giving examples could introduce another type of leading question, as participants may tend to answer in a way they think aligns with what we want to hear.

Collaborating with developers with continuous discussion

During the feedback loop with developers, I learned that no matter how detailed the documentation, there can still be discrepancies between the design and the final output. Continuous discussion and close collaboration with developers are essential to minimizing these discrepancies and ensuring the design is implemented as intended.

Discover more of my work

RollBytes Inc. UIUX designer

Mai.Today: Navigating Real-World Constraints with Cross-Functional UI Design

Able studio design intern

ECLAT Law Firm Website Redesign: Enhancing User Experience and SEO Performance