Sleep Widget
Utilizing Bevel forum data, I designed a conceptual sleep widget that sythesizes trending user suggestions and Bevel's existing sleep tracking information interface.
Project Image
The Idea.
Bevel Bevel Health bevel.health is a popular health and wellness application that provides users with a variety of tools to track and improve their sleep. I wanted to design a sleep widget that would provide users with a quick and easy way to access their sleep data and insights. I used user feedback from Bevel forums Sleep Widget Bevel Feature Requests feedback.bevel.health to help navigate my design decisions and ensure that the widget would meet the needs and preferences of Bevel users.
bevel interface
The Process.
widget size graph

Iteration

As with any design process, iteration is key. I went through multiple iterations of the sleep widget design, led by user observation tests and feddback sessions to inform any updates. A specific challenge I encountered was the various degrees in which icons can communicate an intended meaning. I found that, in my early designs, users misinterpreted some icons as irrelevant or confusing. In response, I refined the icons to be more intuitive and aligned with user expectations. This process taught me the importance of user feedback and iteration in the design process, and how small details can have a big impact on the overall user experience.

The Breakdown.
Breakdown Image

Metaphorical Affordances

The widget immediately surfaces the "Sleep needed" metric, the primary ask from user feedback, as a bold time value that is readable at a glance. At the top, target wind-down and bedtime are displayed within a pill container that groups these related datapoints together with minimal clutter. The moon and moon-zz icons create an intuitive visual hierarchy that naturally maps to the concepts of "winding down" and "bedtime" respectively, removing the need for text labels and keeping the design clean within a small widget footprint. At the bottom, a progressive arc serves a dual purpose: it acts as a dynamic visual indicator of time remaining until wind-down, while also anchoring the countdown text into a single cohesive area. This avoids the information feeling scattered and gives the widget a sense of motion and progression. Finally, the dark starry background was chosen to feel thematically appropriate for a sleep product, while also naturally lending itself to dark mode - an explicit request from users in the feedback forum.