micommunication

Crowdcube rebrand

As well as updating the look and feel of our web and app platforms, the user experience was improved.

— PROJECT NAME

Crowdcube rebrand


— ROLE

Art Direction

Graphic Design

Branding

UI and UX

Problem


Our old pages were full of content that had been written for specific use cases that were needed in the past and forgotten about, they used language that wasn’t consistent and the focus of the content wasn’t succinct.


Solution


Produce an experience for our users that embodied our new brand identity, that can be easily updated through Craft CMS and reduce the need for our Marketing team to go through the Engineering team to update content.

We kicked things off with a brainstorming session, including representatives from Marketing, Product and Design. The purpose was to focus on what our users needed and wanted, for example; case studies of companies and videos of entrepreneurs.


Adam, the Product Designer, and I set off to create some wireframes based on our initial discussions (image). The focus on the wireframes was to get a loose assumption on how we could present as much content as possible without overloading the user.


Once the wireframes were signed off, we create working prototypes of these wireframes. We created user scenarios and had a few people user test.



Now we had some user tests to back up the design, we kick-started the mammoth task of designing each page and module. In total for the rebrand, there were 4 main pages, 13 story modules (1 example in the image).


Stories

Stories enable us to make key pieces of information bespoke, tailored to all users. It is one of our key features that empower our users.


We created a system, a 3x3 grid that incorporated our modules and could be made responsive on all devices. The team could switch to whatever size module they needed, with a module not exceeding more than 2x2.



Our new website embodies a more natural flow, with less of a blocky feel and using elements from our logo, to divide the page. The shapes act as an aid to guide the user through the content which is now clearly broken up, using as much space as possible to pick out key pieces of information.