Please note that this has not been officially signed off by SSE and it may need to go through the approval process.
Overall we were trying to make the site feel cleaner and easier to use by making text larger, improving readability and rejigging the order and placement of elements.
The users of the portal use the system every day so we didn’t want to drastically change the whole flow or change things just for the sake of it, more make small improvements that will save time and make it easier to use.
As for aesthetics, we took a lead from SSE.com as we were told this is the gold standard. The design team that worked on that project supplied us with style guides for button styles, typography, colours etc. We used this as a basis and we built on top of it.
We stuck to the main SSE colours but added in some tint variations to give us more options to split up content. We kept to a fairly muted look and this was to make sure that nothing was too distracting, but there may be room to explore a darker more prominent nav to add some more colour, detailed in the style guide.
Using a light grey background and white cards creates distinctive sections to each page. The subtle shadows used on the cards again help bring them forward and further helps to split up the content.
The current form fields on SSE.com don’t have labels and that is something we needed here so we have taken the opportunity to refine the styles of the form inputs. Using a subtle border-radius to create a more balanced look, a soft grey outline and a strong navy label.
We have introduced page titles to deeper pages to show users where they are at all times. The breadcrumbs show them where they are within the admin portal and the page titles show them where they are within certain sections.
Previously main page actions were at the top right of each screen. Moving them to a sticky section at the bottom makes them omnipresent as users are scrolling down the page to check data. We also made these actions more prominent by making them bigger and styled like buttons rather than links.
While talking to users we noticed some of them are using quite small screens. There is a lot of data to sift through so to show as much of that as possible we have opted for two styles of navigation. A main open nav with labels and an icon only nav giving them more horizontal space. We have included a toggle at the bottom of the navigation to allow users on larger screens to open it fully. This choice should be remembered as users move between pages.
It could be that the navigation with labels is open on larger screens, 1400px and above and the icon only nav is used for smaller screen sizes for example. On the icon only nav, we have introduced a hover effect that displays the item name to help users find their way around, over time the icons should become associated with the label and that should speed up navigation.