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.