watchOS 10 Redux

The funny thing about working on my Liquid Glass redesign for the Pedometer++ watchOS app is how very little needs to actually be done. A couple of years ago with watchOS 10 Apple introduced a very similar design language, with edge-to-edge backgrounds and frosted overlays. This redesign also carried with it the underlying nudge to move away from any form of custom navigation and instead rely on system provided mechanisms.

So when I did a simple rebuild of the project with Xcode 26 the result for many of my screens was already pretty close. Here’s the main current steps screen.

Other than the buttons going from the flat frosted material to the glassy sheen there is very little which initially needs to be done here. Similarly, the basic workout screen has a similar result.

Route Planner

Where things start to get slightly more interesting is when I look at some of the more sophisticated screens in the app. For example the route planner screen.

Here the initial step is the same to switch the corner buttons to glass.

But what to do with that distance indicator at the bottom? My instincts here is that there are really two ways to approach an element like this: blend it into the device frame or harmonize it with the glassy buttons.

Blending it into the device frame would look like this:

Which works visually but also feels like it might be contrary to the general watchOS design language where we aren’t supposed to be emphasizing black edges of the device. So let’s try glass instead:

That feels very harmonious. I’m not 100% convinced though as it does feel slightly odd. The glass texture and effect is continuing to be changed and developed with each successive beta, so I don’t want to make any decisions based on its current look. Instead, what I’m thinking I’ll do is leave it there for now and see what it is like in a few betas time.

Workout Chooser

Another place where there are subtle changes which need to be made is in the start workout chooser. Again the starting version has the watchOS 10 frosted material look.

One area I’m still struggling a bit with in Liquid Glass is exactly when to use which variant of the glassy texture. This feels like a place where some glass is in order.

I start with the prominent glass variant.

But that feels too heavy and a visually distracting. So maybe a lightly tinted variant of the regular glassy style.

I like that. It draws colors from the background but still gives each workout type a distinct flavor.

Metric Chooser

I have found that the contrast between the prominent and muted variants of glass really work well for indicating state changes. In the metric chooser there is a list of entries which you can choose between for display, with each either enabled or disabled.

I found that using a prominent style for selected and a muted for unselected visually is really clear.

Additionally, the transition between the two states is visually gorgeous.

Workout Controls

The workout control screen is another place where I found myself wrestling between different button styles and prominences. Here is the starting point:

A straight forward conversion to Liquid Glass buttons would look like this:

Which is pretty solid. The next thing I explored was to have the button icons all the same color.

Nope, don’t like that. Maybe in a brighter button mode?

That actually works pretty well. But maybe they should be circles?

No, I think that makes them visually too small. These buttons are used in a dynamic physical context during workouts, so larger touch targets are almost certainly better.

So here they are all in the bright mode. That works alright, but I think is just too bright and bold. So I think I’ll go back to the initial conversion for now.

Future ideas…

That is it for where I’ll leave the core parts of the app for now. This transition from a watchOS 10 design to watchOS 26 has been relatively straightforward.

Where things start to get interesting is with the longer term ideas I have for the app. These likely won’t ship with the September updates, where I’m expecting to mostly ship an updated variant of the current app. Nevertheless I’m starting to think about them, here’s a little preview of some of the ideas I’m playing with:

Next up is the active workouts screen. This is shown when the user is out on a walk, hike or run. It uses their iPhone to track the metrics associated with the effort. It also includes route finding features to help with navigation.

It seemed like the best place to start looking for some inspiration would be in the Apple Maps app, which does essentially the same thing…just without the backcountry and fitness abilities.

The overall direction of map focused with glass overlay seemed like the obvious place to start. So first to go is the bottom section, to be replaced by a floating glass panel.

NB: These screenshots were mostly taken with Beta 2, so had a much stronger glass effect, the last ones were Beta 3 where Liquid Glass turned into Frosted Glass.

I tried to make the top panel also have a glass background but I find that doesn’t look quite right and feels a bit disjointed.

So instead I tried to mirror more of the Apple Maps during a navigation session look with the status on the bottom.

That’s much better. In this early draft I tried putting the end and pause buttons on the top like I have in a number of other views for closing map editors…looking at that now that was an awful idea which thankfully later on I will remedy in due course. But until then I experimented with adding a fuller metric display here.

But I think that is visually not as nice and I’m not sure is super helpful.

So streamlined things and added in the maps buttons for controlling route selection, weather and basemap.

I then had the good sense to bring down the workout control buttons to the bottom of sheet. They are hidden when the sheet is collapse and visible when the user taps or pulls up on it.

