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, with a focus 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 final 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. Next steps include refining the prototypes by conducting usability tests focused on interface clarity and interaction flow and iterating based on user feedback and insights.
