Design of a settings page

GymSales are a provider of lead and member management software for gyms and fitness centres.

As their product grew in complexity, so did their settings page – it required some attention before it could grow further.

The challenge

Restructure the current settings page to allow more intuitive discovery of settings items and to allow for the page to grow – in other words, allow for more setting sections to be added.

Current state

The existing page had a number of problems. Here are the three key problems I wanted to address.

Visual noise

Unnecessary UI elements create visual noise and distract the user from completing their task.

In the image above, you can see that the gym name is repeated, as is the label ‘General settings’. The horizontal divider lines are unnecessary – adequate separation can be better achieved through smart use of white space.

Menu hard to find

The way you accessed different sections of the settings page was through a tiny ‘Menu’ item shown in the image above, in the top right. This was neither intuitive, nor easy to find.

Poor form structure

The forms used in the settings page needed a lot of work.

Research

First up, I did some research to see how well known sites with complex settings pages solve this problem. I looked at Facebook, Slack and Google Inbox. You can see the screenshots here.

The common layouts were flat, tabbed and left hand side menu.

My sketch documenting the basic layouts in common use

Considering page layouts

In the context of GymSales, the most common layouts would look this.

Flat page

This design would require too much scrolling, and would quickly result in a settings page that is way too long.

Horizontal tabs

Sooner or later, we would run out of space for the horizontal tabs. This could be used for groups of settings sections, with a flat page within each one. However, we would still run the risk of having some very long pages.

Left hand side menu

This is the approach used by Facebook, amongst others, and provides most flexibility in terms of adding sections later on. Also, it is very easy to locate the items in the left hand menu.

The final design

The key features of the final design are:

The outcome

Soon after launching the new design, we needed to add another section to the settings page. This time, the development team needed no input from me, and could just follow the new layout pattern.

We now had a settings page that was much easier to maintain, add to and navigate.