ion Design System (WIP)

Work completed at RS Group

My role: Product Design Lead, working with the UX Design Manager, Product Designer, UX Researchers & Engineering
Skills used: Component design & Figma build, Design Tokens, Prototyping, Requirement Gathering, Engineering Briefing
Duration: August 2022 - Present

Overview

In Summer 2022, RS Group announced a rebrand which modernised its existing look, aiming to create a one brand look & feel across all the companies within its group. My task was to create a new atomic design system which would deliver this goal across its digital products.

Working with the Client Engineering team and UX Design Manager, it was decided that we would be following Tailwind CSS and using React to create the web based side of the library. We switched all of the UX teams in the corporation to Figma at this stage so that we could have one design resource. This was to be the single source of truth, as the US part of the business needed to create their own components in Vue. Using design tokens and Tailwind CSS would help us to align internationally, along with regular check-in calls to share progress and insights between the teams.

Users and audience

RS Group has both B2B and B2C customers with the design system needing to cater for a wide variety of user needs and languages.

Internally the Figma library would be used by all UX designers within the business, with accompanying guidelines required for sharing with any external agencies which are working with RS. The Vue and React libraries will be used by all our Engineering teams and needed clear implementation instructions - provided by the dedicated design system engineers.

Scope and constraints

Accessibility needed to be considered at the component design stage and built into each component to a high standard, ensuring a consistent experience.

The business required different brands to be rolling out the new branding at different times. Some of the sub-brands were renamed and required a reskin live in February, giving us a maximum of 5 months to create the basic principles and core components for the first stage of alignment. Other areas of the group are adopting the design system as BAU, making co-ordination difficult, or have been added to the project later on.

Process

As a proof of concept, an existing piece of work called DTP was identified as a perfect first starting point. This involved the creation of a badge, utilising a dynamic text string for stock information and an iconography system to indicate stock levels visually. This will affect the majority of the e-commerce journey and has been implemented by various page teams.

The initial stage focused on agreeing a new grid with containers, exploring preferred sizes and uses for the new brand fonts and creating colour ramps for the supporting colour palette. I worked with the UX Design Manager on these principles, before moving on to the buttons.

I opted to introduce a new colour, blue, for our primary interaction colour. The site currently uses a brand red, which doesn’t score well for accessibility, as well as having some negative connotations in some markets. Introducing blue as a semantically neutral colour, which also is traditionally used for hyperlinks, aims to help teach our users which components are interactive by having consistent blue on hover states throughout components where suitable. This then also allows us to use the new brand darker reds for highlight CTAs with more standout.

The buttons are a complex set, featuring Solid, Outline and Ghost styles as well as icon-only, icon-left, icon-right and text-only variants. For use against our brand colours, a white out variant of the set was also created. Later, we decided that a text-hue of the icon-only ghost button was required to use on some of our more complex components with coloured backgrounds, such as our alerts system.

Example of the iteration process from initial concept to final output

During testing, it was clear that the Yellow alert level was often not noticed by our Users. Following 3 rounds of design and testing, I adjusted the component to have more brand style, greater noticeability and adjusted the yellow values to be more orange for greater accessibility.

Having completed the button set, I moved on to work on the form components, ensuring that we had a consistent set of interactive states across all the components. To bring to life the brand ‘perspective shapes’, I have introduced a diagonal cut to the Select Input button and error flags, which created a pattern we have been able to roll out consistently across components for that RS touch.

Once the ion library reached an appropriate level of components, I was able to begin testing. One of the UX Designers in the team trialled the Figma library to build a simple registration form, which went into unmoderated testing and was accessed for usability and SUS scoring by one of our Researchers.

We repeated this testing process, using both mobile and desktop prototypes to assess all of our component’s suitability for both touchpoint and mouse-click interactions. If any minor issues are raised, the components are modified and moved into the build queue with briefing documentation written. If there were major issues found, the components were iterated and retested. So far only the alerts system has required multiple iterations.

Results:

  • The components have been consistently scoring in the 80s and even 90s (against a benchmark of 68).

  • Since ion went into the design workflow, Researchers have reported less usability related issues when testing prototypes with customers.

  • In February, the first of the company sites launched the new components.

Since then, we have moved on to more complex components having finished the atoms and able to focus on molecules and some organisms, such as the new site footer. Earlier this year, a new Product Designer has joined the team and I have on-boarded them to the ion design process and supervised their first few component sets.

Current project status

For the EMEA site, the Design System has been following a BAU rollout. To have the site fully reskinned and following the new brand style, I have been working with the Product Owners to explore their requirements and to break down the page reskins into stages. This also allows me to review how the components are coming together on a macro level and see the brand coming to life.

Within the wider Group, I have been involved in meetings to onboard the teams onto ion and given them full access to the library. I write and publish regular update emails to keep them informed of new releases.

To aid this, I am working with the Product Designer to create a set of guidelines. I have contacted our internal security team to get permission to use Notion so that we have a readily available resource for all who need it Group-wide.

I am also in the early stages of creating a change request / new component briefing process to support the evolution of the design system going forward, which I would like all of our Group teams to have access to.

Challenges

Adoption was a big challenge for us within our main site team, due to the rollout plan being BAU and the page teams already having very busy roadmaps and high priority deliverables. I have workshopped ideas with the core ion DS team on how we can raise awareness of our work.

This resulted in:

  • My creation and delivery of an internal presentation to the Product Owners and Engineers to explain our process and the new system benefits.

  • The design system engineers running weekly meetings with a rep from each page team to help gather requirements, review upcoming project needs and answer any questions about implementation.

  • A dedicated design system slack channel for any questions to come into, plus change logs to be published to.

  • I write and circulate monthly project update emails within Digital to show where components are within the pipeline and to reiterate which new components are now available.

  • Encouraged feedback ad-hoc to advertise time savings from implementing new components.

  • Sending out a survey to our internal users to gather feedback about what is working well and where we can improve.

The result of these actions:

  • We are now live with at least the Footer across all of the page teams (with the SPA pages being resolved shortly), with more components being added across all business areas within their daily workflow.

  • Our first fully ionised page is now being built, with that team inviting myself and the design system engineers to their briefing meeting to answer any implementation questions and identify any additional components required.

  • Management teams have put the ion Design System on the business strategy for this financial year, and are co-ordinating a roll-out of the new Header along with the new brand grid and fonts to give us a big push in the right direction.

Featured projects