How to meld a company's brand experience with e-commerce.
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...
Jack Aaronson, CEO of The Aaronson Group and corporate lecturer, is a sought-after expert on enhanced user experiences, customer conversion, retention, and loyalty. If only a small percentage of people who arrive at your home page transact with your company (and even fewer return to transact again), Jack and his company can help. He also publishes a newsletter about multichannel marketing, personalization, user experience, and other related issues. He has keynoted most major marketing conferences around the world and regularly speaks at Shop.org and other major industry shows. You can learn more about Jack through his LinkedIn profile.
US Consumer Device Preference Report
Traditionally desktops have shown to convert better than mobile devices however, 2015 might be a tipping point for mobile conversions! Download this report to find why mobile users are more important then ever.
E-Commerce Customer Lifecycle
Have you ever wondered what factors influence online spending or why shoppers abandon their cart? This data-rich infogram offers actionable insight into creating a more seamless online shopping experience across the multiple devices consumers are using.
October 13, 2015
1pm ET/ 10am PT
November 12, 2015