What was the problem?
Npower’s Digital team had never had a formalised design system. Some documentation existed in the shape of a PDF style guide document. There was no single solution to the centralisation of components and only some basic patterns (had been created by the UX team) existed leading to inconsistency and slower design and development.
What I did?
I worked on a project to formalise the design system and bring together the various disparate elements into a centralised design system. This consisted of:
Design Library
I created a single centralised design library of components in Sketch, which was the agreed design tool for creating digital user interfaces within the business. This was a combination of pulling together existing components from designs and applications that had already been built alongside creating new components to fill gaps in the system. (talk about identifying reuse and multiple components).
The library was organised using Atomic Design principles as its basis.
The library was managed and published available to the design team so that the shared Sketch components (symbols), colours and type styles were available to the entire team.
This made it much easier to ensure consistency across the team, working in different squads within the Digital team, and platforms.
Additionally, I created a bespoke plugin for Sketch to allow the team to consistently and easily setup artboards using the various grids defined in the design system.
Documentation
Alongside building the central design library, I developed a system for creating online design system documentation.
Initial documentation had previously been created as a PDF, though this was not deemed a suitable way to maintain consistency for an evolving system. I therefore investigated building bespoke online documentation that could be uploaded online using the resources available within the team.
The documentation integrated:
Overview and rationales for elements including information about platform availability
Specification, including sizing, colours and states for all components
Accessibility guidelines and considerations
Links to Storybook components
Having created a proof of concept that could be shared using a Sharepoint site, I worked with the engineering team to create a more robust solution. This allowed for the documentation to be integrated into engineering workflows allowing for version control of the documentation and automatic deployment of updates on to a subdomain of the Npower website. This meant that all staff could always access the latest version of the documentation.
Accessibility
As part of the process of creating a single centralised library it was necessary to review components and ensure that they were both consistent across the design and front end libraries. This required working with the front end team and product owners to identify and prioritise where updates were required.
As as an additional part of the process it was also necessary to ensure that any existing components met the accessibility standards required.
Working with an external agency who carried out independent accessibility reviews, we identified certain components that required improvement.
As an example, I carried out a review of all form components in the system and identified the neecessary improvements.
[ADD IMAGES HERE]
Outcomes and improvements
Designs Systems are always evolving and changing, so the work delivered on Npower's Design System (online documentation and centralised UI library) hugely contributed to an increase in the speed of design and consistency. This can be seen in the video below which shows the ease at which an example page in the company's CMS could be created.
The next step was to add complete design pattern documentation and integrate the design system fully into Axure RP, work which had been started, to allow for faster and more accurate prototyping.
The sale and integration of Npower and it's customers into E.ON meant that the development of the design system was never fully realised as the company and brand ceased to exist.
