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.
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.
The existing page had a number of problems. Here are the three key problems I wanted to address.
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.
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.
The forms used in the settings page needed a lot of work.
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.
In the context of GymSales, the most common layouts would look this.
This design would require too much scrolling, and would quickly result in a settings page that is way too long.
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.
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 key features of the final design are:
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.