Updating Apps For WatchOS 10

I’m sure you can’t have missed that Apple recently announced WatchOS 10 at WWDC 2023. Front and centre for WatchOS this year is a new design language for apps. My key takeaways were:

The edge of the screen boundary doesn’t need to be hidden. With Apple Watch Series 4 now being the oldest supported Apple Watch, that device (despite being nearly 5 years old) still has a fantastic and expansive display far improved from the small square the original Apple Watch offered. This means Apple can say confidently YES to background colour gradients which fill the screen. These provide an effective way to remind users where they are in the app.

Start with the most relevant data but offer more where possible. Yes the previous principles do apply, Watch apps should be designed for quick and glanceable interactions. However there are occasions where users want to see more data and WatchOS 10 provides two new great ways to let users navigate this data, Navigation Split View and Tab View vertical pages.

Charts are a good, quick way to convey information. Heart Analyzer has included charts in the Watch app since the early days of WatchOS even going to the extremes of rendering images of chart data to enable such a feature with the limited WatchKit API set. With good performance available to render modern Swift Charts and more space to display them charts can be glanceable and clear.

Reviewing WatchOS 10 Design

Apple has shown us great examples of these new design principles. I found Fitness, Weather and Stocks provided some key inspiration in the new design for Heart Analyzer.

The Fitness app is a great example of where Apple demonstrates using the new gradient backgrounds in WatchOS 10. Here the app conveys if you’re looking at Move, Exercise or Stand data by tinting the background accordingly. This not only looks fantastic but is a good opportunity to give additional navigation context.

The Apple Fitness app with background gradient tints matching the ring being inspected.

The Weather app in WatchOS 10 launches users straight into the weather summary for the current time at their location. This is most likely exactly what the user wants to see. If they want more detail on the weather they can just use the Digital Crown and scroll through vertical pages of data. If they want to see the weather for somewhere else, the Navigation Split View allows them to navigate up the hierarchy with a beautiful animation giving them an overview

The Apple Weather app which includes vertical pages between weather detail and a Navigation Split View to let the user jump up to a city selection view. (Sorry, it was a standard UK weather day when I took the screenshots!)

The Stocks app in WatchOS 10 includes an updated design. Unlike the Weather app, this one launches you to the overview page at the root to the Navigation Split View. Here you can see all your stocks and colour is used to give the user an immediate impression of which direction stocks are trending.

A stock can then be selected into a single detail view. What I noted here was that for each selected stock there is a large chart displaying historical data. Here Apple have provided a consistent Toolbar button to let users toggle through chart variations.

The Apple Stocks app with the use of a Navigation Split View for detail on each stock. The Detail view provides a Toolbar button top right which toggles through various chart time scales.

Bringing it all together

Having finished reviewing Apple’s use of the latest design techniques in WatchOS it was time to apply it to my app Heart Analyzer.

Now when you launch Heart Analyzer you will start in the Heart Rate section. This is the data most users will quickly want to see - similar to how the Apple Weather app shows your current location forecast.

If you want to view other types of Health data, a tap on the Navigation Split View indicator jumps you up to an overview where you can select from other Health types such as HRV, Workouts etc…. - again, just as in the Apple Weather app you select through forecasts for different locations and then navigate through into a detail view.

Heart Analyzer now makes use of background gradients throughout the app. These provide context to the type of Health data being displayed - concepts demonstrated in the Apple Fitness app.

Toolbar buttons now let users easily toggle chart information. In this case on the Resting Heart Rate screen the user can also switch to charts on Maximum, Minimum and Average Heart Rates.

The new Heart Analyzer Watch app aims to offer even faster access to your Heart Rate metrics whilst still providing easy ways to dive into all the Health data Apple Watch records. The new design frameworks available in WatchOS 10 really suit apps like this with glanceable content and intuitive navigation to further detail.

If you’re looking to take your Watch app further or develop a new one I hope the above run through gives some inspiration. Contrary to what others may say, I’ve never been more excited about developing for Apple Watch. I’m really looking forward to releasing this update next month!

Developer Tidbits

Performance

For this update to the Watch app, I actually chose to start from scratch. I wanted to go all in with Swift async/await and the SwiftUI lifecycle. It’s been a bit of a learning curve but the results have been totally worth it, the app is fast and fluid. Currently Apple Watch CPUs only really fall into two categories, Apple Watch Series 4, 5 & SE all run a variant of the S4 chip, Series 6, 7, 8 SE & Ultra all run a variant of the S6 chip. I developed this new app pre-testing entirely on an Apple Watch Series 5 to ensure it would be fast on all supported Apple Watches.

Device Support

Heart Analyzer supports WatchOS 8 & newer. This will continue although this new app design will be WatchOS 10 only. Fortunately all Apple Watches that run WatchOS 9 can update to WatchOS 10 next month, although there is one slight caveat. Users with an iPhone 8 or X will not be able to update to iOS 17 meaning paired Apple Watches will remain on WatchOS 9. Lots of my users still have iPhones on iOS 15 and older Apple Watches on WatchOS 8. This means it’s important to ensure the app works consistently across WatchOS 8, 9 & 10.

WidgetKit

Heart Analyzer will adopt WidgetKit for WatchOS 10 users. This is mostly to ensure that users can put the app in the new Smart Stack. Unfortunately popular features were missing from WidgetKit in WatchOS 9 so it means another fragmented support area to keep on top of.

TestFlight

Heart Analyzer V10.2 is available to beta test through TestFlight. You can sign up here. The new Watch app detailed above will be added soon in a future build.