Designing the new progress tracker component for Nationwide.
Whilst on the design system team, I was asked to work on a progress tracker component. The business had several different designs which needed to be amalgamated and finalised in order to contribute a single design into the design system.
To tackle this, I broke the component down into two variants.
The high prominence progress tracker is used to guide users through steps or actions across multiple screens, in order to complete a task. It is made up of two key elements.
The first element is a physical progress bar. Commonly found across the web, this is a visual representation of a user's progress through a set of steps, letting users know where they are in a journey at quick glance.
I stripped the progress bar back to give the tracker a medium to low UI prominence. The bar primarily serves as a quick visual indication and does not contain required or vital information. By keeping prominence low to medium, I ensured it did not distract from the main actions or steps.
The bar uses a logical progression of up to six rectangles joined together by circular step indicators, depicting a full linear journey from left to right of the screen. Completed steps are coloured blue, the current step is coloured action blue and future steps are coloured in a light grey.
The design is suitable for tasks of six steps or lower. For tasks above six steps the steps and progression indicators will appear cramped on the screen, this would be a particular concern when the design is viewed on a mobile device.
In the scenario that the progress tracker would be useful for a seven or more step task I worked with product owners and content designers to provide two options. The process itself could be simplified into fewer tasks. Alternatively the process could be broken into multiple tasks.
The second element is a contextual label. This tells the user the exact step they are at. It also informs the user of the amount of steps to come and the name of the journey section, i.e ‘Income’. This serves to complement the existing page title, i.e ‘Employment and income’.
The simplified progress tracker is made up of a single contextual label and is to be used primarily for shorter applications where an additional progression tracker would seem excessive.
The label tells the user the exact step they are at within a journey. It also informs the user of the amount of steps to come. This serves to complement the existing page title, i.e ‘Your details’.
Senior UI Designer
Nationwide Building Society
2020
UI
UX
Research
Prototyping
Documentation
Abstract
Sketch
Figma
Reimagining the way to consume resources.
Designing a new table component.
Nationwide's new hero component.
Helping members during the pandemic.
A group of characters for a playful, vegan based cards.
A redesign of core Sunmaster landing pages.
A cross-channel campaign focused on sign-ups.
Promotion for a non-hotel offering at Booking.com.
A mix of branded email template designs.
Engaging cruises customers with videos.
Stationery, uniforms, signage and utensils.
New tour landing pages for Imagine Cruising.
Office branding for a design studio.
Showing products available over Christmas.
Updating the branding for a life coaching firm.
A redesign of core pages for Imagine Cruising.
Branding for an award-winning escape room.
A three-part marketing campaign.
