
Redesigning the visual structure of JCB
Brief
Redesign the JCB website to better showcase it’s extensive portfolio to potential clients.
This redesign is not a request from JCB.
Tools
Sketch, Pen Sketching
Timeline
1 week
Design Problem
JCB’s website currently does not reflect their expertise in the field. It doesn’t showcase their 20+ years & their extensive portfolio of projects is out dated and needs a new look & feel, while keeping its existing visual identity.
Design Opportunity
The latter therefore let me dig deeper into JCB’s offerings and design a landing page that showcased their expertise, their

Landing Page Goals
The goals of this landing page are to highlight JCB’s expertise in the construction industry in Canada.
The goal IS NOT to generate new leads.
Art Direction
The goal of this redesign was not to touch the existing branding, but rather update it for a more modern and structured look & feel.
I however tweaked the existing logo a little to fit with the look & feel I was aiming for. I wanted the tagline to fit under the JCB letters for a more square look. I also darkened to tagline font to add for affirmation to the brand.

Desired mood: Professional, expert, industry leader, modern, simplistic, successful, sharp lines

Typography
After playing around with some serif and sans serif font pairings, I decided to go with one font family to simplify the experience.
I ended up with the Soleil font family due its modern look & feel, alongside its rounded edges, adding a sense of friendliness.


Colours
I wanted to keep the colours as simple as possible not to distract from the eye catching construction projects created by JCB.
I therefore went with a simplistic monotone colour palette of black and whites. I added red as an accent colour as is already portrayed in the JCB logo.

Photography
As the goal of this redesign is to showcase JCB’s extensive portfolio, the photography used is extremely important to set the right tone of voice. I wanted to portray JCB’s solid brand reputation since 1985 by focusing on the details of their work. The extra touch they add to all projects.
I also decided for a black and white photography approach to add the sense of high end expertise. The photographs were also kept square with sharp corners for assertiveness.
This also adds a sense of intrigue for the user so they want to find out more information on the projects as they don’t see the full picture just yet.


Final Responsive Landing Page
From the initial website, I removed a lot of clutter and unnecessary information that a user looking to view their portfolio does not need to see on the first few clicks.
I brought the navigation bar to a hamburger menu in both desktop and mobile versions to add a sense of simplicity.
I added a clickthrough page before the actual landing page to create the same feeling you get once you see a brand new building from the outside. You have an urge to see what’s inside. As you click on the ‘EXPLOREZ’ you are opening the doors to a brand new construction and finally get to see what the interior is all about.


The final landing page consists of 3 sections :
1- A quick tagline showcasing JCB’s expertise with a powerful image of a project they completed
2- Categories of their areas of expertise
3- Latest case studies/projets or news they want to share
A simple footer with all sections was also added.
Prototypes
You can view the Desktop Prototype here :
You can view the Mobile Prototype here :
