edwindmello.com

My role

Product Design

Discovery

Mapping and understanding workflows

User Interviews

Stakeholder interviews

Maintain tight user feedback loops for iteration

Client

H&M

Duration

2.5 years

Team

2 des, 4 dev, 1 PM, 2 BE

A next-gen visual tool for creative teams to plan, present, communicate and share the collection

H&M used an outdated old generic tool for creating, presenting and sharing designs and collections. This tool no longer worked, was bloated and was a pain to most users. The goal was to decommission the old tool and split it in 2 new tools that were specialised tools for specialised purposes.

My role was to help design one of these tools.

Project highlights

Improved workflow efficiency

The new app cut down several steps and reduced time for users to finish documents

Increased user

satisfaction

Users were happy with improved workflows and the nicer finishing look of their documents

100% of users voluntarily switched to new app

Users had a choice of sticking to the old app if their needs weren’t met but all users switched to the new app

Better accuracy and operational efficiency

The consistent access to live data reduced back and forths and mistakes and improved efficiency

Improved performance & loading speed

The new app vastly outperformed the old one in speed and reliability

Tight loop between user feedback & implementation

Short time between customer feedback and implementation meant user requests were catered to quickly

Contribution to enterprise design patterns

Enrich the H&M Enterprise style guide

01.

Project Background

H&M tasked Reaktor to rebuild their visual planning tool, part of the ambition to revamp their entire information system across sales & merchandise teams.

The original software, patched over time, suffered from complexity and a disjointed user experience. Our role was to transition an outdated desktop tool to a cloud-based, real-time web app.

The purpose of this new application would be to facilitate people (creators) to create documents of garments and collections and then present and share it with other people (receivers).

A visual planning, communication and sharing tool for creative teams with live data.

02.

The most important

challenges

How might we connect creators and receivers, while keeping data live and updatable?

How might we speed up doc creation while letting users focus on creative matters?

How might we standardise documents while still keeping things flexible for users?

02.

Snapping grid and smart alignment

Less time on manual alignment,

more time on creative planning

Snapping dotted grid for easier alignment and less manual work

Smart alignment that clusters all selected elements together

03.

Standard sizing and colour options for a unified look across docs

Standardising sizes for a consistent look

Elements like article cards and text had 3 or 4 standard options. This ensured that no matter the creator, they used similar sizes. Similarly, fonts and colours were limited and contributed to a professional looking document.

06.

Article Browser

The article browser had

2 major issues.

The window was too small and it made it hard to browser and find articles.

A smaller window made it quite clunky to browse and view articles. A lot of time was wasted on scrolling and trying to find the right article.

The window overlay took up space on the board that users were working on

The old window also took up space on the canvas that users were working on. This caused friction with users who constantly had to move the window around.

The redesigned article browser provides more room to explore content, and can be hidden completely for distraction-free board work.

Easier to browser through articles with a larger window

The larger window makes it easy to browse through articles and provides a more relaxed viewing experience.

Enabling users to focus on the board by hiding the browser

With a keyboard shortcut (cmd + k), users can easily show or hide the browser, and focus on the work on the board.

Keyboard shortcut to quickly hide/show article browser

The keyboard shortcut and the quick hide/show mechanism allows users to have complete focus on whatever phase they’re in.

07.

Cutting time spent on finding extra information

Bringing extra information in Compass, only visible when needed

Previously, users had to browse between different H&M internal tools to find extra information. In our redesign, we created an expanded state of the article card which shows all of this information without the users having to go to a different tool.

Integration with other tools in the client’s organisation

In order to find things in other internal H&M tools, users would often copy the article number and paste it in another tool. We created integrations with other tools where with a simple right click, you could choose to search for that article in another tool without having to copy paste the number.

08.

Customising attributes with a click

How might we enable users to easily change the data they show with article cards?

Previously, users manually deleted attributes which were merely textboxes under the article image. We integrated these attributes with the card and created a side panel where users could control which attributes would be shown for the entire document.

09.

Receiver view mode with live data

Receiver view mode with no edit access for live data

Previously, creators exported documents to send to receivers. But this meant the data and attributes attached to the articles were no longer live. We created a receiver mode with view access only so that users could still get this live data without being able to edit it, unless required.

Outcome