The Brief

As a member of the freelance collective 'Cousin Branding', I was tasked with creating the website that would act as a base for projects that we pull together as a team.

It needed to represent the brands design ethos, explain to the user how the collective works and why it's a benefit over a traditional agency and most importantly, it needs to convert!

Laying the Groundwork

After discussing the needs of the website with all the relevant stakeholders, I worked my way through a thorough UX audit carrying out competitor analysis, building a handful of personas to help guide my thinking and running them through various customer journeys, experience maps and a 'jobs to be done' framework.

This lead me to an initial set of basic wireframes that I could prototype, test and amend until I was content enough with the user journey to layout the pictured lo-fi wireframes to work from as a guide for me to refer back to throughout the process and frame work for asset generation.

The major takeaway was the importance of having clearly defined and sign-posted sections of content on each page to help navigate the user through the journey without becoming lost.

Building Home

A natural place to start is with the homepage. It became apparent very quickly that this needed to be thought of as if it was a 'one-pager' website. By this, I mean that all the key selling points that would help to convert a customer should be present in a condensed manner.

Through my initial UX research, I discovered that clearly defining the services on offer setting out the key selling points of the business, and proving legitimacy through a client-list would be integral to capture their attention, whilst reassuring them of the professionalism of the organisation.

We also felt it was important to add the human element and chose to include several shots of the founders of the collective throughout the website to add warmth and familiarity with the faces clients would regularly be dealing with,

Finally, I ensured we had multiple touch-points throughout the homepage (and the site as a whole) that would help continually direct the user towards the contact page - the end point of the user journey.

The founders wanted to ensure we kept an element of quirkiness and fun as part of the brand identity and so I set to building up some fun interactions that still served a purpose whilst adding an element of fun and interactivity.

Adding Fun to Function

Mobile

Throughout the entire process of wireframes to build, we mapped out our mobile designs alongside desktop with break points at the heart of every layout decision. In fact, many of the interactive elements were born out of how they'd feel in the mobile experience.

Going Deeper.

If the homepage was to act as a stripped back consolidation of everything Cousin Branding is, the 'about us' page needed to help cover everything in far more depth.

As there was a lot of info on the page we wanted to keep everything set into clear defined sections. Blocks of background colour, blocks of image/video and sign-posted titles were used to help engage the user within a block of content without overwhelming them throughout the overall page.

Smart with Space

One of my main challenges during this project was ensuring that I utilised interactive elements as a way of reducing the visual impact of the amount of text on the page.

The team section really represents this ethos by hiding the bio summaries of each member in an accordion-style structure. Without this, it may have become pretty unwieldily, pretty quickly.

Working Hard

A vastly improved filter system that was sticky to the page for ease of access, but could also be hidden. Imagery was resized to be as large as possible and could be comfortably switched between a 3 product and a 4 product view. Flexible options for each brand to customise the load out of their product info sections: product name, product subheaders, product price, product reviews, colour swatches and 2 layers of stickers/badges. A switch from pagination to a 'load more' format. Optional content slots for further branding/cross-selling. A new 'Quick Add to Bag' function to allow customers to select a size and shop directly from the listing page (see video below).

To continue the minimalist and clean design aesthetic running throughout the rest of the site, we placed project information on a hover overlay (but stacked below on touchscreen devices).

This allowed us to encapsulate the essence of a project through a single representative image without overcomplicating the page with large blocks of text.

Cousin Branding

Website: UX, Design & Build