Timesaw

Introduction

Final Design

Process

Empathize

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

As a team leader, I led the team working through the design thinking process. As a designer, I led the UI/UX design of this project from end to end, conducting user research. In the development process, I documented specs with my computer science background and collaborated with developers to craft a better experience.

I collaborated with the user researcher (Sophia) and the product manager (Blair) throughout the project. Currently, Timesaw Puzzle is in the development process. I documented handoff specs and collaborated with front-end developers (Leo, Harvey) and back-end developers (Yuanlin).

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.

Design Process

Designed with users in the center of our minds

Design process of Timesaw Puzzle

We began by conducting primary research to empathize with our users, uncovering their needs and pain points. Using this insight, we crafted data-driven personas and defined a clear problem statement, keeping our users at the heart of every decision.

We then developed a comprehensive brand guideline, ensuring design consistency and cohesion across the entire user experience. Through rapid prototyping, we iterated on our ideas and conducted two rounds of usability testing within two weeks, refining the design based on user feedback.

Timesaw Puzzle is currently in the development phase, where I am collaborating closely with developers to bring our vision to life. This iterative and thoughtful process ensures that the final product not only meets but exceeds user expectations.

Empathize

Discovering users' stories and needs through primary research

Users feels hard to leverage their trivial time

Through the survey, 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.

Diving deep into user reasoning through in-depth interviews

We then invited five users for in-depth interviews, diving into their pain points of why they quit time management or still feel anxious about not using 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

“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.”

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.

Ideate

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

Reducing stress with a puzzle-inspired visual identity

Inspired by the concept of "puzzling our time," I created the mascot "Tim" by combining elements of a clock and a puzzle. To promote a calming atmosphere, I chose "Soda Blue" as the primary brand color, as blue symbolizes calmness and reliability. A complementary palette of soft colors was also selected to help ease anxiety around scheduling tasks.

Mascot “Tim” and brand color “Soda Blue”

Designing a seamless user journey through UI flow and wireframes

To align our design solution with our brand concept, we decided to leverage the metaphor of puzzle placement as the main interaction for scheduling time. Users can drag and drop tasks into their timelines. Main features include:

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.

Streamlining consistency through design system

I also established a design system, which helped me expedite the design process and maintain consistency through different breakpoint.

Timesaw’s design system

Test

Enhancing user experience through testing

First usability test - refining task hierarchy and user flow

Useless priority in messy box

Four out of five participants felt that tasks in the "Messy Box" should share equal priority. As a result, we removed the priority indicators and colors.

Removed color prioritization in the "Messy Box" as all tasks share the same priority level.

Navigation confusion between messy box and timeline

Participants struggled to move tasks from the "Messy Box" to the timeline due to a complex user flow. To simplify this process, we added an "Add to Timeline" icon.

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

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

Second usability test - simplifying features for clarity

Removed the “Complete” button

Users found that reusable tasks didn’t need a "Complete" button since these tasks could be dragged into the timeline. We removed this button for clarity.

Eliminated the "Complete" button to avoid confusion since reusable tasks don't require completion.

Redesigned the timeline icon

The timeline icon within the "Messy Box" was transformed into a primary button after participants reported that the original icon was too small and easily overlooked.

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.

Crafting design handoff with developer-friendly approach

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 key breakpoints for mobile, tablet, and laptop, showing the UI adjustments for each device type.

Closing collaborate with developers for ongoing feedback

I established a continuous feedback loop, allowing for regular refinement based on internal testing. This iterative process led to key improvements in layout and interactions, enhancing the user experience across various devices.

Example of the transition animation for the FAB (Floating Action Button) to ensure clear communication with developers.

Lessons Learned

What I'd do differently next time.

The design system helps to maintain consistency

Although creating a comprehensive design system required a significant upfront effort, the system streamlined our workflow, enabling us to conduct two usability tests within a short timeframe and maintain 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 - Schedule, Collaborate, Track Finances, and Save Time for Small Businesses

Able studio design intern

ECLAT LAW FIRM Website - Redesign for Enhanced SEO Performance