Click for TL;DR (Summary)
We were tasked with phase one of a two-phase social network rollout for H&M.  Phase one was meant to establish a publishing platform and would need a lot of research and testing to figure out not only strong branded presence to distinguish itself, but also to flesh out the taxonomy for all content moving forward.  Through a lot of legwork done in user research, rapid prototyping and user testing, we were able to create a relevant phase-one platform for H&M employees.  Tools used: Optimal Sort, Sketch (Bohemian Coding) and Axure RP Pro.

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.

Information Architecture

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:

Screen Shot 2016-04-02 at 7.24.09 PM

Additionally, we identified the key user journey that matched typical behavior flows around media consumption.
Screen Shot 2016-04-02 at 8.16.55 PM

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:

v2: X-Y Offset 

v3: Bottom Expand 

v5: Context Shift 

v6: Bottom Half Tray

v10: Header Category Navigation Shift 

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):

Screen Shot 2016-04-02 at 8.26.18 PM


User Testing

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:

 Because the prototype was so fleshed out, we were able to test various tasks:

  • 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.