Argos

Senior UI Designer. London 2018

argos-hero@2x

Overview

Argos is the UK’s largest multi-channel retailer, having amassed 844 stores and 29 million in-store customers. Having started with the inception of catalogue shopping, they have now attracted a further 1 billion visitors through online shopping every year.

The apps team, which looks after native iOS, android and digital store browser equally has impressive stats, however, because of the abundance of a design system and guidelines, all 3 platforms were fragmented and the experience was suffering.

Challenges

Visual design and user experience was 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.

argos-designprocess@2x

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.

argos-bolt-red@2x

Grid system

The grid system is the foundation to 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.

argos-grid@2x

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.

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 of 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.

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 of 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.

argos-typography@2x

Colour palette

Colour across all the Argos channels was inconsistent, and no two colours aligned. As a group of designers, we collectively started from the beginning and defined what our core primary colours would be, along with a substantial set of secondary colours; which were all AA+ compliant with the WCAG 2.1 standards.

argos-colour@2x

Iconography

Iconography did not differ from anything else across the Argos visual language, and none of the icons were 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.

argos-iconography@2x

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.

argos-components@2x

Projects

As senior UI designer for the apps teams, I worked on both native iOS & Android apps and the in-store displays know internally as DSB (Digital store browser).

Each channel had its own roadmap of improvements and features, and by first tackling the company wide design language, I created component libraries for all channels which made designing and building new features more efficient.

PREV

NEXT

Anthony Eamens 2020©

Anthony Eamens 2020©