How to Improve Your Web App UI in a Few Simple Steps

Design Jul 28, 2020

I'm a huge advocate for incremental design changes. Designers always want to redesign everything, but that's rarely the key to success. Let my try to make a case that even the smallest improvements matter if you do them consistently.

  • You don't need a complete redesign. Smaller changes have a massively larger ROI. Just like in home renovations, many small touchups and a few strategic investments can create massive value.
  • Small changes have better psychological effects. Instead of a monster project that sucks all your resources, shipping small improvements consistently is super fun. What's even better, your team and customers will notice.
  • Every design has shortcomings. Just like developers are continually fixing bugs and improving performance, designers shouldn't consider a design finished when it leaves their desk.

Case TrainingPeaks calendar view

I wanted to give an example of how an existing UI could be improved incrementally. I’m going to introduce tweaks to a product that I use myself. TrainingPeaks is one of the most advanced tools for triathlon, cycling and running performance analysis.

The same techniques don’t necessarily apply for your web app, but I hope you understand the principle.

This post is not intended as critique to TrainingPeaks: in fact, it's one of the best products for serious endurance athletes. It’s just a great example of how small UI changes can add up.

Here’s the TrainingPeaks calendar view, where I can track my running workouts:

TrainingPeaks calendar view recreated in Figma.

Step 1: Harmonize the colors

See how the greys and blues look dull, even a bit impure together? A cool way to fix this is saturating the greys with blue. Not only will it result in a more harmonious look, it also injects more TrainingPeaks brand into the app.

Voilà!

After our paint job, every grey element on the screen is some shade of blue. I made the top right button orange to create contrast. These changes would be quick to implement with just a few lines of CSS.

Saturating the greys feels scary at first (“it’s too blue!”), but once you get used to it, the result is naturally pleasing to the eye.

Step 2: Change the font

Next, I swapped the font from Helvetica Neue to Inter. While there's nothing wrong with Helvetica, I find Inter better suited for UI design, with better legibility and features for numbers. The difference is small but noticeable. Changing the font requires almost no work, but remember to pay attention to weights, sizes and line heights, as they aren't similar across all fonts.

Step 3: Change the icons

A nice icon pack can improve your look and feel instantly. It’s like changing the door handles of your kitchen cabinets. Here I decided to go with two-tone icons.

Step 4: Clean up the navigation

This is the first step that requires new code components. We can save vertical space by consolidating the navbar and the tabs. I also added some icons, gave the buttons an outline, and rearranged the elements:

Relatively small changes result in a cleaner look and saved vertical space.

Here’s the result after steps 2–4, with some added margin on the right.

Step 4: Change emphasis to focus on important content

Finally, I made small tweaks to the hierarchy. In general, secondary and tertiary information (such as dates) should be de-emphasized, and the main content should stand out. So I started experimenting:

First, I removed most of the color and added some rounded corners and drop shadows. Now there's too little hierarchy, as the workouts don't stand out. So I continued experimenting:

Subtle borders help a little bit
A background color directs the attention but creates an unusual pattern

Now the workouts stand out better, but the pattern feels weird, as elements on top are usually brighter than the background. Instead of adding emphasis to the cards, let’s  try de-emphasizing the background:

A darker background does the trick


OK, I’m happy with this. Finally, we can add some spacing between the elements and decrease the width of the summary section.


Great, I think we’ve come far enough to illustrate the point! 🎉

Let’s pause and review what has happened this far:

  • All changes were relatively small, mostly CSS, and manageable even for a single developer to do quickly. Some of them require app-wide changes, and the workload will depend on the maintainability of your current CSS setup and components.
  • When redesigning, I felt the urge to make big changes and sneak in some new features like charts. It’s incredibly hard to resist this when you’re redesigning something. New features are always welcome, but my recommendation is to keep every change as small as possible.
  • Combined, tiny changes can turn an average user interface into something more modern.

Before and after

Leave a comment below if you have some additional ideas or feedback about this!

Kerkko Visuri

Product guy from Finland. Previously @ Wolt and BCG. I like distance running, good books and cooking.