UX case study. How to clean up technical pages once and for all

What a decent person does when he has guests coming? I don't know about you but I clean up :) Wash the floor in the living room, vacuum the carpet, put everything that scattered all over the room into the wardrobe and on the balcony.

Guests should stay in the living room, right? It's a place they will feel comfortable and relaxed. But if some of them open a wardrobe or go to the balcony – he'll see a pile of junk.

If we draw the analogy with a software, staying in the living room will be like the main scenario of users' interaction with the interface. Opening a wardrobe or a balcony will be like visiting of technical sections.

So the question is – do we need to try to make technical pages convenient and beautiful?

Technical section – is the last thing a designer pays attention to. And he is perfectly right. It's important to design a convenient and useful interface for the main customer journey and only after that think about settings.

But if your product is several years old already and the technical section is still a pile of junk – maybe it's time to pay attention to it because customers use it sometimes, feel frustrated and make mistakes.

Guys from Gmail team designed a settings section a decade ago and it seems like they haven't touch it since then. My eye is twitching when I'm looking at it – it's a mess, no paddings at all, vertical lines are not straight, and I forget to click a Save button half the time because I don't see it.

At Convead I didn't pay attention to a settings section for a long time. When I needed a new technical page I couldn't use existing design blocks and almost always has to figure out something new and add additional elements.

It's pretty common situation – when we made our first settings pages nobody knew what we could need in the future.

We had scalability issues as well. E.g. live chat settings page was pretty short at first but in a year it was two screens long and it was hard to work with it:

We got the idea from Autopilot when developing a new billing page. The idea was to divide a page into several small blocks and separate them visually.
Our old billing page looked like this:

Too much information on a single page – a plan description, an interface for plan changing and a lot more. Users felt lost and didn't know where to click.

New billing page looks much better:

This concept appeared to be so convenient that we expanded it, tuned and started to use in settings sections.

Blocks transformed to headers. In some cases they can expand and show an additional content. E.g. in the Convead installation wizard a user can't see the inside content of a block if he hasn't completed a previous one.

A block can contain any content: a form, a text, a table etc. Everything looks consistently.

The most important thing is that any new page can be made of these blocks and my frontend developer can do it himself almost without my help.

Some technical pages are still not redesigned, but we'll fix them over time.

Because it allows me to place all the necessary information on one page compactly. A user can navigate easily and stay focused on one piece of information at a time.

I could make a bunch of small pages instead of several blocks on one page, but in this case, I'd have to use huge and complicated menu. I could make a tab control or tags, but it creates an extra burden on the user – he doesn't see all the content, tab headers are small and the number of tabs is limited.

So I believe this solution is convenient and I'm likely to use it not only in technical pages but in main sections also. I will be happy if you find it useful as well.