Project Description
RS Components is an e-commerce giant receiving over one million daily hits on the UK site alone. It has a catalogue of over 500,000 products sold through 70 international websites.
The Challenge
To bring an 80 year old company into the 21st Century while championing and integrating user-centred work practices into its DNA.
Approach
With the amount of traffic already on the website, it was easy to quickly identify and monitor pain points and problem areas. Using A-B testing, quick fixes were devised and implemented using Agile methodologies. All the information gathered while doing this, served as a starting point to conceptualise the new solution. Through user research, workshops and guerrilla testing, the UX team started shaping the interface.
Solutions
Design System
A live design system was created using Brad Frost’s atomic design principles. It was devised to be in constant evolution, reflecting ongoing UX research. It acted as a central point of reference for developers, stakeholders and the UX team. It was hosted online and contained interactive samples and specification for all the UI components. Responsive high-fidelity prototypes could be easily made directly from the design system, enabling the UX team to quickly test different approaches and ideas.
User Interface
The UI solution was a responsive framework ready to incorporate the findings of ongoing research, workshops and testing while also allowing for the easy creation of variants for MVT and A-B testing. The UI style was predominantly flat, incorporating subtle shadows and gradients wherever they enhanced the user experience. A concise visual language was carefully crafted to deliver an uncluttered, efficient and versatile framework from which to grow.
The responsive solution strived to deliver an interface with a minimum number of breakpoints, keeping content as fluid as possible to accommodate every current and future viewport.
Responsive prototype
Iconography
An icon font was chosen as the delivery method for all graphic elements of the interface. It included corporate logos and branding elements ensuring crisp rendering and fast download in any viewport. Using a font also limited the number of assets to maintain and provided a method for easily adding or tweaking icons site-wide ensuring consistency.
Due to the technical nature of the site and the fact that it served over 70 different markets, numerous icons depicting product features such as screw-head shapes were created. This resolved many of the challenges caused by localisation, as character count for many product specifications could be universally reduced to one.
Interactions
Interactions played a big part on the interface, providing subtle cues and guiding the user through their journey. Whether simple hover states or animated micro-interactions, their existence was always considered and devised to enhance and ease the experience.
High-fidelity prototype for Terminal Node with its many interactions.