Hero image of Bluestone case study showing various screens from website design

Bluestone

Bluestone Group are a financial lending company base in UK & Ireland that offer solutions across consumer, motor, mortgages and technology for people who due to circumstances may struggle to receive financial help from traditional lenders.

They approached me to help update their pretty outdated website, specifically the B2C businesses for Motor and Mortgages. Through our discovery sessions we realised that the most efficient and scalable solution was to create a Design system and Component Library that would work across their entire digital ecosystem.

I also took this opportunity to create a more modern look and feel for brand that has since gone on to influence their wider marketing strategy.

Project details

Produced for bluestone group

WHILE At boulder group

IN 2022

SkILLS & Disiplines

UI/UX, Design Systems, Discovery workshops, Web Design, Animation

Bluestone design system components

Creating a fresh move forward

As part of the design system I created a unique icon kit and illustration style for Bluestone. These were designed around the Mortgages and Motor offerings, but can easily be scaled and rolled across the other areas of the business.

I also wanted to create a more engaging experience for users on each website and so created animated version of the icon suite and illustrations for each of the customer types.

Designing a digital ecosystem

The design system I was creating had to work across a number of websites, create a consistent feel across the business areas while allowing for flexibility to meet each of the individual business needs and wants.i also wanted to create a way that users could easily navigate around the entire Bluestone digital ecosystem. This was achieved by a side panel that was available across every website and accessible through the header, that showed the breadth and scope of the entire group.

Global panel demonstration from Bluestone group

mobile navigation

latest news mock up with filters panel open

Bluestone motor homepage mockup

Mobile mockup with illustrations

Creating a foundation for success

In order to create an effective design system it was important that we knew what we needed from it and who it needed to work for.

I ran various workshops with the client including Creative, technology and messaging sessions for each of the businesses.

These sessions helped lay the foundations for the various UX outputs during the project including customer journeys, sitemaps and wireframes.

Bluestone sitemaps

Bluestone Customer journeys

Bluestone wireframe design system