A great opportunity working for a flexible ideas company like Hotpoint is that random work falls in your lap on a regular basis. While building the main website, other departments come along and ask for mockups to be created. They have a print work or the PDF asset and they need 'something like this' or 'just like this one but with new images'. As long as the design layout is agreed upfront, the actual time to create is relatively quick. As was this below.
One of the best part of my job is getting to design, layout and build company promotional material. Hotpoint currently has a 'Love your...' campaign leading up to Christmas. One of the first promotions I built with for Love Your Clothes. A campaign 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 and drop-out text panels. Each module could be reorder or duplicated with different imagery or text. Once approved, I set about building the page using Foundation 5, the adopted code template for the site.
Hotpoint has a simply brand style. It's currently black background with white text. The yellow text is the promotional content. The images are strong product shots in either cutout or lifestyle scenes. I created about 40 banners over the 6 months I was at Hotpoint.
I was tasked to create an email for Indesit. The Digital Team were started to move towards responsive emails. I did the relevant research and found Google Email (Gmail) to be extremely restrictive, stripping out most of the styling. However, most of the other email clients performed very well. I created the initial designs using a previous Hotpoint brief. I had to calculate the dimensions of all the promotional images and the type sizes. Then used colour blocks to visualise the design. See below.
Once approved, I took the live brief from Indesit and fit each of the promos into the design. One can see that the Indesit email only uses one main promo, so I removed the second one, and continued with the smaller block promos.
The beauty of a responsive email build is that the content and layout is build only once. So if there are copy changes, these only need to be made once. The media queries adjusted the design and replace the images depending on the window size. So mobile see the layout below.
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
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.
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.
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
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.
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.
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.
In August, the new campaign for Day1 kicked off. I have been building pages for the current website and for the new site. I have created all the banners and promo slots using the 'hourglass' branding, and nailed down some key design idea for future campaign for the Day1 series.
This design started off with quick pencil drawing and then structural layouts. Once approved, I started adding the image assets and the page was built. It's always a good idea to confirm the structural layout ahead of spending hours creating a visual. This way there wont be any nasty surprises and the worst situation you're left with is an last minute image change.
At the time of this post, the design is on the fixed width website but I have created the three designs for the responsive layouts; mobile, tablet and desktop.
We're using Foundation 5 for the structurally responsive layouts in HTML. It's been some of the first pages built in this way and I'm finding it really easy to pick up.
Just finished a new design for the Hotpoint Ultima S-Line range of washing machines. The basic design has been design responsively but the initially upload is fixed because its on the current website. All the new responsive designs will be visible on the new website when its launched. Using the Foundation5 framework, which is very easy to use.