WatchOS 10, design for a glance. Inside Apple’s bold renovation of its most personal interface

Gary Butcher, Human Interface Designer at Apple, offered Domus an exclusive walk-through of the biggest Apple Watch redesign to date, with nods to the Bauhaus and a new watch face that would make Josef Albers proud.

At WWDC 2023, Apple previewed watchOS 10, the next major Apple Watch operating system update. As developers and eager early users started testing the beta versions before its final release in the fall, Domus had the opportunity to sit down with Deidre Caldbeck, Apple Watch Product Marketing Director, and Gary Butcher, Human Interface Designer at Apple, for an in-depth chat about how the update came to be from a UI design perspective.

Rethinking the interface fundamentals

More than any other Apple device, the Watch sits at the intersection between technology, lifestyle, and personal expression. It’s a deeply personal computing device that’s capable of keeping track of a wide array of biometric data while disappearing in the background as users wear it through the day. 
It spurs from a century-old legacy of watchmaking design, which Apple respected yet disrupted at the same time through an interaction model that teleported classic watch features such as the crown and the complications into the digital age.

“WatchOS 10 is the culmination of many years of deep thinking and learning. The Watch is this simple yet powerful device that has appealed to everyone, from tech enthusiasts to endurance athletes, from children to grandparents”, says Deidre Calbeck. “It introduced a new way for users to interact with technology, with many people seeing enormous benefits by not interacting with the technology at all, just by simply wearing it. That’s why we felt a great responsibility of delivering just the right experience with this new update.” Nine years after the first Apple Watch was launched, Apple is ready for the product’s iOS 7 moment. In 2013, iOS 7 revolutionized the iPhone’s software UI and set a new foundation for years of further development. In the same way (yet without the baggage of conflict and internal leadership drama that came along with the iOS 7 update), watchOS 10 is rethinking the fundamentals of Apple Watch's interface, repurposing almost a decade of updates, design intuitions, and a steady evolution into a more coherent and structured interaction model and design framework.

At a glance: the Smart Stack

“With WatchOS 10, we’re introducing an entirely new UI that takes full advantage of the display capabilities and the connected hardware of the Watch,” says Gary Butcher. “It’s a system that adapts seamlessly to the different display sizes of the Watch lineup. Every single app has been redesigned with a focus on clear, consistent navigation and glanceability”. Apple designers have been experimenting with the concept of Glances (i.e., a collection of useful information from an app viewable “at a glance”) in the first couple of watchOS iterations. As of watchOS 3, Apple replaced them with a list of vertically scrollable app widgets that users could summon by pressing the side button. With watchOS 10, that’s changing again to merge the two concepts in one new UI functionality called Smart Stack. As the name suggests, it’s a collection of widgets that lives on the home screen. Users can now activate it by rotating the crown once. The side button has been reassigned to open the control center, which can be (finally) summoned even when an app is open (until watchOS 9, you would have to tap back through the main face and swipe up).

While these seem like intuitive and simple design decisions, they’re relevant changes on a device with only two buttons and a limited range of interaction modes. “When we put something so new in front of a user, we make three main considerations: first, we always try to stay as familiar as possible. The second one is that things should be intuitive — we’re trying to meet users where they’re at, so things can make sense without needing to be explained,” says Caldbeck. “Of course, some people have been using Apple Watch since 2014 and may have become used to particular patterns. So as a third step, when you load the update for the first time, there is a new onboarding screen to guide you through a few things that have changed”.  

Colors and materials

While other Apple mobile devices, such as the iPhone or the iPad, give designers the luxury of developing a UI on a large display real estate, the smaller screens of Apple Watches command a higher level of design frugality. WatchOS 10 translates that into an updated design framework that leverages subtle visual cues, colors, and improved “materials” with a range of translucency levels to enhance “glanceability” and convey information and UI hierarchies fast, efficiently, and consistently across the system.

“In all the apps in watchOS 10, you’ll notice a much more pervasive use of background color, but that’s far more than just aesthetics”, says Butcher. “It’s there to convey information. It helps users navigate or help them in recognizing what app they’re using. Colors adapt, reflecting the time of day or how a stock is trending, for example, or noise levels: all that information is way more glanceable when we use background color in this new considerate way. Colors also play a big impact in organizing content hierarchically when you use the digital crown to scroll through a vertical pagination of different screens in the same app”.