I played around with adding the additional metrics in the expanded sheet. I was recreating a feature in the old version where you could get a just text display (hiding the map entirely). Visually I’m not in love with this.

But I think the map view is too crowded with all those buttons, so let’s pull them down into the bottom panel, hidden by default.

I tried having the weather display up in the corner (like the Apple Maps app). But I also feel like the two lines of metrics is too much. Instead, I’m going to make the shown metrics configurable, allowing the user to see what they like here.

The buttons in the bottom feel a bit unbalanced so I played around with their button styles.

When I showed this design to a designer friend (Ben), who has much better design sense than I do, they pointed out that arranging the buttons horizontally would make for larger targets, ideal for users who are working out and might not be as precise with their taps.

That was better but then we iterated a few more times on the idea. Drawing inspiration from the Apple Workouts cycling mode screen.

I really like emphasizing the pause button as it is likely the one to be hit most often and the circular arrangement feels good too.

That is where I’ll leave it for now. That feels very streamlined and clean. The core functionality is all still here but in a very easy to read, map focused way.

Next up for my speed run of iOS 26 first draft redesigns is the main Home Screen of Pedometer++.

This one proved pretty straightforward, at least to get to the solid draft stage.

The initial step was to adopt the new Tab Bar design. Pedometer++ had previously used a completely custom tab bar control, which caused all manner of complexity and trouble. So this seems like the opportune time to switch back to the system one, especially since it is so glassy and a hallmark of the new look.

Similarly the top navigation bar buttons are adapted to the new button shapes and looks.

Note that the tab bar tint being blue is just an artifact of the way SwiftUI Previews work, in the app it is actually green.

Right away this is looking pretty much at home in the new design language. But there is something which bothers me a bit. All the empty white space feels a bit expansive in a less useful way. One of the features of the old design was that the top bar would tint based on your current day’s goal performance. I try to have visual clues and encouragements in the UI to help motivate you to reach your step goal.

So let’s try making the whole background rather than white, a tinted color matching the current goal state.

Here it is way overdone on purpose to show what I mean.

Or here it is adapted to each of the red, orange, green states at a more appropriate level of strength. I think that overall works better. Especially for the glassy controls, they seem to work really well against something which has some color. On completely white they drop a bit of their distinctiveness and are harder to quickly identify as buttons.

Lastly I just need to clean up the backgrounds of a few of the views which were previously assuming a white background and so now look a bit weird (like in the streak length marker label). Also, I think the title text needs to be a bit bigger to better balance with the button sizes.

That’s pretty solid. I like it, it feels ‘new’ but not in a way which I think will cause confusion or complaint. This root screen is the heart of Pedometer++, and has been very similar for nearly 10 years now. I want to be very conservative with updating it, so as not to cause customer frustration.

Here is a before and after:

Yesterday’s re-design involved updating the “Start Workout” screen, which I chose as one of the core screens of the app. Today I’m going to walk through redesigning another of more pivotal areas of the app, maps!

Pedometer++ has a number of mapping based features for planning and reviewing your walks, hikes or runs. Within Apple’s own iOS 26 apps, I’d say that Apple Maps is one of the prettiest implementations of the new design. Conveniently it also includes several of the kinds of features which Pedometer++ has to find a design for.

This is a screen which actually neatly falls into a clear separation between “content” and “controls”. In the “Start Workout” screen this was much squishier, but here we have the map and its annotations and then things which either edit or report on that contents. This is a perfect spot for concentric glassy elements overlaying the content.

Here is my starting point:

This design feels very constrained in the perspective of the new language, the map is squished between the two white bars and overall this feels like it creates an unstable tension.

So the very first thing I need to do is to get that map going edge to edge.

That already feels much fresher, but the text based top buttons feel a bit heavy and distracting. So let’s swap those out for some of the newly defined Standard system icons.

Often the “primary action” is given the prominent button style. So let’s try that for now.

Now let’s put the elevation graph and route stats panel back as a floating glass sheet. The proper API to round this sheet (.containerConcentric) doesn’t appear to be in Beta 2, so I’m just fudging this for now with some hard coded corners radii. The overall effect is pretty good, just enough of the map shines through to give a pretty effect but still very legible.

I think I’m gonna drop the toggle for distance vs time scale on the chart. The difference is way too subtle in most situations to be useful and I think it just creates confusion overall. That leads to a much cleaner looking chart.

Next to start putting back in the buttons which control the route editing. First up the search for location button. This is used to allow the user to jump to a named place rather than having to swipe around the map.

Then the route editing controls for removing points or switching between snapping to paths or straight line plotting. To start with I just plopped the current buttons in their with a .glass button style.

