Fewer Taps, Faster Rides: A Journey Creating the Lock Screen Widget

Yuki Yamamoto
Dott
Published in
3 min readJul 1, 2024

One of our focuses is to improve the ride experience for daily riders.

We recently introduced a Lock Screen widget that allows users to open the app directly and scan QR codes for an on-the-go ride experience.

In this article, I will navigate you through the journey from ideation until the release.

Lock Screen widget

Lock Screen widgets were introduced in iOS 16, which make frequently used app actions more accessible with fewer taps. We already see many popular apps adopting this feature.

To understand how the widgets are generally used, I have categorized the existing widgets into two types.

  1. Quick access — provide quick access (like launching the camera or start listening to music)
  2. Live updates — display real-time data (like unread email count or battery level).

For the Dott app, I started by exploring Quick access widgets since Live update widgets require managing the Timeline, which can be more complex and increase the product scope.

Optimizing the Unlock Flow

One of the ideas I had in mind was to optimize our vehicle unlock flow. Previously, you could not ride a vehicle right away, even if you found a perfect one on the street that you wanted to ride.

This Unlock flow involved three steps:

  1. Unlock the phone
  2. Open the Dott app
  3. Tap the “Scan to ride” button

I envisioned reducing these interactions by offering quick access directly from the lock screen. With Lock Screen widget, it allows riders to unlock the scooter in a single step:

  1. Tap the Lock Screen widget

Before diving deep into development, I created a simple prototype. I created a shortcut to open the Dott app in the Shortcut app and placed it as a Lock Screen Widget.

Although this is just a simple action to open the app, it is enough to experiment if there is a use case in your daily routine where you want to access your app immediately from the lock screen. I highly recommend trying this before starting to implement the widget.

With positive feedback from designers and fellow developers, we moved forward with the design and implementation of the official lock screen widget.

Bringing the Widget to Life

Apple’s WidgetKit documentation was a great starter for adding widget to our project. However, there were some pitfalls I have fallen into:

Versioning

The app version and the build version for the widget must be the same as the versions for the app target. Otherwise, you will get ITMS-90473: CFBundleVersion Mismatch or ITMS-90473: CFBundleShortVersionString Mismatch when uploading the build to AppStoreConnect.

Testing with device

When I ran an app that included the widget extension, I sometimes did not see the app shown in the selector, or it did, but the widget did not reflect the latest change. On these occasions, I deleted the app and then reran the app, which worked for most cases.

Tracking Widget Usage

There’s no API to detect when a user adds a widget to their lock screen, making it hard to track the widget's usage and the project's success. While we considered tracking widget timeline refreshes, this would generate excessive analytics events unless carefully controlled.

We used getCurrentConfigurations(_:) in the app target to track which widgets have been added or removed.

A Successful Release and Beyond

The version containing the Lock Screen widget has been released, and we are thrilled to see riders taking advantage of it.

Early results are promising, and we’re excited to see how this feature continues to improve the ride experience.

Stay tuned for future updates!

--

--