Back to all work

Brandwatch site rebuild: Moving to pattern driven development

A complete rebuild of the site infrastructure. Unifying it's codebase, creating shared patterns and components. Giving the Brandwatch site a new lease of life for the future.


Role / Product Owner


A little history

Brandwatch is one of the largest social media monitoring platforms in the world. It's powerful software allows even the most meticulous analyst to discover valuable insight at a minutia level of detail.

The power of monitoring social media over more traditional market research is real-time. You can keep an almost real-time finger on the pulse of your industry/company/brand. Allowing you to react far quicker to crises or opportunities.

Social media monitoring has a plethora of uses form the broad to the detailed. To help companies navigate this breadth of uses, Brandwatch creates a lot of content. Blog posts, guides, case studies, industry reports etc... they are using this platform to prove the value of their product and help those who are get better at doing it.

The challenge

The Brandwatch.com site was old. The build over time often focused on individual entities rather than the system as a whole. This resulted in different codebases, no shared components or code. A myriad of plugins, tracking codes and “fancy” widgets. All making this site unmanageable.

When faced with such an unnavigable mess, when do you have time to address it? Moreover how can you think about addressing it atop an already aggressive demand for new features and pages?

The approach

To sort this out the team needed 3 things: A clear problem to solve. A strong vision of the future and the space and time for a them to map out their ideal journey.

I could only help with framing the project and ensuring the space needed. The hard work was down to the team.

Through off-site workshops and meetings the team defined what the vision of the rebuild would look like.

This was not a re-design project but a complete infrastructure and system rebuild. Ensuring that every page was using the same codebase, the same stylesheets and the same patterns.

As a small team it’s not realistic to stop all work and focus on infrastructure. The purpose of a strong vision is to remember where we’re heading. This allowed us to apply our new code and way of working directly to incoming work.

The results

Through off-site planning days, close-nit working and sheer hard work the team managed to rebuild the entire back end in a matter of weeks!

Delivering a unified codebase, new pattern portfolio and a reusable components library. Styles and systems are now shared and able to talk to one another. Components and design are consistent and the site is now “future proof” and ready to build upon once more.

brandwatch site patterns brandwatch pattern library brandwatch pattern library

Previous Post Next Post