Schroders Brand Alignment

Company Schroders

Agency EPAM

Role UXUI / IA / Brand Direction

The Objective

Lead the digital brand evolution. Set the foundation of design standards and improve internal design process within Schroders, identifying pain points from team to team, allowing for efficient creative output and design consistency in the future.

A design language which enables all work to be instantly recognisable as belonging to Schroders, even if you can't see the logo.

The Solution

  • Eliminate visual disparity between projects by creating a new visual design language.
     

  • Build a "truly-living" Pattern Library allowing for brand evolution.
     

  • Ensure ROI by making it a delivery accelerator.
     

  • Improve brand perception.

Schroders_Pattern_Library_IA
Schroders_Card_Sorting

Preliminary IA of proposed Pattern Library, and the changes following a Card-Sorting workshop.

Once the IA of the Pattern Library was defined, it was important to establish which areas needed attention as a priority:

 

  • Typography

  • Colour

  • Layout & Grid Structure

  • Buttons & core UI elements

  • Cards

...all under the umbrella of accessibility.

Screen Shot 2018-09-16 at 1.17.02 PM.png
Screen Shot 2018-09-16 at 1.17.18 PM.png
Colour.png
Screen Shot 2018-09-16 at 1.27.48 PM.png
Screen Shot 2018-09-16 at 1.27.34 PM.png
Grid_layout.png

Part of the new UI kit, demonstrating interaction of use of 'Tints & Shades' of colour within the new themes.

Screen Shot 2018-09-16 at 1.33.08 PM.png

Introducing new themes, colour associations and restricting the use of colour-overload were one of the key parts of the project.

Screen Shot 2018-09-16 at 1.56.52 PM.png
Screen Shot 2018-09-16 at 1.56.22 PM.png
Screen Shot 2018-09-16 at 1.58.30 PM.png

Screen examples of the Schroders Pattern Library

The Result

A strong foundation for the Schroders Design team to use and evolve.

Schroders_1.jpg

The new rebrand was then rolled out and tested across various platforms and different products.

Schroders_2.jpg
Schroders_6.jpg
Schroders_5.jpg
Schroders_4.jpg
Schroders_3.jpg