Case Study: HCP Packaging

Bringing security, style and logic to an online presence.

HCP Packaging Intro Picture
Some time ago I was approached by Cheryl Morgan, an ex-colleague of mine from my days at Mudpie, to see if I would design and potentially build a new website for her current employer, HCP Packaging.

HCP Packaging is a global player in the world of makeup and cosmetic packaging. Headquartered in China, they have offices and manufacturing facilities all over the world and supply some of the biggest names in the cosmetic industry, including Estee Lauder Companies and its subsidiaries; Maybelline New York; Max Factor and Johnson & Johnson.

The site they were using at the time was long overdue a refresh - it was built using an old version of Drupal, which was slow, cumbersome for the team to update and vulnerable to hacks - which happened often. The information architecture also felt bloated; too many pages in the navigation spread the information too thinly. Cheryl was open to any and all suggestions, but was receptive to the idea of creating a site in WordPress as she was familiar with the CMS and it would be widely supported.

During our initial discovery session I surmised that the development of the site might be a bit over my head - there was a desire to include account creation functionality, along with an extensive product catalogue. Users would be able to browse the catalogue, save favourite products down to a folder and download spec sheets from them, which were PDFs containing technical information regarding dimensions, finishes and so on.

This aspect of the site moved it almost into e-commerce territory, and so I enlisted the help of Joe Lambert and his team at Rareloop to help with the development. They are a small but tight-knit team of designers and developers based in Southampton, who specialise in WordPress builds.

Information Architecture
The first thing we needed to do was figure out the new sitemap. As mentioned, the IA of the current site was messy and needed to be streamlined. Cheryl and I iterated a new version of the sitemap (nailed it by v4!) which combined some pages together while adding some logic to the product and inspiration sections. We also looked at what of the current content could be salvaged and what needed writing anew.

HCP Website Sitemap

Creative Stage I: Conceptual Designs
I began the design process by putting together a deck featuring three different concepts for look-and-feel. With these concepts I explored different options for use of imagery, typography, whitespace and overall information density. The team at HCP were very pleased with the directions presented - as I expected, they favoured one in particular, but wanted to incorporate certain elements of the other two as well.

As the site is product-focused, it needs to be fairly dynamic and easy to update. In the initial conversations between Cheryl, Joe and myself, it was decided that a modular approach would work best; we would design and build a number of modules that would be used to construct an initial launch of the site, but from there on out, the HCP team could essentially use these modules in a ‘page-builder’ fashion to create, edit and maintain their own page layouts.

So that is what we did.

HCP Website UI Concepts
HCP Website UI Concepts
HCP Website UI Concepts
HCP Website UI Concepts
HCP Website UI Concepts
HCP Website UI Concepts

Creative Stage II: UX
I first put together wireframes for a set of desktop-level page elements in Sketch, and then sat with the developers to talk through them and see if there were any major issues that could arise during the build, before we took them to the client. I also explained how the elements would work on smaller screen sizes, which was useful as it meant I didn’t need to recreate everything at tablet and mobile sizes – only a couple of elements that required a bit more design thought for their display at smaller screen sizes e.g. the infographic. But a module containing two side-by-side images? Those will just stack, no issues.

HCP Website Wireframe Modules
HCP Website Wireframe Modules
HCP Website Wireframe Modules
HCP Website Wireframe Modules
HCP Website Wireframe Modules
HCP Website Wireframe Modules
HCP Website Wireframe Modules
HCP Website Wireframe Modules
HCP Website Wireframe Modules
HCP Website Wireframe Modules

Creative Stage III: UI Designs
HCP were happy with the variety of modules we had proposed, so we quickly moved into design. I put together some demonstrative pages for HCP so that they could see all the modules in situ, featuring their own content - we then had a workshop session where Cheryl and I printed out all the pages, cut out the modules into strips and used them to prototype each page from the sitemap, one by one.

HCP Website UI Modules
HCP Website UI Modules
HCP Website UI Modules
HCP Website UI Modules
HCP Website UI Modules
HCP Website UI Modules
HCP Website UI Modules
HCP Website UI Modules