↤ Back

Bloom & Wild

I worked with Bloom & Wild in late 2020, assisting with a major rebrand and its application to their website and app as well as leading the design teams’ movement to Figma, and creating the foundations of a new design system.

bloomandwild.com

"Thomas joined us while we were working on our rebrand — and while he was was hands-on in with the team, exploring and defining the new design direction, his main focus was to take this and interpret it into a Figma pattern library for the team. In this, he was fantastic at supporting and empowering the designers — in a sense becoming the 'glue' that helped the team stay aligned, pick up our new UI language, and deliver new features quickly. Meticulous, systematic, and safe pair of hands — I can't recommend Thomas enough, both as an experienced Product Designer, and as a Systems Designer."

Chris Allwood

Head of Digital Product Design at Bloom & Wild

Brand Refresh

Exploration

The initial brand direction came from the agency Madre, with the instruction given to test and challenge the principles in our designs.

The homepage was the first deliverable we looked at to assess how readily their suggestions translated into digital.

Bloom and Wild Homepage

We explored the new colours, text and art direction suggestion to try and achieve the most harmonic relationship between the elements in the space, eventually dropping one of the key suggested colours and ascribing clear meaning to the rest

Bloom and Wild colour elements

Consolidation

With three digital designers working independently, on interpretations of a dynamic set of guidelines from the agency, there was a danger of each moving in quite different directions and prioritising their own preferences and interpretations of the principles. To bring everyone back into alignment, we created a board where we could describe some of the design principles, and see if we were in agreement with them going forward, or if they needed further discussion.

Bloom and Wild discussion

Application

We wanted to move fast with the application of the rebrand – the associated TVC was due to launch ahead of the incoming Head of Design starting, when the majority of the work would take place. The sites existing CSS had become full of unique styles, and this was a good chance to tidy these up, and associate them to a new, stripped down set of values.

Bloom and Wild colours

With this in place, we were then able to start revisiting the rest off the sites UI.

Design System

This was a good opportunity to move the designers from Sketch and Zeplin to Figma. We established conventions around file structure and identifiable common elements such as file cover thumbnails

Bloom and Wild files

Learning as we worked, we took advantage of new features such as improved auto-layout and variants to build a comprehensive UI library and create the foundations for the design and engineering team to work together on a shared set of components.

Bloom and Wild component