Product

·

·

3 min read

Designing Daylit's widgets

How we fit a habit tracker into a small square on the Home Screen.

Line drawing: a phone covered with widget blocks, one with a ring and one showing 48

A habit tracker lives or dies on how easy it is to tick a box. If you have to unlock your phone, find the app, wait for it to open and scroll to the right habit, you will skip it on busy days. So when we designed Daylit's widgets, we started with one question: what is the smallest thing that still helps?

One job per widget

Early sketches tried to fit everything into one widget: the full habit list, the streak, the focus timer and a progress ring. On a real Home Screen it looked like a spreadsheet. Nobody could read it at a glance, which is the only way anyone reads a widget.

We split it up. Each widget now does one job well:

  • Today shows your progress and the habits that are left, with a tap to tick each one.
  • Streak shows a single number and nothing else.
  • Focus shows the current timer or starts a new session with one tap.

You can combine them in a stack or place them side by side, and each one still makes sense on its own.

Readable from arm's length

We tested every layout on a phone held at arm's length, the way you glance at it while walking past the kitchen counter. Anything you could not read from there was cut or made bigger. Labels became shorter, numbers became larger, and decorative details went first.

The result looks plain on a design canvas and calm on a Home Screen, which is the right way round.

Ticking without opening the app

Interactive widgets let you complete a habit right from the Home Screen. The tick needs to feel instant, so the widget updates its own state first and syncs with the app a moment later. If you tick by mistake, tapping again undoes it.

We kept the tap targets generous. A widget that is hard to hit is worse than one you have to open.

Light, dark and tinted

Home Screens come in every colour now. Daylit's widgets use the same calm palette as the app in light mode, switch to dark surfaces at night and respect tinted Home Screens by turning into a single colour without losing contrast. We checked each state with real wallpapers, not just a grey background.

What we left out

Every widget idea that did not survive taught us something. A weekly chart was pretty but unreadable at small sizes. A motivational quote widget felt like noise after two days. A large widget with the full calendar was useful once a week and in the way the rest of the time.

The widgets that remained are the ones people actually looked at in testing. They are small, quiet and fast, which is what a habit needs to keep going.

Remix project

Create a free website with Framer, the website builder loved by startups, designers and agencies.