Argos - Bolt

Refreshing and enhancing the digital design language and digital experiences across all channels for the UK's largest e-commerce retailer. 

Overview

My Role

The Challenges

Visual design and user experience were inadequate across all platforms within Argos, despite the existence of a design/component library. This was fragmented and very inconsistent across all channels, and so it quickly became apparent that as a design team, we had to fix and improve on all aspects of design foremost.

As a team, we implemented a way of working on all of our individual projects. This followed a conventional Design thinking process, which, as a team, we were all familiar with in previous roles. We then began work on the design system, refining the Argos colour palette, typography and introducing new consistent iconography. This was then used to build component libraries for the individual channels we worked on, such as Web and Apps.

Design System

It was apparent that whilst auditing the various channels within Argos; there was a huge lack of consistency, clarity and guidance. The website was using Storybook to organise and maintain its current components, and icon library. They called it Bolt. 

As a collective of designers, we didn’t intend to reinvent the wheel, but merely align everything for a better experience not only for our customers but for designers and developers at Argos. We call it Bolt 2.0, which was a clear, structured and honest design library of guidelines, reusable and consistent components, which enhanced the experience and refreshed the Argos visual language.

Grid System

The grid system is the foundation of any digital product, and all the digital channels were outdated and using a static grid system, which restricted design. Collectively we devised a new responsive and flexible grid system, which could be used across all channels including web, mobile apps, and digital store browser.

Typography

The Argos typeface was custom-designed several years ago, primarily for print design such as marketing and catalogues. Collectively we reviewed the typeface in all the many scenarios and defined a set of rules and new type system, for desktop and mobile, to maintain consistency throughout all channels and improve legibility.

Colour Palette

Iconography

Iconography did not differ from anything else across the Argos visual language, and none of the icons was consistent, using a mixture of solid glyphs and outlined icons with a variety of stroke and all varying in sizes. Work had already begun on a new icon set upon my arrival at Argos. However, design leads asked me to take ownership of the iconography sets and created a consistent and sustainable suite of icons with slight variation for platforms such as iOS and Android.

Component Library

 Once we had defined and completed the fundamentals to Bolt 2.0, we then aligned components for our individual channels. As senior UI designer within the Apps team, I needed to create components for iOS, Android and in-store, all of which had subtle differences and sizes to accommodate.

All the foundations we had defined earlier as a team were all in a centralised shared component library which was used to include in all the components created for the individual channels. This made updating specific atoms or modules easier and more efficient company-wide.

I took my component libraries slightly further and made certain elements responsive and easier to reuse and maintain, such as navigation and tab bars, call to actions and product cells.

PREVIOUS PROJECT

NEXT PROJECT