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.
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.
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.
'Kew Gardens' Home Page
'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 -
