So Energy Design System

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.

Client

So Energy

Type

Product Design

Year

2022

Process

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:

Radio Button & Checkbox

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.

See the developed radio button component on Storybook


Progress Indicator

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.

See the developed progress indicator on Storybook

Tooltip

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.

See the developed tooltip component on Storybook

Outcome

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:

  • Creating new versions of components as necessary
  • Improved organisation of the whole Design System
  • Adding more in-depth documentation and usage guidelines
  • Auditing and developing base text and colour styles to reflect usage and usefulness
  • Aligning more closely with the development team

Other work

Want to work together? Drop me an email.

→ laud@laud.li