WatchOS 10 background colors convey app-specific information at a glance. In this examples they adapt to the time of day in a target location in the app world clock, the current positive or negative trend of a stock index, or the sound level in the Noise app.

A new Palette

The implementation of colors and materials in the UI, says Butcher, was made possible by the ability of designers to work closely with their engineering partners, who implemented these design directions into software by building upon Apple’s powerful frameworks. The new Palette watch face is the best example of this quintessential design advantage granted by Apple’s vertical integration. The Palette face “depicts the time in a wide variety of colors,” the company says in its marketing materials, using three overlapping layers that create different chromatic compositions as times change. “The Palette is this watch face we have always dreamed of doing. It was only unlocked by having our engineering partners working with the Metal framework”, says Butcher. “Being so much closer to the silicon, they could do things with color and anti-aliasing that hadn’t been possible before. It taps into a legacy started with our Unity watch face (a watch face that celebrated Black Unity and paired with the Panafrican flag band). It might sound a bit circular here, but we were sort of inspired by ourselves”.

The previous work of Apple’s designers is not the only inspiration that Butcher and his colleagues nurture in their design studio at Apple. During our briefing, as he presented a neatly organized display of Palette watch face compositions, I couldn’t help but think of the Bauhaus’ work on color, and especially Josef Albers’ Homage to the Square series, or even some of Kandinsky’s circles. 

“We do expose ourselves to as much inspiration as possible. At Apple, we’re very fortunate to be able to invite people to come speak to us. We have a wonderful library in the design studio that we are constantly stocking with amazing design books”, confirms Butcher, as he offers a rare glimpse into what the famous intersection between technology and liberal arts looks like in Cupertino. “The inspiration also comes from diversity. We have many different disciplines and people from so many different backgrounds and from all over the world”.

Life’s a grid

Apple’s team has already condensed all the work done on watchOS 10 design foundations into a series of detailed guidelines — freely available online — and tools that UI designers and developers can use to create consistent and watchOS 10-ready apps. The layout grid’s evolution is a good example of how Apple offers third-party developers the opportunity to leverage a consistent and effective design framework while developing their apps.

As designer Jennifer Patton explains in a video on Apple’s developer portal, the company’s design team has “developed a flexible grid system that defines the size and placement of controls, labels, and content” on the Apple Watch display. “To accommodate different types of content, we designed three foundational layouts: Dial-based Views, Infographic Views, and Lists. These layouts are designed to adapt automatically to the different Apple Watch sizes supported by watchOS 10.” The watchOS 10 grids are based on the shape of the active display area of the Watch model the user is wearing. The system reads the curvature of the display, then uses that to mathematically inform the sizing and position of the elements in the view. The list view is a useful example of how Apple’s control of both the hardware and software turns into a unique advantage in the mobile industry.

“[In the list view], the time still features prominently in digital or analog form. The mini clock and the date are vertically centered with the crown — this is one of those small details resulting from hardware and software designers sitting alongside each other in the same studio”, says Butcher. “It’s more than just us designers, you know, feeling good about ourselves. We think these design benefits come across to the user. It’s a sense of care that’s felt almost subconsciously.”

Constraints as opportunities

To someone who’s used an Apple Watch since 2014, like yours truly, diving into the watchOS 10 update felt familiar yet new. The experience is often interspersed with “of course!” moments, where a new feature (like the Smart Stack) or other technical updates like the Training APIs feel almost obvious as if they’ve always been there. While daily use is still needed to see how all this translates into actual user experience, it’s already clear that the watchOS update is the product of a long, multi-layered, and thoughtful UI design process.

What’s fascinating to a design observer is how Apple design teams leveraged the limitations and unique constraints posed by the watch size and use cases to inform the entire software experience in a coherent fashion. “We certainly know that the Watch has constraints compared to an iPhone or an iPad in terms of screen size,” says Butcher. “Yet, the Watch can do things that those other devices can’t—it’s always on your body, and you activate it just by raising your wrist. That’s why we don’t always think in terms of constraints but rather design opportunities. With the Watch, you have a fraction of a second of interaction with the device to get what it’s trying to tell you. With that in mind, we made simplicity and glanceability our north star in redesigning watchOS. Our goal was to leverage all that to create a simpler and smarter Apple Watch.”