Pedometer++ Redesign Walkthrough

Design Diary

All summer I’ve been chronicling my iOS 26 redesigns. With the September event just around the corner I am delighted to report that I was able to complete my work for both Pedometer++ and Widgetsmith.

The final styling of each redesign is different between the two apps but in both cases I feel like they landed on a solid interpretation of the new Liquid Glass design language.

I figured the best way to explain the design I went with for Pedometer++ was to make a short video walking through the design and narrating my thought processes for some of the major screens in the app:

David Smith




New Watch

Design Diary

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:

David Smith




Fresh Workouts

Design Diary

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.

David Smith




Moving Home

Design Diary

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:

David Smith




Finding my Way

Design Diary

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.

David Smith