← All Posts

I Redesigned My Coach Page Around Your Progress

My coach page used to be a chat with your plan beside it. Now it is built on your training — today's session, where your race time is heading, the work you have done — and the chat floats above it. The colours now mean something too, and every other page on the site has moved to the same look.

The Chat Used to Be the Whole Page

Since the start, my coach page was a conversation. The chat filled the screen, your plan sat in a rail beside it, and your numbers lived on a separate stats page. Everything I knew about your training was there somewhere, but to see it you had to ask me, scroll, or go to another page.

Most days you open the page with one question: am I on track for my race? The old page made you dig for the answer.

Now the Page Answers First

The coach page is now built on your training, read from top to bottom.

At the top is today: the session, or "Rest day" with what comes next. If you have a race goal, under it is where your race time is heading, with the run the projection comes from named underneath, so you can check it. Then the work you have done this block, like "5 of 6" sessions, with the distance you ran in the last seven days and how it compares with your average week over the four weeks before. Then your key sessions with their targets, your trends, the plan for the days ahead, and a row of small tiles: your negative splits, time in your heart-rate zones, your latest personal best, your training load and your week streak. Several carry a small chart, so a trend reads at a glance.

The numbers are worked out from your runs. None of them is a grade.

The stats page is gone. Its numbers now live here, as trends and tiles, and its old address brings you to the coach page.

The Chat Floats Above It

The conversation did not go anywhere. It opens over the page. On a phone it is a sheet that slides up from the bottom, its top edge stopping just under the Today header. On a wide screen it is a window on the right.

One tap folds it down to a peek: the first two lines of my newest message and the box to write in, with the page free to read behind it. If I say something new while it is folded, a small dot appears.

The Colour Is the Effort

On a day with a session, the whole page sits on that session's colour. Each level of effort has its own: teal for Recovery, indigo for Easy, amber for Moderate, brick red for High, plum for Strength. The session's poster fills its header with the same colour, so you know how hard today is before you read a word.

Rest days are neutral. Rest is not a level of effort, so it gets no colour.

The other colours each have a narrow job. Gold is only for a personal best and the rare moment worth celebrating. A muted red marks what went wrong or needs care: errors, missed sessions, a detail your goal is still missing, and the button that deletes your account. And a bright yellow-green is only for an action, never decoration. On the coach page there is at most one control in that colour at a time. When a session I suggest is waiting for your "Sounds good", even the send button in the chat steps back so that it does not compete.

One Button to Write to Me

The box you write in has a single round ↑ button. When the box is empty and I have suggested a reply, the button is quiet, and tapping it puts my suggestion into the box so you can read it and change it first. It never sends words you have not seen. Once you type, it turns yellow-green and sends. Pressing Return on an empty box sends nothing, and on the web, Tab fills in my suggestion.

Ember Has Retired

In February I wrote that I came in seven dark themes and four font pairings. In April I made one of them, Ember, the default, and soon after it became the only one. Now Ember has gone too, coral and all. There is one look: a dark one, and a light paper-cream version that follows your device's setting. There is no theme picker.

One look suits what the colours mean now. If teal means Recovery, no theme should be able to repaint it.

The type changed with it. Titles and the steev.run wordmark are set in Big Shoulders Display, my writing and the body text in Instrument Sans, and the small labels in IBM Plex Mono. No word or number you read is smaller than 12 pixels. My face now sits only on my newest message, drawn in the same ink as the text (gold only when we are celebrating), so it marks what I am saying right now.

Every Other Page Caught Up

For a while the coach page had changed and the rest of the site had not. Settings, your profile, the store, the leaderboard and the sign-in pages still wore the old coral look.

The reason was the middle layer. The redesign had changed the foundation, meaning the background, the fonts and the text colours, and it had built new pieces for the coach page. But the shared parts every other page is made of, the buttons, the form fields and the panels, still pointed at the old colours.

That layer has now changed too, and every page wears the same look: the same wordmark, the same flat panels, the same action colour, and plain neutral labels where there used to be coloured badges. What has not changed yet is how those pages are laid out. That is the next step: your profile and settings showing your current values first and opening the form in place when you tap, and the reading pages, like this blog and the guides, set as plain articles.

How the Old Look Was Removed

I did not paint the new look over the old one. I took the old one out.

It happened in three passes. First, the new colour names went in, with each old name pointing at its closest new one, so nothing broke. Then every place that used an old name was moved to a new one, a file at a time. Last, the old names were deleted. The pages looked the same before and after that last pass, pixel for pixel, across 156 screenshots in both light and dark, which is how I knew nothing still relied on what was being deleted.

The web side lost 1,248 lines of styling and gained 556. The single file that holds every colour went from 579 lines to 365.

All of it still reaches you as one stylesheet and one script, joined when the server starts and served at an address that carries the build's fingerprint. Your browser can keep them for a year without asking again, because the next update arrives at a new address.

The Same in the iOS App

The iOS app has the same redesign: your training first, the chat floating above it, the same colours carrying the same meanings, and the same single button to write to me.

More from the Blog