Timesaw

Introduction

Empathize

Define

Ideate

Introduction

Problem

People often experience anxiety due to 'relentless busyness', especially when they feel tired yet are unaware of how their time is being used.

While feeling anxious about relentless busyness, possessing time management skills can aid in visualizing time usage and provide valuable information for reflection. I initiated this side project with my friends, aimed at helping reduce the anxiety associated with being busy yet feeling unfulfilled.

Without time management, most of us can’t remember what have we done today, and at the end of the day, we often feel anxious due to relentless busyness.

My role

As a team leader, I led the team working through the design thinking process. As a designer, I led the UI and UX design of this project from end to end, conducting user testing and crazy 8's. 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.

Our goal

Our goal is to reduce stress caused by relentless busyness through an easy-to-use time management app and help them build habits of scheduling their time. We will know this is true when we see positive user feedback, increased usage rates, and a decrease in user-reported stress levels.

Empathize

To better understand why people feel anxious about time management, we conduct survey and user interviews.

Survey

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.

User interview

We then invited five users in the last survey individually to 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

User persona

Based on the survey and user interviews, we target our users as female between 25~40 years old who lived in Taiwan and defined the user persona as follow:

Needs

A simpler interface and easier operation to reduce cognitive load and make task management more intuitive. A way to assist in breaking down tasks into manageable sub-tasks to facilitate better planning and execution. Gain a clear overview of her schedule and progress. Reduce stress caused by strict timelines.

Scenario

Dory is a busy individual with numerous goals and multiple roles to fulfill. She is looking for a simple-to-use time management tool that can assist her in breaking down tasks. Visualization of tasks is crucial for her to stay on top of her commitments and reduce the stress associated with managing multiple responsibilities. Additionally, Dory often feels stressed by rigid timelines and feels discouraged when she cannot clearly see what she has accomplished during the day.

Problems and opportunities

“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 believe that by simplifying the user interface, and streamlining the usage process for busy individuals like Dory, who juggle multiple roles and responsibilities, we will achieve increased user engagement and reduced stress. In addition, incorporating gamification will help reduce the stress caused by rigid timelines while tasks visualization will provide users with a clear sense of their daily accomplishments.

Ideate

UI Flow and Wireframe

UI flow and wireframe of Timesaw puzzle

After we decided the problem we would like to solve, we started to ideate. I led the team brainstorming solutions through several rounds of Crazy 8’s. Finally, we decided to use puzzles as our main inspiration, and users can drag and drop tasks into their timelines. Based on our sketches in Crazy 8’s, I created a complete UI flow and wireframe as a designer.

Brand Design

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

Drawing inspiration from our brand concept of "puzzling our time," I crafted our mascot "Tim" by merging elements of a clock and a puzzle. To foster a calming atmosphere within our app, I chose "Soda Blue" as our primary brand color, since blue is often associated with calmness and reliability. Additionally, I selected a range of soft colors for our puzzles. This gentle palette is designed to relieve anxiety associated with scheduling on the timeline.

Mascot “Tim” and brand color “Soda Blue”

Design System

I also established a design system, which helped me expedite the design process and maintain consistency through different breakpoint. Also, this design system allowed us to iterate rapidly on usability test.

Timesaw’s design system

Test

First Usability test

We conducted a remote usability test with a high-fidelity prototype to assess the user-friendliness of our product. Key findings and subsequent design iterations are as follows:

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

After revising our design, we conducted a second usability test, leading to further refinements:

“Complete” Button Removed

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.

Timeline Icon Redesign

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.

Final Design

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

Develop

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. The transition requires rethinking core functionalities to ensure they work seamlessly on a web-based platform.

Design Handoff

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.

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.

Next steps

The next milestone is integrating the timeline feature for seamless cross-device functionality. We will then conduct user testing focused on usability and prepare for a closed beta launch to gather further feedback.

Lessons

The Value of Design System

Creating a comprehensive design system for Timesaw Puzzle proved invaluable. Although it 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

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. Additionally, it’s challenging to account for every possible screen transition across devices, which can result in unexpected issues. Continuous discussion and close collaboration with developers are essential to minimizing these discrepancies and ensuring the design is implemented as intended.

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