Building

Lessons from craft polish

Pushing on craft isn't just optimization it also helps uncover hidden states and bugs

Two Surgency session screens side by side—the reworked tick ring, a lime 09:55 and “+5m” on the left, the earlier grey ring and “+5” on the right

4 min read

This Saturday I spent time building Surgency, my focus tracker app with a fitness style aesthetic. Because yes, the world does need yet another tracker :) To be honest, I’ve struggled a lot in picking up building the app again, sometimes it feels like there’s so much to do and perfectionism rears its ugly head.

But the principle I like to follow is — build the skateboard, not the bicycle with no wheels and iterate rapidly. Today’s world favors moving fast and whereas in the past where building, deploying, testing was slow; this is no longer the case.

Carve the ice sculpture, then chisel

Here are the key things I worked on to make Surgency polished. Sometimes you have some idea of what to build but it’s not 100% certain. The joy of building, of being in flow is that you’re feeling your way through it. The process of creation uncovers more.

Uncertainty is part of the process. In the past I would try to strip out as many unknowns as possible because it would mean I knew my stuff—I considered every possible edge case. But sometimes you just have to get your hands dirty. Practice isn’t theory, it’s messy. You may have to muddle through it and come out the other side better for it.

Real artists ship

No matter how rough, it’s important to get things out there—as Steve Jobs said, real artists ship. As designers we usually design for many different audiences such as:

  1. Our users first and foremost
  2. Our stakeholders as well to show what the future might be
  3. Ourselves

And designing for ourselves is invaluable. Sometimes you need to pressure test prove or disprove certain hypotheses and you don’t know ahead of time unless it’s real. Ok enough theorizing—here’s what this meant in practice.

The Today tab, four sessions as large gradient cards in purple, red and orange
Today—a 190pt glow card per session, colored by effort zone.
The Analyze history, compact rows with the session number leading and durations in lime
Analyze—a compact row, the session number leading and the duration in brand lime.
The Projects roster, a donut chart above four project totals with each name in its own color
Projects—the roster, each project's name in its own color.

One thing I was looking to polish is to unify the UI for tracked sessions. Initially I started with small compact view on the Analyze page, tried to retrofit this in projects but considered a different pattern on home. There was definitely design drift so I wanted to pressure test some options to consolidate. Color means something different on each screen: effort vs project. Where I landed — one row with effort being the most prominent.

The Analyze history before the change, session numbers leading and durations in lime
Before—the session number leads and the duration is brand lime.
The Analyze history after the change, colored zone pucks leading and durations in white
After—the zone puck leads and the duration goes white. Same day, same data, same scroll position.

Additionally there were some other benefits in hierarchy. Putting the rows right below the weekly wrap establishes the right hierarchy to see the most stats over the past week — what were the victories and the challenges you’ve tackled? Having one tappable card makes it enticing and you can still reference the previous sessions right below it.

The Today tab filled by four large gradient session cards
Before—four sessions fill the screen on their own.
The Today tab with a Weekly Wrap card above four compact session rows
After—the same four sit under the Weekly Wrap card, with room to spare.

From Settings to Account

Not gonna lie — I struggled with this one. At the moment Surgency is primarily offline only, there are no other connections but I still wanted to feel the app personal regardless

  1. Sessions tick toward the next rung: 1, 10, 50, 100, 250, then every 250
  2. Hours split by effort zone, so the ring shows what your time was made of
  3. Day streak rises toward your own record, not some arbitrary target
  4. Breaks as a share of sessions

Under the dials sits a History month calendar. It lights a day solid when you hit the goal that day’s first session confirmed, rings it when you fell short, and dims rest days along with anything before you started.

The old Account tab—three lifetime totals above a plain settings list
Before—three lifetime totals over a six-row settings list.
The new Account tab—a washed cover, aura avatar, four dials and a month calendar
After—cover, aura avatar, four dials and the History calendar. Every preference now sits behind the gear.

Making effort felt

I also added a mins / session switch in Analyze. Minutes tell you how long you worked. Sessions tell you whether you hit the goal you set. So the switch moved to Weekly and Monthly, where each day becomes a column: its goal standing behind in gray, the sessions you actually did in front in lime, and anything past the goal turning overtime magenta.

The weekly Analyze chart plotted in minutes
The week plotted in minutes (default)
The same week plotted in sessions, each day's goal in gray behind lime bars with magenta overtime
Sessions: green is sessions set and magenta is for beating the target

Rest days count now. There was a bug where the weekly chart used to skip the bar on any day you’d configured as a rest day. So a Saturday you worked anyway simply vanished from the chart, while its sessions still counted in Highlights, Projects, Zones and the history list.

The track color. I moved the rim and track off a neutral gray onto #0D0C2C—a color tinted with the background. As you can see the difference is pretty clear.

The countdown ring before—90 faint hairlines on a neutral gray track
Before—90 hairlines at 15% white on a neutral track, and “+5”.
The countdown ring after—172 crisp ticks on a background-tinted groove
After—172 ticks at #27255A on a background-tinted groove, a single-pass glow, and “+5m”.

Crafting is bug fixing

I have a difficult relationship with craft. Craft isn’t end all and be all—the world’s awash with products that look and work great but nobody wants. That said, there are benefits to being a better crafts person.

As shown here, yes the improvements fine tuned the app (optimization) but they also forced me to pay attention to other things that I’ve glanced over. It was the act of looking fixing, testing, discovering new issues or bugs, fixing, and breaking again that made the app stronger.

And the good news it that it’s never over. Any app can be improved. And in my case, looking for visual drift helped me uncover a whole host of issues that I didn’t foresee.