Website Design - Chilcott

Commercial Website Design has provided a valuable opportunity to develop

my understanding of the perceptions of utility, ease of use, and efficiency surrounding a virtual design.

Chilcott  was my first official commercial web design experience and was a valuable experience in learning how to create a modern, smart and dynamic site.

https://www.chilcottuk.com/

 

ROLE :

TIMELINE:

Website Designer

 

May 2020 – July 2020

SKILLS NEEDED/USED:

User Research

Interaction Design
Interactive Prototype

IN COLLABORATION WITH:

Creative Director

Marketing and PR Agency

Project Overview

I was tasked with the design of the ChilcottUK website over the summer of 2020. Their brand makes luxury lavender based products which are grown, sourced and made in the UK.

 

They wanted me to make a completely new website for their brand and working through a new platform, WiX.

Screenshot 2021-05-16 at 16.21.40.png

Initial prototype for Home page design

Background Research

Prior to creating the site I had meetings with the client about the objectives for the site and other platforms which they liked. this help me understand what type of design to put in place.

 

I did initial brand research and inspiration from looking into smart, luxury and modern websites. for example, Highgrove Gardens and Kew Gardens, both advertising for the same type of user as Chilcott.

Screenshot 2021-05-16 at 16.24.31.png

'Kew Gardens' Home Page 

Screenshot 2021-05-16 at 16.23.56.png

'Highgrove' Home Page 

Design Layout

Below shows the finished design layout of the site and highlights the key elements and new additions of the brands online presence being shown to the user (adding to brand identity). 

2

1

3

4

5

Initial prototype for Home page layout

1).  Main Logo updated to reflect a smarter, clearer version of Chilcott (This was developed through UI logo exploration).

2). Chilcott 'C' used throughout the site as easy user link back to the Home page.

3). Two main Home page sections used on the sites layout. Now updated (4.) to include more about the brand identity in the design layout:

OUR STORY - Designed to showcase the history and background.

OUR CRAFT - Designed to illustrate how all products are environmentally friendly and made in UK. 

MORE - Additional elements: Inside Chilcott (Blog), Shows Calendar, Contact and Privacy Polices.  

4). Simple, smart and easy access point to the users basket / checkout.

Style and Structure  

During the process of experimenting with the layout of the Chilcott site, it became clear how the Home pages structure set the tone for the rest of the site. 

 

Interactive and moving elements bring a more dynamic feel to the user as they move through the site. I experimented with this by using different effects of user interaction. For instance, when a user is moving the mouse pointer across elements of the sites structure, the imagery moves with them. This is made evident on the home page as the ‘The Farm’ strip reveals more of the image as the page scrolls down. 

1

First section of the Home page layout aims to draw the user in and showcase the different product sections through the strip bar.

2

Small About section illustrating the brands identity. 

3

Product collections and making it clear to what Chilcott sells.

4

Chilcott bestsellers, designed to be easily updated and changeable for an updated look and feel.

5

Strip animated to change at the effect of the user scrolling. Aiming to give an animated and dynamic feel to the setting of where the products come from. 

6

OUR CRAFT intro page. Illustrating the the environmental conciseness of the brand.

7

Linking to Blog (Inside Chilcott)

8

Easily changeable strip banner for weekly updates and activities happening at Chilcott.

9

Brands linking to the work of Chilcott.

10

Social Media links, designed to changed and update with the live accounts.

11

Brands associated / referenced Chilcott.

12

Footer with additional pages and privacy policies. 

Homepage Example of Layout / Design flow 

Product Layout

Chilcott's products split into four key areas, Homes & Interiors, Dogs, Botanicals and Gifts. Each section had a diverse range of different products attached to them. This meant there was a need to create a design layout which didn't over cluster products together.

 

To overcome this I created a design layout which created space between sections by having 'sub - categories'. This meant it was possible to separate product and make obvious distinguishable differences between the four  product sections. 

Products > Homes & Interiors  

 Blankets > Cornflower Blue Blanket

Homes & Interiors  > Blankets 

 Cornflower Blue Blanket Product Page 

Final UI

Below shows a selection of screenshots taken from the finalised version of the site. To see the site fully please go to -

 

 https://www.chilcottuk.com/

Screenshot 2021-05-17 at 17.54.26.png
Screenshot 2021-05-17 at 17.56.23.png
Screenshot 2021-05-17 at 18.01.49.png
Screenshot 2021-05-17 at 17.53.58.png
Screenshot 2021-05-17 at 17.55.14.png