Bruntwood
About Bruntwood
The work made for Bruntwood runs to 1 verified project since 2022 — mostly ArtDirection, DesignSystem and DigitalStrategy.
Trending project
Bruntwood projects with the most verified people and teams
Inside the Bruntwood network
The people, teams, and projects that make up the Bruntwood network
Featured project
A Vibrant Digital Experience
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. Code was 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’. 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. Code started by creating a design system defined by clear principles around structure, reusability and a shared language of how Code talk about styles, components and content. The system meant you could work faster, more efficiently and with consistent brand application. 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). Code 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, Code 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. Code 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 Code could find a balance that pleased all of the key stakeholders, while still remaining consistent and true to the brand vision. Continually evolving with iterative page design Using atomic design principles Code built a system starting with the fundamentals that make up the foundation of the brand (colour, typography, structure, accessibility). Code 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. Prototyping with the new system After the art direction and first iteration of the design system was complete, Code 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. Content-rich, vibrant and consistent After Code designed page templates, Code 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. Credits: Code Computerlove https://www.codecomputerlove.com/work/