That is obviously way too wordy and doesn’t really fit with the sleek UI I’m going for. So I’m gonna make two changes. I’m gonna drop the “Remove All” option from this primary editing UI. It is rarely used and dangerous so likely best put in the “Settings” area for the route. Then I’m switching over to simple icons for the buttons.

That is visually a lot better but I think it makes it much more confusing about what the snap to path vs straight line plotter button does. So I think I’m gonna put a status area above the info sheet. This also can contain transient messages when it is doing route processing or similar.

I think the info sheet could benefit from a bit of visual distinction between the elevation graph and the route information. They are related but look a bit too smushed together right now.

I think I might also try pulling down the route name into the button sheet and the settings button too.

That’s the right idea but the settings button isn’t right there. It should likely be next to the route name area.

That is getting pretty close but I think the scaling isn’t right. So let’s make the button a bit bigger and move the route name out of the header.

I like that but I think the “Edit Route” text is kinda redundant and makes the map feel a bit squished again. So maybe let’s leave it open so that the map can fade gently to the top bar.

Getting pretty close to a first draft, but the more I look at it I don’t like the way the top right button is the only filled in button. While it is the ‘primary’ action it feels off balance to me. So let’s go back to a simple tinted symbol.

Much better. I feel pretty good about that as the starting point for now. That feels very ‘iOS 26’-ey to my eye. The metrics are still a bit off, and I think the graph styling feels a bit disconnected but this is a good place to stop for now and move on to the next screen.

Yesterday afternoon I submitted my last major pre-iOS 26 update (which feels very good to be out the door). So I am now able to turn my attention more fully to iOS 26 updates.

I’m starting by focusing exclusively on the design update portion of my iOS 26 work. While there are a variety of other functional changes I need to make, what is most important right now is to build a basic design so that I can start living with it and see how it feels in practice.

Finding Inspirations

The overall complexity of the design changes are much simpler in Pedometer++, and so that’s where I’m going to start (rather than Widgetsmith). Then within Pedometer++ I need to decide where am I going to begin work.

I need to establish the visual language that I’m going to carry through the app. The new Design Language of iOS 26 is not wholly prescriptive, it leaves large room for individual interpretation and places for me to put my own spin on things.

So I took a look at Pedometer++’s screens and picked out a handful of “core” screens which I think if I get right will serve as a strong foundation to then apply to all the other parts of the app.

The first of these core screens is the “Start Workout” screen:

I’m starting here because it includes a number of the custom controls I’ve built for Pedometer++ and also because it is a good example of a “configurator” screen.

My design process while still trying to learn the new design language is that once I pick the screen I want to work on then I will scour the Apple provided apps for examples of things which hold similar components. I’m looking for inspiration and examples of the numerous small details which make up a consistent design. Apple has a clear head-start on my own understanding and so I’m trying to shortcut as many pitfalls as possible.

I put all these screenshots into an “Inspo” folder and regularly scan through them while I’m mulling over a design detail to see if there are components I can draw from. In this case I found that the “Create Reminder” screen is probably the closest thing to my “Start Workout” screen, with the “New Event” screen a close second.

Iteration

The first things I need to do is to change the bottom “Start Workout” button from a translucent sheet to a glassy button with an edge blur along the bottom. I think this fits well with the general ideas of placing important controls along the bottom edge and using glass to indicate a navigation/structural control.

Next the headers in the sections are way too big and heavy, so these are toned down.

My custom segmented control looks out of place now. I could either change it to being a capsule shape (which generally seems to be the default control shape now), or I could try using the default system segmented control picker.

That feels more at home in the design, but I also find having several of these next to each other visually very busy. So instead I’m gonna try using the menu based picker instead.

For a user choice which likely doesn’t change very often this feels much cleaner and clearer. This control will default to your most recently used option so most users will likely only change it once. I like that much better, so will also apply that to the Workout Goal setting.

Next up are the shadowed, round-rect buttons I was using before. I start off by making them capsule shapes and giving them a flat appearance.

I think the sections being colored and the background being white doesn’t look quite right so let’s flip that around.

Much cleaner, but now the inline buttons look way too strong and have the same visual prominence of the main “Start Workout” button. So let’s tone those down by making them use the secondary color for their background, keeping the color in the text instead.

Much better. The contrast in the buttons still needs some work, but overall the structure and general “feel” seems pretty good now.

Here is the before and after for comparison.

This picks up a lot of the general design cues of the “Add Reminder” page but in a way which (hopefully) feels familiar to someone who was coming from the iOS 18 version.

Next up…maps.