Kesslers International

Next generation website & CMS

The Kesslers project was a complete web rebuild for a company with over 120 years of history and high-profile clients such as Adidad, L'Oréal and P&G.

Along with a new logo and branding, the website was to reposition the company as a modern creative force in retail display.

The project's success is owed to the Webflow CMS, which provides an incredibly easy-to-use interface for updating website content and adding new portfolio and blog items without the need for training or developer intervention.

  • New website, CMS, logo and branding
  • Project and blogs can be easily added by employees
  • Integrated with modern marketing tools and analytics
  • Delivered to spec, on time and on budget

UX Design

I approached the design by first breaking down the site into four user personas, each with different needs:

  1. Business client - wants to read project information
  2. Creative client - wants to see creative work
  3. Kesslers employee - needs and easy way to update site content
  4. Prospective employee - wants to find job and company information
User personas

I then mapped out these personas into user journeys to figure out how to structure the information on the site:

Customer journey map

We then developed a logical site architecture that we tested with various users and stakeholders:

Site plan / Information Architecture

Web Design

I began designing the wireframes taking inspiration from an isometric grid:

Site wireframes

The isometric design looked great in Sketch but proved to be extremely challenging when coming to develop the site, and limiting in terms of updating content easily. It was also probably a little too busy visually, so we stripped back the design to allow greater simplicity (while retaining the boldness) which would ultimately mean greater flexibility for the client to keep the site updated:

Site design v2

UI Design

Having been given the typeface and colours from the new branding, I adapted them to suit the bold site design, optimising for legibility, clarity and balance:

Call to action and button designs
Headings, links and form design

Development

I selected Webflow as the technology to develop the site on. The primary reason for this is its ease of use for non-technical people to add, update and remove content. This feature alone makes it far superior to Wordpress.

Webflow has some very useful features so that you can respond easily to last minute client requests. For example, I set up all the colours as global colours, so that towards the end of the project, when the client requested one of the primary colours to be changed, it was as easy as updating one colour, in one place. The changes were then applied site wide and published in seconds.

I should also mention that Webflow makes it possible to create stunning designs, brought to life by interesting interactions and animations - all without writing a line of code.

Designing in Webflow

Result

The website was launched in early February 2018 and was hailed as a complete success by all parts of the company, including the board of directors.

The main reasons for this success were:

  • Professional look and feel that has brought the company (and brand) into a new era.
  • Ease of use for employees to add and update content.
  • High performance, fast load times and responsive on every device.
  • Integrated with existing marketing tools, as well as some new ones, e.g. Mailchimp.
  • Delivered to spec, on time and on budget.
Project page
Blog page on iPad
Project page on iPhone
visit site

Contact Me

Want some sensible advice?

I design & build technology solutions of lasting value & quality.

Based in 🇳🇱 Amsterdam.

I'm based in Amsterdam, NL & available internationally.