UI/UX Redesign Project

Time Timer 

  • Foothill College

    UI/UX Design Final Project

  • Faculty

    Professor Eddie Shieh

  • Timeline

    April 2024 - June 2024

Redesign the Time Timer interface to improve usability and task efficiency for users managing multiple timers, focusing on intuitive controls and clear feedback.

Overview

The Design Process

Empathize

Analyze task flows screen-by-screen and conduct user interviews to uncover potential usability challenges.

Define

Organize and analyze pain points and user feedback to pinpoint the most commonly experienced issues.

Ideate

Generate diverse solutions to address identified challenges and optimize an intuitive user experience.

Prototype

Develop sketches, wireframes, and prototypes, iterating to refine solutions and establish a cohesive design system.

Test

Plan for iterative usability testing to validate solutions and optimize the design for an improved user experience.

Empathize

Screen-By-Screen Analysis

Conduct a solo usability test completing three tasks that integrate all main functionalities of the Time Timer app. Analyzing each screen step-by-step helps highlight where users are most likely to encounter difficulties, providing a clear view of task flow pain points.

Task 1

Start a 20 Minute Silent Timer. Restart Timer.

  • Strengths: The timer setup was intuitive with two input methods: dragging the red disk or using the draggable minute list. The restart button was easily accessible and its functionality clearly communicated. Visual feedback, including the shrinking red disk and toggling sound icons, reinforced that my actions were correctly implemented.

  • Challenges: Double-checked settings in the edit menu to ensure preferences were applied. No feedback was received after selecting edits and closing the menu.

  • Design Insights: Discoverability and feedback principles were well upheld through clear, recognizable icons and persistent visibility of controls. Enhancing the clarity of less common icons, such as the vibrate option, could further improve the user experience.

Task 2

Create Reusable 30 Second and 50 Minute Timers.

  • Strengths: Setting reusable timers was intuitive due to the logical menu layout and consistent feedback when naming and saving timers. The "+" button was conveniently placed and iconography was clear.

  • Challenges: Inputting specific durations beyond 60 minutes required some experimentation with the custom duration tab, which slightly disrupted the task flow.

  • Design Insights: The design effectively leveraged affordances, mapping, and feedback. Adding clearer guidance for entering custom durations would make this process more seamless and efficient.

Task 3

Increase the 50 Minute timer to a 70 Minute timer.

  • Strengths: Navigating between multiple timers felt flexible and intuitive. The combination of the swipe feature and list view provided an extra layer of visually engaging design that enhanced usability.

  • Challenges: Increasing the timer to 70 minutes required switching to the custom duration tab as the default screen editing screen only allowed for adjustments up to 59 minutes.

  • Design Insights: Introducing better feedback and constraints for editing active timers would decrease user trial and error. and align the functionality with user expectations.

User Research

  • Michelle

    25, ACCOUNT MANAGER

    Uses timers to assist with exercise and daily task management.

  • Mazel

    23, ENGINEERING INTERN

    Frequently uses timers for cooking and work tasks.

  • May-Ling

    52, SENIOR TAX AUDITOR

    Occasionally utilizes timers for household tasks.

Define

Usability Test Synthesis

I utilized Figjam to organize user feedback, define critical pain points, and help identify areas for improvement. From my user interviews, I learned that users searched for feedback when adjusting timer durations and making edits. Users found some of the iconography confusing but appreciated the plus sign as the icon to create a new timer. However, the large variety of methods to create a new timer proved to be confusing. There was also frustration with the input mechanism for timers over 60 minutes and the draggable red disk.

Information Architecture

User flow interactions for each task are mapped out to highlight the connections between tasks and how users might move through the app to accomplish their goals efficiently.

Ideate

Develop solutions to target the top pain points identified during testing:

  • Intuitive Iconography – Update vibrate and repeat icons to improve usability.

  • Timer Creation - Streamline the process for creating new timers.

  • Visualization of Time – Replace the draggable disc with a more practical and efficient input method.

  • Save Button Integration – Ensure user actions are confirmed with clear feedback.

  • Direct Time Input – Combine the mechanisms for adjusting timers under and over 60 minutes into a single unified interface.

Prototype

Wireframe Concept Sketches

Iterate through proposed various design strategies to build a solution that best addresses the identified issues.

Task 1

Task 2

Task 3

Low Fidelity Wireframes

Translate initial sketches into low-fidelity wireframes to map out key functionalities and user flows.

Task 1

Task 2

Task 3

High Fidelity Wireframes

I refined the low-fidelity designs into an interactive, high-fidelity prototypes that utilize screen animations and transitions to mimic realistic user flows. The final designs integrate UI elements, branding, and design system guidelines into the solution

Task 1

Task 2

Task 3

Design System

Time Timer’s UI elements reflect a task-focused color palette, clean typography, and intuitive icons.

Test

While additional formal user testing could not be conducted due to project constraints, future iterations will leverage usability testing to validate the effectiveness of the design in resolving user pain points. The next steps involve refining prototypes through targeted tests focusing on interface clarity and interaction flow, followed by iterative improvements based on user feedback and insights—a cycle of learning, revising, and testing.

Summary

The Time Timer app redesign focused on improving usability by addressing key friction points in timer creation, interaction design, and visual feedback. Usability testing revealed inefficiencies in icon comprehension, input methods, and confirmation mechanisms, leading to cognitive overload for users. To address these issues, I streamlined the timer creation process, introduced intuitive iconography for vibrate and repeat functions, and replaced the draggable disc with a more efficient input method. Additionally, I unified time adjustment mechanisms into a single interface and integrated a save button to provide clear user feedback. This iterative, research-driven approach ensured that design changes aligned with user needs, enhancing both efficiency and accessibility.

Skills: Figma (Wireframing & Prototyping), Usability Testing, Information Architecture, Interaction Design, Accessibility Principles, Visual Design System