Design

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.

Wireframing

  • 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.

Translating to Hi-Fi

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.

Adding Delight

  • 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 and Solution

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!”

UI Animation &
Further Iteration

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.

'Clock Widget' Takeaways

Lessons Learned

  • It is easier to come up with a new interactive element than it is to make it user-friendly. It takes lots of testing and iteration to end up with something that doesn’t introduce an unacceptable amount of friction.
  • Sometimes it’s difficult to translate an element that looks fine in low fidelity into a cohesive part of a design in high fidelity. In the future, I will be sure to test any uncommon elements with potential brand colors etc. before deciding to implement them.
  • Even though it may look cool or be unique - it may have been better to go with a more standard time picker for an MVP release.

Next Steps

  • In its current state the clock widget seems to be usable and intuitive however more iteration, testing, and refinement could help further improve the design.
  • Improving and smoothing out the animation would be helpful in improving the visual appeal of the widget.
  • Depending on user feedback it may be necessary to add a way to change the length of a session after it has begun - potentially necessitating a reversed version of the transformation animation.

Work with me

Send an email, connect on Linkedin, or fill out the form.
Always ready to talk design!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.