The first iteration of the So Energy Design System was created in mid-2020, whilst the company was partway through a rebrand. Most components were initially kept relatively simple with the view to developing them further once the brand work was completed. Whilst later expanding the company's offerings into new areas and clarifying use cases based on data and observations, it was clear that design improvements could be made to many components.
Based on some earlier exploration work and development of the original base text and colour styles, I created new versions of components in Figma and tested them in prototypes for relevant projects, such as the solar quote journey and fuel supply sign-up.
Below are some examples of v2 components I worked on:
The new version features a larger touch area and larger text on mobile screens.
The same component is used across desktop and mobile and now uses elevation to increase the sense of depth, tactility and state.
Version 2 of the component is more flexible to journeys with a varying amount of stages or large number of steps.
The new version uses less vertical space, which is especially useful on mobile.
Replaces previous version which used was designed for limited uses.
Version 2 has more variants for a wider variety of placings, uses elevation, and uses colours from an extended UI palette, created after the rebrand.
Once tested, tweaked and approved, each component was handed off for development. Once developed and in production, the previous version of the component was deprecated in Figma. The new components were well-received by stakeholders and contributed to UX and design improvements in projects in which they have been used so far.
Next steps include: