Hozelock – A global website, designed to engage

[vc_row row_type=”row” use_row_as_full_screen_section=”no” type=”full_width” text_align=”left” css_animation=”” box_shadow_on_row=”no” oblique_section=”no” triangle_shape=”no”][vc_column][no_elements_holder number_of_columns=”two_columns” switch_to_one_column=”1024″][no_elements_holder_item item_padding=”0 22% 0 17%” aligment=”left” vertical_alignment=”middle” advanced_animations=”no” item_padding_1024_1300=”0 11% 0 10%” item_padding_768_1024=”17% 15% 17% 17%” item_padding_600_768=”17% 15% 17% 17%” item_padding_480_600=”17% 6% 17% 6%” item_padding_480=”17% 6% 17% 6%”][vc_column_text]

Our challenge

[/vc_column_text][vc_separator type=”transparent” up=”23″ up_style=”px” down=”0″ down_style=”px”][vc_column_text]Hozelock is the largest manufacturer of garden watering products in Europe. It’s a £50M business responsible for around 70% of the UK market alone.

We were invited to pitch our ideas against four other much larger agencies, to produce a new and more informative Hozelock website that would engage customers all across the globe. And thanks largely to our creativity and approach to great service, we were awarded the project.[/vc_column_text][vc_text_separator title=”Our work included” text_in_box=”no” text_position=”left” animation=”animate_width” line_border_style=”solid” up=”30″ line_dots=”no”][vc_row_inner equal_height=”yes” row_type=”row” type=”full_width” use_row_as_full_screen_section_slide=”no” text_align=”center” padding_top=”30″ css_animation=”” box_shadow_on_row=”no”][vc_column_inner width=”1/4″][no_icons icon_pack=”ion_icons” ion_icon=”ion-paintbrush” fa_size=”fa-lg” custom_size=”40″ type=”normal” position=”center” link=”#web-design” anchor_icon=”yes” target=”_self”][vc_separator type=”transparent” up=”0″ up_style=”px” down=”17″ down_style=”px”][no_custom_font font_family=”Montserrat” font_size=”14″ line_height=”20″ font_style=”normal” text_align=”center” font_weight=”400″ text_decoration=”none” text_transform=”capitalize” text_shadow=”no” letter_spacing=”-1″ show_in_border_box=”no” color=”#797066″]Web Design[/no_custom_font][/vc_column_inner][vc_column_inner width=”1/4″][no_icons icon_pack=”ion_icons” ion_icon=”ion-code-working” fa_size=”fa-lg” custom_size=”40″ type=”normal” position=”center” link=”#web-development” anchor_icon=”yes” target=”_self”][vc_separator type=”transparent” up=”0″ up_style=”px” down=”17″ down_style=”px”][no_custom_font font_family=”Montserrat” font_size=”14″ line_height=”20″ font_style=”normal” text_align=”center” font_weight=”400″ text_decoration=”none” text_transform=”capitalize” text_shadow=”no” letter_spacing=”-1″ show_in_border_box=”no” color=”#797066″]Web Build[/no_custom_font][/vc_column_inner][vc_column_inner width=”1/4″][no_icons icon_pack=”ion_icons” ion_icon=”ion-iphone” fa_size=”fa-lg” custom_size=”40″ type=”normal” position=”center” link=”#responsive” anchor_icon=”yes” target=”_self”][vc_separator type=”transparent” up=”0″ up_style=”px” down=”17″ down_style=”px”][no_custom_font font_family=”Montserrat” font_size=”14″ line_height=”20″ font_style=”normal” text_align=”center” font_weight=”400″ text_decoration=”none” text_transform=”capitalize” text_shadow=”no” letter_spacing=”-1″ show_in_border_box=”no” color=”#797066″]Responsive[/no_custom_font][/vc_column_inner][vc_column_inner width=”1/4″][no_icons icon_pack=”ion_icons” ion_icon=”ion-card” fa_size=”fa-lg” custom_size=”40″ type=”normal” position=”center” link=”#ecommerce” anchor_icon=”yes” target=”_self”][vc_separator type=”transparent” up=”0″ up_style=”px” down=”17″ down_style=”px”][no_custom_font font_family=”Montserrat” font_size=”14″ line_height=”20″ font_style=”normal” text_align=”center” font_weight=”400″ text_decoration=”none” text_transform=”capitalize” text_shadow=”no” letter_spacing=”-1″ show_in_border_box=”no” color=”#797066″]Ecommerce[/no_custom_font][/vc_column_inner][/vc_row_inner][/no_elements_holder_item][no_elements_holder_item aligment=”left” vertical_alignment=”middle” advanced_animations=”no” item_padding_1300_1600=”0″ item_padding_1024_1300=”0″ item_padding_768_1024=”0″ item_padding_600_768=”0″ item_padding_480_600=”0″ item_padding_480=”0″][vc_single_image image=”10782″ img_size=”full” qode_hover_animation=”” qode_css_animation=””][/no_elements_holder_item][/no_elements_holder][/vc_column][/vc_row][vc_row row_type=”row” use_row_as_full_screen_section=”no” type=”full_width” text_align=”left” css_animation=”” box_shadow_on_row=”no” oblique_section=”no” triangle_shape=”no”][vc_column][no_elements_holder number_of_columns=”two_columns” switch_to_one_column=”1024″][no_elements_holder_item aligment=”left” vertical_alignment=”middle” advanced_animations=”no” item_padding_1300_1600=”0″ item_padding_1024_1300=”0″ item_padding_768_1024=”0″ item_padding_600_768=”0″ item_padding_480_600=”0″ item_padding_480=”0″][vc_single_image image=”10980″ img_size=”full” qode_hover_animation=”” qode_css_animation=””][/no_elements_holder_item][no_elements_holder_item item_padding=”0 22% 0 17%” aligment=”left” vertical_alignment=”middle” advanced_animations=”no” item_padding_1300_1600=”0″ item_padding_1024_1300=”0 11% 0 10%” item_padding_768_1024=”17% 15% 17% 17%” item_padding_600_768=”17% 15% 17% 17%” item_padding_480_600=”17% 6% 17% 6%” item_padding_480=”17% 6% 17% 6%”][vc_column_text]

Our Solution

[/vc_column_text][vc_separator type=”transparent” up=”21″ up_style=”px” down=”0″ down_style=”px”][vc_column_text]The website needed to be multilingual (it launched in six languages) and flexible enough to accommodate different product categories for different geographical regions. A straightforward content management system was required allowing the client to easily edit and add content, and e-commerce functionality had to be built in to future-proof the investment. All in all it was no small task.[/vc_column_text][/no_elements_holder_item][/no_elements_holder][/vc_column][/vc_row][vc_row row_type=”row” use_row_as_full_screen_section=”no” type=”full_width” text_align=”left” css_animation=”” box_shadow_on_row=”no” oblique_section=”no” triangle_shape=”no” el_id=”web-design”][vc_column][no_elements_holder number_of_columns=”two_columns” switch_to_one_column=”1024″][no_elements_holder_item item_padding=”0 22% 0 17%” aligment=”left” vertical_alignment=”middle” advanced_animations=”no” item_padding_1300_1600=”0″ item_padding_1024_1300=”0 11% 0 10%” item_padding_768_1024=”0 15% 17% 17%” item_padding_600_768=”0 15% 17% 17%” item_padding_480_600=”0 6% 17% 6%” item_padding_480=”0 6% 17% 6%”][vc_separator type=”transparent” up=”21″ up_style=”px” down=”0″ down_style=”px”][vc_column_text]

Phase 1

Web Design (UX)

[/vc_column_text][vc_separator type=”transparent” up=”21″ up_style=”px” down=”0″ down_style=”px”][vc_column_text]Our starting point was the User Experience (UX). It wasn’t enough for the site to just be accessible and easy to navigate, we also wanted it to be intuitive, memorable and pleasing to interact with. And somewhere customers would want to return. This involved:

  • Competitor and customer analysis
  • Product structure/strategy
  • Content development
  • Wireframing and prototyping
  • Development planning

[/vc_column_text][/no_elements_holder_item][no_elements_holder_item aligment=”left” vertical_alignment=”middle” advanced_animations=”no” item_padding_1300_1600=”0″ item_padding_1024_1300=”0″ item_padding_768_1024=”0″ item_padding_600_768=”0″ item_padding_480_600=”0″ item_padding_480=”0″][vc_single_image image=”10901″ img_size=”full” qode_hover_animation=”” qode_css_animation=””][/no_elements_holder_item][/no_elements_holder][/vc_column][/vc_row][vc_row row_type=”row” use_row_as_full_screen_section=”no” type=”full_width” text_align=”left” css_animation=”” box_shadow_on_row=”no” oblique_section=”no” triangle_shape=”no”][vc_column][no_elements_holder number_of_columns=”two_columns” switch_to_one_column=”1024″][no_elements_holder_item aligment=”left” vertical_alignment=”middle” advanced_animations=”no” item_padding_1300_1600=”0″ item_padding_1024_1300=”0″ item_padding_768_1024=”0″ item_padding_600_768=”0″ item_padding_480_600=”0″ item_padding_480=”0″][vc_single_image image=”10782″ img_size=”full” qode_hover_animation=”” qode_css_animation=””][/no_elements_holder_item][no_elements_holder_item item_padding=”0 22% 0 17%” aligment=”left” vertical_alignment=”middle” advanced_animations=”no” item_padding_1300_1600=”0″ item_padding_1024_1300=”0 11% 0 10%” item_padding_768_1024=”17% 15% 17% 17%” item_padding_600_768=”17% 15% 17% 17%” item_padding_480_600=”17% 6% 17% 17%” item_padding_480=”17% 6% 17% 6%”][vc_column_text]

Phase 2

Web Design (UI)

[/vc_column_text][vc_separator type=”transparent” up=”21″ up_style=”px” down=”0″ down_style=”px”][vc_column_text]Once everyone was satisfied with the ‘feel’ of the site, we turned our attention to the look and design: the User Interface (UI). Guided by Hozelock’s existing visual style we seamlessly translated the brand’s identity to work in the online world, incorporating digital design trends to ensure the site looked familiar to all types of user.[/vc_column_text][/no_elements_holder_item][/no_elements_holder][/vc_column][/vc_row][vc_row row_type=”row” use_row_as_full_screen_section=”no” type=”full_width” text_align=”left” css_animation=”” box_shadow_on_row=”no” oblique_section=”no” triangle_shape=”no” el_id=”web-development”][vc_column][no_elements_holder number_of_columns=”two_columns” switch_to_one_column=”1024″][no_elements_holder_item item_padding=”0 22% 0 17%” aligment=”left” vertical_alignment=”middle” advanced_animations=”no” item_padding_1300_1600=”0″ item_padding_1024_1300=”0 11% 0 10%” item_padding_768_1024=”0 15% 17% 17%” item_padding_600_768=”0 15% 17% 17%” item_padding_480_600=”0 6% 17% 6%” item_padding_480=”0 6% 17% 6%”][vc_column_text]

Phase 3

Web Development

[/vc_column_text][vc_separator type=”transparent” up=”21″ up_style=”px” down=”0″ down_style=”px”][vc_column_text]We used our experience to create a mix of development techniques and coding practices to bring the whole site together – these included PHP, HTML5, Sass/SCSS and Java Script. The site was built onto a WordPress CMS, which ensured that Hozelock had the most practical and easy means to update content themselves.

We provided advice so that they could source and set up the most appropriate hosting to work with the site requirements to ensure smooth running combined with the all-important factor of security.[/vc_column_text][/no_elements_holder_item][no_elements_holder_item aligment=”left” vertical_alignment=”middle” advanced_animations=”no” item_padding_1024_1300=”0″ item_padding_768_1024=”0″ item_padding_600_768=”0″ item_padding_480_600=”0″ item_padding_480=”0″][vc_single_image image=”10900″ img_size=”full” qode_hover_animation=”” qode_css_animation=””][/no_elements_holder_item][/no_elements_holder][/vc_column][/vc_row][vc_row row_type=”parallax” type=”full_width” text_align=”left” background_image=”10918″ full_screen_section_height=”no” section_height=”700″][vc_column][/vc_column][/vc_row][vc_row row_type=”row” use_row_as_full_screen_section=”no” type=”full_width” text_align=”left” css_animation=”” box_shadow_on_row=”no” oblique_section=”no” triangle_shape=”no” el_id=”responsive”][vc_column][no_elements_holder number_of_columns=”two_columns” switch_to_one_column=”1024″][no_elements_holder_item aligment=”left” vertical_alignment=”middle” advanced_animations=”no” item_padding_1300_1600=”0″ item_padding_1024_1300=”0″ item_padding_768_1024=”0″ item_padding_600_768=”0″ item_padding_480_600=”0″ item_padding_480=”0″][vc_single_image image=”10902″ img_size=”full” qode_hover_animation=”” qode_css_animation=””][/no_elements_holder_item][no_elements_holder_item item_padding=”0 22% 0 17%” aligment=”left” vertical_alignment=”middle” advanced_animations=”no” item_padding_1300_1600=”0″ item_padding_1024_1300=”0 11% 0 10%” item_padding_768_1024=”17% 15% 17% 17%” item_padding_600_768=”17% 15% 17% 17%” item_padding_480_600=”17% 6% 17% 6%” item_padding_480=”17% 6% 17% 6%”][vc_column_text]

Phase 3 (Continued)

Responsive Design

[/vc_column_text][vc_separator type=”transparent” up=”21″ up_style=”px” down=”0″ down_style=”px”][vc_column_text]From the outset, Hozelock wanted us to ensure that the new site would work across the devices which are used to access the internet – including Andoid and Apple iOS devices, mobile phones and tablets.

The finished result is a ‘responsive’ site which automatically recognises what device the browser is using and adapts the content to fit the screen size and format. That way the user gets the best experience possible from the site.[/vc_column_text][/no_elements_holder_item][/no_elements_holder][/vc_column][/vc_row][vc_row row_type=”row” use_row_as_full_screen_section=”no” type=”full_width” text_align=”left” css_animation=”” box_shadow_on_row=”no” oblique_section=”no” triangle_shape=”no” el_id=”ecommerce”][vc_column][no_elements_holder number_of_columns=”two_columns” switch_to_one_column=”1024″][no_elements_holder_item item_padding=”0 22% 0 17%” aligment=”left” vertical_alignment=”middle” advanced_animations=”no” item_padding_1300_1600=”0″ item_padding_1024_1300=”0 11% 0 10%” item_padding_768_1024=”0 15% 17% 17%” item_padding_600_768=”0 15% 17% 17%” item_padding_480_600=”0 6% 17% 6%” item_padding_480=”0 6% 17% 6%”][vc_column_text]

Phase 4

E-commerce

[/vc_column_text][vc_separator type=”transparent” up=”21″ up_style=”px” down=”0″ down_style=”px”][vc_column_text]Currently ‘whole’ products are not sold on the website, although an extensive range of spares is.

In order to help Hozelock protect their investment, the website was built with extensive e-commerce functionality in place which can be rolled out to whole goods in the future. It’s a small thing now, that could save LOTS of time and money later.

Visitors can perform all the ‘normal’ functions you might expect from an online shop, but Hozelock can also control user roles and also offer trade accounts, with associated pricing too.[/vc_column_text][/no_elements_holder_item][no_elements_holder_item aligment=”left” vertical_alignment=”middle” advanced_animations=”no” item_padding_1024_1300=”0″ item_padding_768_1024=”0″ item_padding_600_768=”0″ item_padding_480_600=”0″ item_padding_480=”0″][vc_single_image image=”10935″ img_size=”full” qode_hover_animation=”” qode_css_animation=””][/no_elements_holder_item][/no_elements_holder][/vc_column][/vc_row][vc_row row_type=”row” use_row_as_full_screen_section=”no” type=”full_width” text_align=”left” css_animation=”” box_shadow_on_row=”no” oblique_section=”no” triangle_shape=”no” el_id=”multi-lang”][vc_column][no_elements_holder number_of_columns=”two_columns” switch_to_one_column=”1024″][no_elements_holder_item aligment=”left” vertical_alignment=”middle” advanced_animations=”no” item_padding_1300_1600=”0″ item_padding_1024_1300=”0″ item_padding_768_1024=”0″ item_padding_600_768=”0″ item_padding_480_600=”0″ item_padding_480=”0″][vc_single_image image=”10981″ img_size=”full” qode_hover_animation=”” qode_css_animation=””][/no_elements_holder_item][no_elements_holder_item item_padding=”0 22% 0 17%” aligment=”left” vertical_alignment=”middle” advanced_animations=”no” item_padding_1300_1600=”0″ item_padding_1024_1300=”0 11% 0 10%” item_padding_768_1024=”17% 15% 17% 17%” item_padding_600_768=”17% 15% 17% 17%” item_padding_480_600=”17% 6% 17% 6%” item_padding_480=”17% 6% 17% 6%”][vc_column_text]

Phase 5

Localisation

[/vc_column_text][vc_separator type=”transparent” up=”21″ up_style=”px” down=”0″ down_style=”px”][vc_column_text]The site had to be able to be translated into multiple languages, each with the same look and feel as the master UK version, but with different product options.

Translations can be handled from within the admin system and worked on collaboratively by multiple translators. The system notifies translators when the website has new content, so updates can be semi-automated.[/vc_column_text][/no_elements_holder_item][/no_elements_holder][/vc_column][/vc_row][vc_row row_type=”row” use_row_as_full_screen_section=”no” type=”full_width” text_align=”left” css_animation=”” box_shadow_on_row=”no” oblique_section=”no” triangle_shape=”no”][vc_column][no_elements_holder number_of_columns=”two_columns” switch_to_one_column=”1024″][no_elements_holder_item item_padding=”0 22% 0 17%” aligment=”left” vertical_alignment=”middle” advanced_animations=”no” item_padding_1024_1300=”0 11% 0 10%” item_padding_768_1024=”0 15% 17% 17%” item_padding_600_768=”0 15% 17% 17%” item_padding_480_600=”0 6% 17% 6%” item_padding_480=”0 6% 17% 6%”][vc_column_text]

Was the client happy?

Well, see what he has to say for yourself…

[/vc_column_text][vc_empty_space height=”60px” image_repeat=”no-repeat”][vc_column_text]

#ONCLOUD9

[/vc_column_text][vc_column_text]

Visit Hozelock.com

[/vc_column_text][/no_elements_holder_item][no_elements_holder_item aligment=”left” vertical_alignment=”middle” advanced_animations=”no” item_padding_1300_1600=”0″ item_padding_1024_1300=”0″ item_padding_768_1024=”0″ item_padding_600_768=”0″ item_padding_480_600=”0″ item_padding_480=”0″][vc_column_text]

[/vc_column_text][/no_elements_holder_item][/no_elements_holder][/vc_column][/vc_row]