Rationale:‍

• Visual representation of how short meditations are reinforces how little time they take and how easy they would be to fit into the user's day.
• Adds a little fun interactive delight to an otherwise unremarkable task.

• When wireframing the widget looked fine and functioned well even though animating it in Figma was a challenge.
• During initial testing there was text in the widget that explained how to use it so no usability issues were found.

Issues with visual style of the widget

Didn’t look like it belonged with the rest of the app

Was bland and unremarkable to look at

Tricky to come up with a design that communicated everything necessary while keeping visual noise low.

Removing explainer text Introduced usability issues

During testing, some users couldn’t figure out what the widget was or how it functioned. It took them a few seconds to understand what to do adding unnecessary friction.

‍

• My mentor felt that the clock widget was an area of opportunity & that changes could be made to add delight and better visual consistency.
• I changed the widget from a more traditional clock/timer into a top-down view of a mug with a handle indicating the user's session length selection.
• Once the user decides on the length of the session, the mug transforms into a side view and liquid slowly drains, reflecting the actions of the user as they meditate.

Usability issues

Now that the widget was not clearly and definitively a clock, users were confused about its purpose. There were issues in testing the new version of this widget.

Solution

Adding a simple tooltip that appears when the user first encounters the widget allows users to figure out how to set the length of their session without introducing friction.

Participants in user tests were quick to notice the tooltip & were excited by the animation, making exclamations like “It’s the mug! That’s so cute!”

Adding a better indicator of time

Future versions of the Clock Widget could benefit greatly from having a clear display of how much time a meditation will take. Although the tooltip cleared up a majority of the confusion. Clear labeling could reinforce users' ability to use the clock widget without issue.