Branding, UI / UX design and development for Travis Perkins’ new Blog ‘Trade Corner’

Description

‘Trade Corner’ is a brand new Blog and online knowledge base for traders. Positioned within the main website TravisPerkins.co.uk, ‘Trade Corner’ aims to provide trade account holders and online customers an easy access source containing engaging article content, project inspiration, product reviews and account support information.

In collaboration with Travis Perkins, we devised an identity and guidelines document which aligned with their core business values and the purpose of the blog and its content.

UX design

Landing page variations were created to showcase how we could present the blog content effectively, this included tabbed content, colour-coding and labelling. With a modular grid now finalised, we could apply the newly designed branding, colours and banner imagery to establish a complete aesthetic.

Desktop Design

The next stage meant designing the UI for the Blog top level page and the article page. Using branded assets such as imagery and icons, the blog page came to life within the modular system. The logo, sitting above the content acting as a masthead, whilst the article page used a smaller version. The article page used a colour coding system with a large hero image to introduce the content, with share options and further reading available at the bottom of the page.

Image: Desktop top level Blog and Article page designs
Video: Animation showcasing the ‘Trade Corner’ blog

Mobile Design

Using the current site structure, we optimised the ‘Trade Corner’ experience for mobile. One of our initial ideas was to colour code and tab the content of the blog to help quickly navigate to posts of interest. Although this wasn’t used in the live site, the exploration provided insight into how the internal content creation team could filter and present content.

Moken were great to work with. The team understood the requirements and took true ownership of the project adding in valuable advice. I would recommend Moken as their services and delivery was second to none.

Amit Patel - Chief Operations Officer, Skillstream

The Results

Upon UI completion, we coded the top level blog page and article page so the client team could intregrate the code into the current website. From full branding guidelines to front-end development, we established ‘Trade Corner’ as the cornerstone for Traders on the Travis Perkins website; providing information and offers in a clear and engaging interface.

Scope of the Project

Travis Perkins teamed up with us for the following:

UI Design
UX Design
Development

Image: Brand guidelines document for ‘Trade Corner’

Have you got a project in mind for us?

Want to collaborate with our remote team? Tell us what you're thinking and let's talk.

Next Case Study

Truckk

Transport providers