Almost two years ago, my consulting company spent a better part of the summer in Sweden, where we were hired to create a new online strategy and user experience for the major retailer. The project was huge, as it was not just a facelift. The new strategy changed everything from the underlying taxonomy and categorization of products to the way people would understand the H&M brand online. The biggest challenge, however, was melding the company’s brand experience with e-commerce.
Like many companies, H&M had two separate websites. One was a “brand experience” site that was very carefully designed to let the viewers live its brand. It was very successful and well-thought-out, and its marketing campaigns were (and continue to be) beautiful and cutting edge. Then there was the e-commerce store, which was also fairly successful but clunky. More importantly, these two sites had nothing to do with each other, called the same items by different names, and presented a mixed brand message to the consumers.
The new site, which is finally launched, changes all of that. It is a unified site in which brand and shopping not only live under the same roof, they blend seamlessly. (Note: Those in America should log in as if they are from the U.K., as H&M hasn’t rolled out e-commerce in North America yet.)
There are a million things we could talk about as far as the new design of the site, as we envisioned each detail for a specific reason. For today’s column, I’ll touch on the major ideas, and perhaps I’ll return to this case study in future columns.
The original “brand” site had a virtual model that let users try on clothes. It was specific to whatever marketing campaign the company was currently running. We took that idea and integrated it into the rest of the site, and made all products available to it. Now, wherever you are in the site, you can take the article of clothing you are currently looking at and “try it on.” While trying it on, you can mix and match other items and create your own looks. You can save these looks, send them to friends, add all the items to your cart, etc. One can access this virtual dressing room from product pages, quick look pop-ups, and practically everywhere else. While a virtual dressing room is not a new idea, it is implemented here in a very cohesive way, and is integrated into the fabric of the site, not as a third-party add-on.
Quick looks are not a new idea either. But, we envisioned them slightly differently for H&M. Instead of quick looks about an individual item, they are mini shopping experiences. If you select the quick look in a marketing campaign, the pop-up lets you look through each item (the entire look), not just on outfit. If you go to the quick look for a specific item, a pull-out tray shows you what else the item goes with, and you can shop all the items from within the pop-up. It’s a much more functional and merchandized version of a standard quick look.
Then there are more subtle ideas. A normal product listing page (for instance, Ladies/Jackets & Coats) is turned into a marketing/editorial page because there is an area on the page that the marketing department controls. On this page in particular, there is a fashion trend tip about trench coats at the moment. This subtle idea lets the marketing side of the house still be the fashion guides of the site, even deep within traditional e-commerce areas.
The current site is only the beginning. Expect to see a lot more coming online in the next year. The major hurdle is over: launching this new foundation. The foundation stretches as far back into the company as it can, with all new tools for the merchandizing/marketing teams that had to be implemented by H&M’s implementation team. Now that the foundation exists, it should be easier to add the rest of the features to the system over the next year. This is especially true because H&M products can be regionally specific, and the site has to adapt to countries with no e-commerce capabilities, countries with or without physical stores, and cultural differences that need to be coded into the system (especially in regards to the check-out process, which has to account for a lot of regional customs).
As with any project that takes two years to complete, trends change from initial strategy to final roll-out. Building the perfect site is a task that is never completed, and I am sure that H&M will want to tweak things here and there as real users use the system. This is a natural course of evolution. While we did extensive user testing during the strategy phase of the site (using clickable wireframes), nothing prepares you for real users who have real tasks to accomplish.
H&M is an amazing company, and its brand is held in high esteem the world over. By mixing its brand experience with a superior e-commerce experience, H&M is developing a web presence that matches its cutting-edge offline feel.
Questions, comments? Leave a note below.
Until next time…
Emily Ma, product director of Tencent’s advertising platform products department, was a keynote speaker at ClickZ Live Shanghai where she discussed the ... read more
The terms that customers type into your site search function can help you to gain an understanding of user behaviour and can be used to optimise ... read more
Google Analytics comes with lots of standard reports and settings, but with a little customisation you can extract much more value. One way is ... read more