Hotpoint & Indesit (2015)

Supporting the launch of the Hotpoint website. Working with the Lead UX Designer and Web Developer, implementing mobile-first responsive design. Creating visual designs based on lo-fi wireframes. Coding the client facing web templates in HTML/CSS using Foundation framework.

Contracted for seven months to support the December launch. I worked on the Hotpoint.co.uk website front page, designed whole category sections and promotional web pages. I also created solutions for sending responsive emails. I created over forty static web pages of the Hotpoint website and eight marketing emails. I also built the design for the Hotpoint home and recipe pages. Visit hotpoint.co.uk and indesit.co.uk

portfolio-hotpoint-love-your-clothes.jpg

Love Your Clothes - Responsive design

One of the best parts of any project is designing campaigns, layouts and promotional material. Hotpoint had a ‘Love your…’ campaign leading up to Christmas and this is one of the first promotions I created. A campaign was to promote their new range of washing machines. This working design (below) was the basis for all others. I broke the assets and content into many different workable modules and added reusable areas, sliding overlays with drop-out text panels. With mobile first methodology in mind for a linear solution. Each module could be reordered or duplicated with different imagery and text. Once agreed, I created the page using Foundation 5, the adopted code template for the site.

portfolio-hotpoint-love-your-food.png

Love Your Food - Responsive design

This project was a contination of the "Love Your..." campaign. Having all the reusable components designed and coded, it was a case of sketching out the layout and adding the campaign's imagery to the page. I also designed all the banners and promotional work for this. There was also a mockup of a 'desk stand' and folded leaflet.

portfolio-hotpoint-day1.jpg

Day 1 - Love Your Food

This campaign already had it's promotional photography created, so I approached it slightly differently. The full page design was still a responsive solution with a twelve column grid which could be manipulated to two columns for tablets and a single stacking column for mobiles. I also created the promotional banners. Each page was design to allow the user to scrolling down the page absorbing the information and arrive at the purchase options. This particular page became extremely long on mobile, but the Digital Team didn't want to reduce the experience on mobiles over desktop - a common issue with desktop to mobile responsive design

portfolio-hotpoint-ultima.jpg

Ultima S-Line responsive templates

This product launch required a main promotional responsive webpage highlighting the technology and benefits of the new line of Ultima S-Line washing machines. I created the basic wireframe of elements to be included - A main header, a key feature panel, a running strapline, a promotional panel, a group of three additional features, an optional slider with images, and finally the call to action with products and buttons to click.

Category page design

Launching websites involves a lot of page building. Whole category sections need to be designed, laid out and built. However, due to great planning and UX, this can be a rather enjoying task. The layout is locked down and the Category department get to decide which products go where.

The original sketched wireframes for the category pages design can be found on HD Line and the SMARTcategory pages.

Indesit External Brand Stores

I created a brand store for Indesit to appear on the Currys.co.uk website. I created a basic template design, something which could utilise the image assets across each of the category areas. I provide flat design and the HTML to the external client.

Promotional pages

Along with creating the new website, I was also tasked with designing offers and promotional pages. Again, this is using the basic fundamentals of a responsive design layout. The single column design allows for easy breakdown and relayout for mobile and tablet.

Email Responsive Design

Hotpoint and Indesit were sending emails the traditional way - a straight HTML email built within a table based structure. To make the email responsive, I started with the layout, reworking it to allow for the effects of a responsive nature and devised a grid design for the email marketeers to follow. Once in place, the supplied images fit in to a simple, elegant design which was both versatile and robust.

Email Design

Hotpoint and Indesit were sending emails the traditional way - a straight HTML email built within a table based structure. To make the email responsive, I started with the layout, reworking it to allow for the effects of a responsive nature and devised a grid design for the email marketeers to follow. Once in place, the supplied images fit in to a simple, elegant design which was both versatile and robust.