Rebrand Webpages

Crowdcube

Bringing Crowdcubes new branding to life, while improving the user experience through the creation of a new modular design system.

The problem

The core pages at crowdcube.com could only be updated through the intervention of the engineering team. This made them out of date and gave the marketing and design team very little flexibility to test and iterate the content and UI. This had lead to the marketing team creating all their amazing helpful content for investors and entrepreneurs within the blog area of the site, hiding the content away with very little visibility.

The solution

To limit the engineering resource and make the rebrand webpages more flexible for the design and marketing teams, the pages were rebuilt in the same CMS as the Crowdcube blog. This empowers both marketing and us in design to make changes and update content with ease, so it’s always up to date and iterated based on user feedback. To do this, we set off on a mammoth task, to create a modular design system that could be used as the building blocks for all Crowdcubes content pages.

Initial wireframes

We kicked the project off with a full-day session with the design, marketing and product teams at Crowdcube. From which, we (Crowdcube design team) worked initially on wireframes, focusing on how we could create the modular system and display all the content without overwhelming the user. We then completed a round of user testing and iterated the wireframes based on the feedback.

Modular grid system

To make a reusable system we broke down the content into key elements, for example, an article, case study and video. For each, we designed a full-width module and created a system for combining the content in what we call ‘story sections’. These 3×3 sections can pull together a grid of different content to tell a story. In these sections each element can be 4 sizes, 1×1, 1×2, 2×1 and 2×2 to create hierarchy.

Story section

This is a high fidelity design of the story section, pulling together different content sources to tell the story of Crowdcubes rebrand launch. This enables users to get a clear overview and allows them to delve deeper into the correct content for them, enriching what would standardly have been a text lead section.

Element designs

Below is a selection of the different elements. These are shown at the range of sizes used across the site within the new rebrand webpages.

Live pitch

Case study

Article

Page

Event

Testimonial

Full page designs

Here is a taster of the final rebrand webpages: Homepage, Investing, About us and Raising. Check them out in full over on crowdcube.com