Brown Shipley is a private wealth planning and investment banking firm located in the heart of Manchester.
In 2020, KBL acquired Brown Shipley and subsequently rebranded their whole global network to Quintet Private Bank. They wanted all the companies in their family to inherit the name and adopt their branding.
My role was to migrate the current Brown Shipley website and its components, align them with the new Quintet bank branding, whilst retaining the same sitemap structure.
The agency had taken on two briefs from Brown Shipley. The first, their branding and tone of voice guidelines. The second, to design out and align a new website with their audience and brand.
The agency had completed UR via stakeholder focus groups, customer interviews and reviewed GA data. Moving onto hi-fidelity UX, then adding the UI, which slotted in nicely once the design team completed their branding brief.
At the time the agency designed and deployed the Brown Shipley site, Sketch was more popular than Figma. That trend had shifted in Figma’s favour a few years after that.
The global Quintet design team were working in Figma and a huge part of the brief required us to deliver a design system with all the existing components, modules and page templates including a style guide in Figma.
We had to take a moment to figure out the scale of the brief, devise a migration plan and decide on the most effective way to work.
The internal team who originally designed the Brown Shipley website hadn’t componentised the modules into a design system doc native in Sketch, they’d actually designed the blocks in each page template and handed that over to the devs.
To tackle this one, I decided it was more sensible to take those modules in Sketch and build the design system there first, working closely with the developers to understand naming convention, types of blocks and make sure padding was accurate.
Then using the technology in Figma, import those components across for design QA rather than taking it as a full page with live content.
This enabled us to review the components and see any discrepancies between export and import. Only then did I use auto layout, variants and activate a global component suite.
Our client wanted to see the core current template visuals with the new branding. I took those global components, building the pages and then mirror the live content.
From the development point of view, this wasn’t as important as the design system, which they primarily worked from when they amended the existing blocks.
Taking all the brand components and stylising the pages we didn’t think about when designing the blocks in isolation, actually turned out to be beneficial to have a playground for creativity.
Got any questions or a new project in mind? Drop me a line.
