Company
H&M
Timeline
2021 | 2-3 months

H&M shop in Amsterdam before launch

Introducing a print on demand kiosk experience in the new H&M stores

The project
After an extensive refurbishment, H&M has recently reopened its Amsterdam flagship store on the Kalverstraat, a busy shopping street in Amsterdam. With the new store concept, the retailer emphasises sustainability and local elements. We aim to introduce kiosk technology into the physical store with exclusive designs by locally relevant artists and H&M Men and kids collaborations. Always relevant artwork managed by H&M.
1. Amsterdam shopping center – Kiosk H&M kids  
2. A global – local network of POD manufacturers to produce, pack, and ship orders

The problem that we are
trying to solve
In the Eccomerce industry, customer needs are changing faster than before. H&M, like any other company, is faced with overconsumption. 21% of a garment's total environmental impact happens after the customer buys the product. More than 100 billion articles of clothing are produced each year, with nearly 20% of them going unsold. This massive overproduction needs an urgent solution. The market changes rapidly; it's something that the last two years have shown H&M that they need to be flexible to adapt to the changes.

Constraints
Timelines & Delivery Goals
We wanted to focus on the entire program launch experience, and we also wanted to ship incrementally so that our users could use new features as we built them. We had three months to finish as much as possible with a handful of engineers. We had an existing product we could leverage that was functional but needed iteration and improvements in how they were organised and pieced together.

Team
At the time, our team was comprised of 1 designer, one account manager, one project manager, four engineers, and two full-time employees from the H&M organisation. We were small, scrappy, and needed to balance customer requests and product bugs while building new features.

Research Inputs

Most of our initial research came from working with customers directly and analysing their experience in product training sessions. We had a low volume of users, so we leaned on the data that H&M shared with us.

Design journey
User journey
Represent the user transition between the Kiosk and smartphone
Wireframe – Kiosk journey
The following screenshots showcase the Kiosk user journey. We learned the specific type of Kiosk they would use in the store with our investigation. Based on our research, we set our devices – Kiosk – to restart and log out from the journey after two and a half minutes. We developed a final confirmation that users can return – if they need more time – or close up their experience. If the user abanded the journey following customer can reset the Kiosk with a click.
Kiosk user journey wireframe
Scaleable filter feature
Kiosk user journey wireframe
Kiosk user journey wireframe
Adding product to basket
Wireframe of the product list page
Wireframe of the mandatory selection
Wireframe of the product list page – Size selected
Quick cart view
Scaleability of the design list page
Scaleable design list page for a future iteration
I produced a template to help scale the brand list view if the team wants to present more or fewer brands on the screen for future scalability. The goal was to keep all the brands shown without scrolling on the kiosk.
Wireframe – Phone journey
The second part of the user journey – happens on the user's smartphone after scanning the QR code from the Kiosk. The user uses their device to check out their basket.
Smartphone user journey wireframe
Kiosk UI Design
Used H&M branding guidelines to create the following UI.
Kiosk UI design
Phone UI Design
Used H&M branding guidelines to create the following UI.
Phone UI design

User testing

Sadly because of the pandemic, we had to postpone the user testing in the shop. We were thinking of using a products survey for our new product, to see how people enjoy their experience and how we can improve it.

1. Planned interview/observation Pre-test before pre-test
2. Pre-test – Demographics
3. Guided test/Unguided test