020 3137 8829

Hovis are a very well known bakery brand in the UK with a heritage that dates back to 1886.

We were the agency of choice to both design and develop the new Hovis website. Monochrome took the lead in conceptualising a look and feel that would influence a major TV advertising and marketing campaign.

We set out to build a website that both promoted the Hovis brand strategy and immersed the user in an interactive and animated experience. Keen to push boundaries whilst not neglecting the overall user experience, we utilised various front-end frameworks. We are very pleased with the results.
Adrian Munn
Sales and Marketing Director
Monochrome

The Brief

We had an incredibly tight deadline to work to due to a high profile, co-inciding TV advertising and marketing campaign. The site was designed to support the relaunch and refresh of this famous brand and introduce new streamlined product ranges.

The site needed to be fully responsive and fully editable using the Kentico CMS.

Whilst happy to let us push boundaries, the project stakeholders were, rightly-so, keen to see that core UX functionality was not compromised.

The Challenges

Monochrome wanted to achieve pixel perfect designs promoting Hovis’s brand strategy and ultimately create an immersive interactive/animated website with UX as the primary driver to engage the user utilising the latest modern website design patterns & Front End Frameworks.

We had an incredibly tight deadline to achieve due to High profile TV Advertising and Marketing Campaign.

Through a series of sketches, we were able to rule out various early concepts. One of our first ideas focused on bringing the famous Hovis 'boy on a bike' into the 21st century. Whilst Hovis really liked the concepts we showed them, and agreed that they were perfectly aligned with their forthcoming ad campaign, they were ulitmately deemeded to be lacking in longevity.

Back to the drawing board we went.


View Sketches

The Solution

Monochrome’s solution was to develop the new website to high UI standards utilising modern web standards, design patterns & front end frameworks, within the Kentico CMS.

The CMS implementation was designed around Kentico’s ASPX webform engine to allow Kentico admins / users full editorial control without being able to override or break the complex UI branded templates and animations on the pages.

The site consisted of 12 page templates and a number of custom webparts and was launched in 2 phases to a very tight deadline in line with a major TV advertising / marketing campaign. The first phase was released with a limited number of page nodes in Kentico and utilised the Kentico API to extract the data via JSON feed to effectively generate a static version of the site. This allowed us to build the Kentico back-end infrastructure and page types to store product / FIR nutrition and abstract the data via the API.

This allowed us to develop in parallel both the front end HTML/CSS pages & Kentico back-end functionality utilising 2 teams within the Monochrome studio working in parallel. We felt this was the most effective and quickest method to deploy the site without risk to the very tight and hard deadline which was imposed by the Hovis marketing team and in-line with a very high profile TV advertising campaign.

Phase two consisted of a major restructuring of the product range along with new products and a new careers section “Success Factors”.

The site is hosted on AWS on a dedicated EC2 instance allowing rapid scalability for traffic increases when required.




We were able to introduce several unqique UI features into this website. I'm particularly pleased with the subtle way the fixed height homepage background becomes the website's footer when you scroll the page down. I'm also very impressed that our development team were able to bring our innovative 'carousel within a carousel' concept to life. This great feature allows for both brand and individual product selected and is key to fulfilling the 'single click to any product' requirement from the original brief. You can see this in action on the site's homepage.
David Marsh
Creative Director
Monochrome

The Conclusion

With Kentico v 9.1, Monochrome implemented a highly visual, creative UI design with strict branding guidelines and a fully responsive fluid grid to work across desktop, mobile, and tablet devices utilising the Kentico master / child templates, web forms, and modern front-end JavaScript frameworks. The team consisted of 2 UX/UI designers, 2 front-end developers and 3 Kentico .NET back-end developers and delivered the site within a tight 2 month deadline in line with a TV advertising campaign.

The site was put forward for 2015 Kentico site of the year finalist under the food and beverage category.

We continue to enjoy a successful working partnership with Hovis, delivering digital design consultancy and web development services.


View Design Showcase




Get in touch...

If you like what you see, and feel that Monochrome could improve your digital appearance and help to propel your business forward, please don't hesitate to get in touch.


Contact Us

Kentico CMS

Kentico CMS is the all-inclusive .NET Web Content Management platform that offers clients a complete solution to successfully fulfil their web strategies and organisational goals.

By providing a cost effective Enterprise scalable CMS, Kentico fully caters to both SMB, global companies and Fortune 500 clients across all industry verticals for high performance corporate websites, eCommerce sites, Community sites, intranets, extranets and portals.


More about Kentico


Back-end TechnologyWebsites and CMS

JavaScript

'Vanilla' JavaScript is the staple of any web and application developer. We write copious amounts bespoke javascript here at Monochrome and only reach for a library or framework when a project directly benefits.


More About Javascript


Front-end Technology

User Interface (UI) Design

Once wireframes have been signed off by the client, we would typically produce a set of high-fidelty designs.

It is at this stage that we are considering the minutiae of the design. The end result is an highly accurate representation of your website or app.


Creative Services

Interactive Wireframing

Wireframing is an essential part of any project. At this stage we're concerned with layout, user journies and the positioning of content and calls-to-action. Palette, font choice and cosmetics in general are not on the agenda.

Using the excellent Invision prototyping app, we'll import static wireframes and hook them up to create an early illusion of interactivity.

Wireframing allows us to be confident in our UX decision making, proving (and occasionally disproving) a concept before a single line of code is written.


Creative Services

Concepts and Sketches

Our creative process typically starts with a good old fashioned peice of paper and a pencil (preferably one with a rubber on the end).

Whether it's a quick pre-wireframe sanity check, or a more detailed exploration of unique UI concept, we'll invariably put pencil to paper before we start pushing pixels.


Creative Services

Contact Us