In order for you to create enjoyable experiences, we want to create energy and remove friction. Our minds form expecations of the way the world works and when reality does not match these mental models, we experience friction.
Matching mental models
We must match our users mental models as closely as possible in our interfaces and be very mindful about introducing new models(1). We must establish logical patterns so our apps are easier to use.
Refactoring visual design
When we start with our designs, we define fonts, sizes, weights and color in order to guide our users eyes in the best way possible. We create new rules. When adding and tweaking features over time, we add more exceptions to these rules. A different font-size here, a different color there. Before we know it, we have more variation than we need.
At AppSignal, we refactor by throwing away variations in color, size and weight in our front-end. This leaves us with a bland and almost boring version of our interface. From here we start adding new rules and patterns. Slowly, our design starts taking a new and cleaner form(2).
The pitfall of rules and patterns
Only following patterns might make our apps easy to use, but can also make your design lack identity. We remember the peaks and endings in our experiences (just think about one of your past relations). So after creating our rules, we must break them. Add more color to highlight things, use animations to draw attention or make important things bigger.
Quick tips for design refactoring
Strip down to the bare minimum
Don't be afraid to get your app naked. By this, We mean removing a bit more than you are comfortable with. Remove the columns and grid system. See what it leaves you. You can go as far as removing all css, just to see your html structure.
Do it together
Talking out loud about what you like or don't like about your changes is very helpful. It forces you to form opinions instead of tweaking your CSS endlessly.
Let it rest for a while
Going back and forth between different variations will eventually make your mind numb. You will see what is best with a fresh pair of eyes, so let it rest for a while (or let someone else look at it).
Use a CSS preprocessor
Using something like Sass, Less or Stylus (we prefer the first), will help you to think in systems. Mixins, variables and placeholders are great ways of creating patterns.
Give it a go
Our interface is always being tweaked in minor ways. Over time, we have come a long way. We're curious to hear how you do your design refactoring, let us know in the comments!
(1) Introducing new models is key to innovation. Sometimes we must not match the users mental models on purpose. This causes friction, but of the good kind. Like the friction of rubbing your hands warm on a cold winter day.
(2) We often end up very closely to our original end result. Sometimes this is because our brains make the same decisions when we originally designed our app. It's hard to break these routines. But whatever the result, it always leaves us with a better understanding of our design system and cleaner front-end code.
