Designed primarily for print and campaign usage, we took Bruntwood's traditional set of brand guidelines and transformed it into a vibrant digital design system.
Bruntwood
Brief
Design a consistent experience for a brand with multiple personalities
Bruntwood’s recent rebrand had been lacking the connection and translation to their digital platforms.
We were challenged with aligning the different business sub-divisions to one set of consistent digital identities that could be true to their individual propositions but still identifiable to the end customer as ‘Bruntwood’.
DESIGN SYSTEM
Shared design language
There were a number of microsites, with Bruntwood also having 2 subdivisions each with unique identities, SciTech and Works.
Our strategy was one Bruntwood site, organised around property, cluster and campus hubs that maximise the brand story, heritage and seamless customer journey.
We started by creating a design system defined by clear principles around structure, reusability and a shared language of how we talk about styles, components and content. The system meant you could work faster, more efficiently and with consistent brand application.
Art direction
New digital style
Colour is integral to the Bruntwood brand and made up of a vibrant palette of 36 swatches. Only three of these colours were AA compliant (4.5:1 contrast ratio). We went through a lengthy process of testing hundreds of colours to define a set of rules for accessible combinations.
Colour was grouped by:
- Brand colours – The core colours, split into 6 themes
- Monochrome – Black, greys and white for body copy and UI
- Messaging – For validation and error states
After exploring colour combinations, we worked closely with the brand team at Bruntwood to create a new art direction style for their digital experiences which could be accessible to all key stakeholders across Marketing and Commercial teams.
We went through an iterative process of creating conceptual components, applying the new accessible colour combinations and then creating mockups of how example pages could look to really bring the designs to life.
Working collaboratively and transparently this way meant we could find a balance that pleased all of the key stakeholders, while still remaining consistent and true to the brand vision.
Bruntwood colour palette
Bruntwood Colours
New Art Direction style
New Art Direction style
BUILDING THE SYSTEM
Continually evolving with iterative page design
Using atomic design principles we built a system starting with the fundamentals that make up the foundation of the brand (colour, typography, structure, accessibility). We then defined the atomic elements such as buttons, form inputs and icons. These were then used to create larger components which applied the art direction, colour theming and content.
The system is constantly evolving and updated whenever new atoms or components are made. The majority of these components are also built into the Contentful CMS to allow Bruntwood to create their own pages and have future autonomy over the iterative page design process.
DESIGN
Prototyping with the new system
After the art direction and first iteration of the design system was complete, we started building out page designs working inline with the product roadmap.
Wireframes were prototyped and tested in parallel with building the design system. It was an efficient process to take the wireframes and apply the styles, components and content using the system.
PRODUCT LAUNCH
Content-rich, vibrant and consistent
After we designed page templates, we eventually added the Contentful CMS to the platform which allowed Bruntwood to build their own pages, while remaining consistent and adhering to the design system.
This digital re-design has aided the marketing and brand team to be re-aligned on the visual identity, putting customer experience at the heart of the platform to create vibrant, content-rich and consistent experiences.
