A mockup of the Hourglass app on an iPad

Hourglass Productivity Timer

A multimodal product designed to alleviate anxiety caused by traditional numerical timers. An app tailors visualizations while a physical companion device generates intuitive time displays, ensuring uninterrupted focus during productivity sessions.

Context

Class project

My Role

UX Designer, 3D Modeler

Timeline

January 2023-June 2024

Tools Used

Figma, TinkerCAD, Adobe Illustrator

Design Process

Product Showcase

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

My Impact

Led user testing that exposed traditional timers' productivity limitations, establishing pivotal insights that shaped the project lifecycle.

Collaborated across functions to refine design elements, translating user feedback into a UI that aligned with product goals and delighted users.

Designed a cost-effective product with a premium feel, prioritizing affordability to better serve our target audience.

understand

Problem Space

Traditional timers demand constant attention, pulling focus away from important tasks and creating unnecessary interruptions. Watching precious time pass can also cause anxiety, making it harder for users to stay focused and accomplish their goals efficiently.

User Personas

We developed two user personas representing diverse user groups to ensure Hourglass met the needs of our target audience.

Primary User Persona

Avery

Full-time university student

Goals

Improve time management, reduce stress, and work more efficiently

Needs

Customizable visual aids for studying, portable solution

Frustrations

Overwhelmed by time constraints, difficulty maintaining focus

How Hourglass could help

Provide non-intrusive visualizations to help Avery stay on track, with customizable features that integrate seamlessly into existing devices.

Secondary User Persona

Kevin

Project manager

Goals

Facilitate effective team sprints during in-office meetings

Needs

Visual time management tool visible to all team members, minimizes distractions

Frustrations

Team members distracted by personal devices during meetings

How Hourglass could help

Provide a centralized visual timer that mirrors device screens, boosting team focus and reducing distractions during meetings.

research

User Research

To shape our design approach, we conducted user research on jigsaw puzzle completion times, combining quantitative data with qualitative insights from post-session conversations. These findings helped us understand how timers influenced user stress levels and perceptions of productivity.

Average time to complete puzzles

A bar graph comparing completion times without a timer, with a numerical timer, and with a visual timer

“Seeing the visual timer in my peripheral vision was less distracting than having to break focus from the task to check the numerical timer.”

Quote from user research

“Seeing the visual timer in my peripheral vision was less distracting than having to break focus from the task to check the numerical timer.”

Quote from user research

Research Insights

Participants completed their task faster without a timer.

A visual timer felt more intuitive than a numerical timer, leading to faster completion times.

A lightning bolt with warning symbol icon

The introduction of a numerical timer after using no timer introduced stress and distraction.

Research Insights

Participants completed their task fastest without a timer.

Visual timers produced faster task completion.

An icon with a lightning bolt and a warning symbol

Introducing a numerical timer induced stress and distraction.

design

Wireframes

Our initial interactive wireframes focused on two key aspects.

Core functionality

Navigation flow

User testing revealed key issues:

It was unclear whether key settings, like timer duration, had been selected.

It was not obvious if user input for all timer parameters was required.

Mid-Fidelity Design

Guided by wireframe testing insights, the mid-fidelity interactive design emphasized two primary areas.

Detailed UI elements

Visual style definition

User testing feedback

User favorites and recents should be separated into their own sections.

The system lacked sufficient feedback to indicate how user actions impacted timer parameters

Physical Device

Hourglass's physical companion features a glass surface set at a 45-degree angle. When a tablet is placed screen-down on top of the device, the visuals reflect off the glass, creating a hologram effect.

The initial physical prototype was built with cardboard and duct tape as a proof of concept.

A person measuring a piece of cardboard with a ruler

A person sliding a piece of glass into a cardboard box

Three people looking at a cardboard box with a piece of glass in it

I used TinkerCAD to draft and 3D print a V1 prototype, refining it to address user feedback like the need for finger holes for removing the tablet.

I designed a wooden enclosure in Adobe Illustrator, which I then laser cut and assembled using halving joints for easy disassembly.

Wooden texture background. Image by kues1 on Freepik.

Visual Identity

Inspired by mesh gradients, natural materials, and representations of glass, our visual identity blended warm, comforting colors with glassmorphic UI elements, balancing digital functionality with a calming, organic aesthetic.

Final Design

The high-fidelity prototype, a culmination of extensive user testing and iteration, showcases polished UI and a finalized visual identity.

Users start by setting their desired timer length.

They then choose a visual that adjusts intuitively to the timer's duration.

Next, they select an audio track to accompany the visual timer.

Finally, they review their choices on a summary page and can favorite their settings for future use.

The high-fidelity prototype, a culmination of extensive user testing and iteration, showcases polished UI and a finalized visual identity.

Users start by setting their desired timer length.

They then choose a visual that adjusts intuitively to the timer's duration.

Next, they select an audio track to accompany the visual timer.

Finally, they review their choices on a summary page and can favorite their settings for future use.

Accessibility

AAA Contrast requirements met or exceeded for all text

AA Non-text Contrast requirements exceeded for all UI components and graphical objects

Labels provide sufficient context to understand the function of each element

State changes are clearly communicated to the user

user testing

Overview

We conducted user testing at each design phase with college students and young professionals from our target demographic. Their feedback was crucial for guiding design iterations and achieving our goals.