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.
Stage I: IA
- Audit the current site to define opportunities for improvement
- Redefine the sitemap to put the most relevant information first
- Can we condense information so that the site is more accessible?
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. There were too many pages, some of them with only small amounts of information that could really have been condensed together into a more focused and info-rich experience, making it easier for users to find what they needed. 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.
Stage II: Conceptual Designs
- Identify the desired look-and-feel by providing distinct visual concepts
- Present to client along with rationale for all decisions
- Do we want the site to be corporate or have more of an editorial feel?
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.
Stage III: UX
- Discuss the day-to-day management of the site and how it will work/be maintained
- Outline business requirements for editing of content and adding of new products
- How are these modules going to translate across devices?
Stage IV: UI
- Develop the wireframed modules into fleshed-out designs
- Consider how modules will work together in a page context
- Are we still considering the streamlined approach we identified earlier?
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.