DEV Community

garry
garry

Posted on

Designing a Minimal UI — What I Removed and Why

The First Version Had Too Much

The first version of BoxTime had a tab bar, a settings gear icon, a history view, round statistics, a customizable color picker, and an animated boxing glove mascot. It was a mess. I know this because nobody used it for more than 30 seconds before closing it.

A boxing timer needs to do one thing: tell you when to fight and when to rest. Everything else is noise.

What I Cut

The Tab Bar

Three tabs: Timer, History, Settings. The History tab tracked past workouts. Nobody asked for this. I was building it because other apps had it, not because my users needed it. Removed.

Round Statistics

Average round time, total training time this week, a little chart. Cool engineering, zero value for the core use case. The person using this app has boxing gloves on. They are not analyzing charts. Removed.

The Color Picker

Custom accent colors. I spent a day building a nice HSB color picker. One of my testers said "why would I change the color?" Fair point. Removed.

Complex Onboarding

A three-screen onboarding flow explaining what a round timer is. If someone downloaded a boxing timer app, they know what a round timer is. Removed.

What Stayed

After the purge, BoxTime has essentially two screens:

  1. Configuration: Set rounds, round duration, rest duration. Start.
  2. Timer: Big countdown number, current round indicator, start/pause.

That is it. The configuration uses simple steppers and pickers. The timer screen is dominated by the countdown -- large enough to read from across the room.

The Design Principles I Followed

1. Glanceability

During a workout, you should understand the app's state in under one second. Big numbers, high contrast, minimal text.

Text(timeString)
    .font(.system(size: 96, weight: .bold, design: .monospaced))
    .foregroundStyle(phase == .round ? .primary : .green)
Enter fullscreen mode Exit fullscreen mode

2. Reachability

Everything interactive is in the bottom half of the screen. During a workout, you are holding your phone in one hand (or it is on a shelf at eye level). Tap targets are large.

3. Progressive Disclosure

Settings exist, but they are not visible during a workout. Configuration happens before you start. Once the timer is running, the only controls are pause and stop.

4. State Through Color

Instead of labels that say "ROUND" or "REST," the entire screen color shifts. You do not need to read text to know which phase you are in. Your peripheral vision catches the color change.

var backgroundColor: Color {
    switch phase {
    case .round: return .black
    case .rest:  return Color(.systemGreen).opacity(0.15)
    case .warning: return Color(.systemRed).opacity(0.15)
    }
}
Enter fullscreen mode Exit fullscreen mode

The Hard Part Is Saying No

Every feature I cut was something I enjoyed building. The history view had a nice SwiftUI chart. The color picker used some clever geometry. But features are not free -- every one adds cognitive load, maintenance burden, and potential bugs.

The version of BoxTime on the App Store today is maybe 30% of the code I originally wrote. The other 70% made the app worse by making it more complex.

If you are building a utility app, start by listing every feature. Then remove half of them. Then remove half of what remains. What is left is probably your app.

Top comments (0)