Why an H&M Social Network
H&M has a massive international presence with a work force numbering well into the six digits. Many of these employees, whether working in stores or office buildings, joined H&M in order to get a foot in the door in the fashion industry.
In order to provide employees with the resources to grow as well as foster camaraderie among coworkers, H&M decided to create an internal social network to interact with fellow H&Mers. The approach would be simple: phase one would be a read-only content platform requiring store logins. This would establish the site as a valuable source of information prior to implementing individual logins. By minimizing the requirements for opt-in, we would be lowering barrier to entry and increase the rate of adoption. After the platform has become established in everyday use, phase 2 would be rolled out to encourage user generated content and the real value of the network would grow.
The key to establishing a content platform is understanding the content. Because of the phased approach, we were able to approach the information architecture without having to deal with the intricacies of a true social network. Through card sorting based on content types the clients gave us, we were able to flesh out various categories of content: H&M, Fashion, Hot, Fun and Career-level. The structure was very flat, with equal emphasis on the categories; our strategy was to establish a simple and accessible taxonomy with the H&M network early on as it would guide the content creation moving forward:
Additionally, we identified the key user journey that matched typical behavior flows around media consumption.
Explorations in UI
As a fashion brand, the expectation was that a digital product by H&M would be as fresh as the latest fashion trends. We did a lot of discovery into the mobile realm, trying to discern between up-and-coming UI patterns and experimental fads. Eventually we translated our discovery into an exercise in prototyping various mobile navigation methods; below you'll find some of our explorations into just the navigation:
As you can see, this was a series of explorations for just a single UI element. Our design approach was to rapidly iterate, get feedback and refine the product. With daily check-ins with teams in New York, Florida and Stockholm, Google Hangouts became our best friend (or worst enemy depending on the wi-fi). The same iterative process was done for each screen on both mobile and desktop until each phase one screen was wired out. Below you can find a sample of one of the mobile screens (the document ended up being dozens of pages):
By the time User Testing came around, we had a fleshed out prototype with more visual elements reflective of the H&M brand. We began to integrate realistic content into the prototype along with realistic functionality like searching and filtering using Axure's pseudo-database. Eventually we were able to work with this:
- Open menu
- Find other categories
- Open an article
- Find related articles
- Find the career section
- View a job listing
Additionally, we were able to get feedback on the importance of subcategories, the use of tags, content discovery, the nomenclature of the filters and overall impressions of the UI. While we were at it, we surveyed users on things that would help content strategy moving forward.
Launching a social network to over a hundred thousand employees is no small task; it makes sense to do your homework beforehand to avoid any confusion and face potential failure on a large scale. Testing helped uncover usability and taxonomy insights well prior to locking the design.