September 2024

Noonlight Safety Button Widget for iOS 18

Product Design at Noonlight

  • About

    The Noonlight app is a free personal safety button where caring humans keep you safe, all the time, everyday. Noonlight also partners with and powers emergency response for safety button devices like Flare, Birdie and Opal as well as many home and commercial monitoring services.

  • Product

    Press and hold the Noonlight safety button if you feel unsafe. When you release the button you can enter you PIN to verify your safety. If you do not enter you PIN within 10 seconds, a Noonlight agent will text and call you, then send emergency response within seconds.

  • Team

    Kara Valdon, Product Design
    Jay Martinez, iOS Developer
    Mike Roth, CTO

The Problem / What Happened 😰

iOS 18 no longer supports legacy widgets.

⬅️ Widget that went away

Send help quickly and discreetly

For Noonlight users, the widget is an extension of the app’s safety button, a quick-access way to send help to your location.

Design + build a new widget (asap)

🥺 Have user needs changed?

For Noonlight users, the most important need is access to help that remains subtle and discreet. The widget must create an alarm, not simply redirect to the app.

☝️iOS design restrictions

Because widgets are intended to give a window into the data inside the parent app, they are designed to be informational, not actionable. This is a huge bummer for us because we need it to perform a very important action…

🔒 Mitigating false alarms

We need to design a widget that balanced the ability to access the button quickly without a high risk of accidental false alarms.

💙 Reinforcing brand & identity

Apple encourages a unified interface that features native font and icons, and discourages logo or brand fonts. Users should see the widget and immediately think “that’s Noonlight”

Prototype Version 1

👍 Pros

  • Good brand recognition in the color and pattern similarities with the Noonlight safety button

  • Low risk of false alarm with “tucked away” left-aligned unlock button

  • Discreet locked screen

🥲 Cons / Limitation

  • Limited motion and animation capabilities in iOS 18 widgets (maybe we can’t do the animation?)

  • Potentially cumbersome to “reach” with dominate hand

Testing Mechanics

We put a simple prototype together while Engineering build the beta version of the widget.

👍 Keep

  • People liked the “look and feel” and felt it was a brand-aware and fitting experience.

🤔 Change

  • The left-hand unlock button, while better for mitigating false alarms, was a reach for right-handed people, and the user needed to reach over the “send help” button to the “x” to lock the button.

Beta in TestFlight: Right Hand Orientation

After testing the left-hand side, we shifted to the right and implemented the change with Engineering.

👍 Keep

  • Much more natural UX and interaction to unlock and close

🤔 Change

  • We still had some clean up work to do in tuning the animations, and making sure the Timeline widget views were updated to avoid feedback delays.

Bypassing default widget behavior

If you tap on a widget, it opens the parent application. We needed to block the ability to open the Noonlight app to avoid a high risk of false alarms.

Jay used a z-stack of buttons to “mask” the full area of the widget, creating a false button that had no action—tapping it did nothing. Then he layered the actionable buttons on top, creating the intended experience.

iOS 18

Noonlight widget safety buttons

Within 4 weeks of the iOS 18 release, we were able to design, build and test the new suite of Noonlight widgets.

👋 Before you go…

Stay safe with Noonlight