SSE's digital transformation programme included the definition and design of a new responsive website. The focus of this was on new customer acquisition and account support for existing customers. SSE's ambition was to develop a ground-up reinvention of how they engaged with prospective and existing customers.
This was a huge project which ran for over a year. I was involved in the initial pitch UI - right through to pixel perfect delivery and on site support for an external development partner.
We worked with SSE to define the design principles which would help us craft the best customer experience.
A cross-functional team established the design principles. This meant we had alignment from the outset which sped up decision making and increased the quality of our output.
With these principles front of mind we could ensure everyone was working towards the same goal.
The concept which resonated best with SSE and their customers was an idea based on the 1968 design film 'The power of ten' by Charles and Ray Eames. The idea was that we would create a simple UI which would work in a layered model, allowing customers who want to complete a task quickly to get through the site without any friction, but those who wanted to explore deeper into the detail can.
We called this layered model 'experience layers'. Each layer supported a singular focused view at all times and encouraged intuitive discovery of content.
As users dig deeper into the site each layer reveals increasingly detailed and specific content. Global functions such as such as login, search and navigation reside on the highest layer and contextual details such as sign up forms reside on the lowest layer.
Each layer is subtly different in visual appearance to signpost the users position in the site architecture. At the highest layer full screen background images and bold typography styles are used, which gradually reduce in volume to a solid white background and fine detail at the lowest layer.
The simple UI focused on using bold typography and a minimal colour palette, which was complimented by full screen, vibrant, engaging imagery.
As one of three designers, my responsibility was to take ownership of product detail and discovery, and new customer sign-up. This was challenging section of the UI due to the sheer amount of information a customer needed to input to sign up.
By creating journeys and screens with a singular focus, we were able to minimise task perception by separating fields into different steps. This eased the impression of how much effort it would take to fill in, and made the process feel simple and less daunting to a new customer.
Within the first year of release, there was a 50% increase in energy and 80% increase in non-energy conversions.
At the time of this project the iPhone5 was the most commonly used mobile device by SSE's customers. While the card metaphor worked well on tablet and desktop, the 568px screen height threw a lot of challenges our way, and ultimately, we should have dropped its use on mobile.
The issue is most prevalent in the product card UI, which had the pagination and 'apply buttons' sticky to the bottom of the screen. Using this pattern on mobile really limited our content area, and the result was that we lost a lot of screen space for not a lot of gain.
