Kenzo x H&M

The UX design journey of creating an unconventional shopping experience.

H&M release event
Above: Kenzo x H&M release event.

Discovery Proccess

Project done for the UX and UI modules of the Digital Art Direction Program at EDIT Lisboa. The challenge was to create a unique shopping experience for any brand that already counted with a widely used digital sales channel.

I chose to work with H&M due to its strong presence and visibility in Portugal, and more specifically with the collection design by Kenzo that had an impactful look and brought strong graphic elements to be worked on the interface.

The collection was premiered at an event in New York with the presence of artists and models generating great impact on social media. The event was an insight to create a process of purchase where it would be possible to buy all the pieces that made up a look used in the event together or individually.

Persona and benchmarking
Above: User personas and heuristics evaluation

Ideating and Prototyping

The first step was analyzing the purchase flow and make a comparison using NNGroup’s heuristics between H&M e-commerce and its main competitors, Zara and Uniqloo, to identify points where usability could be improved.

After organizing the IA through card sorting and creating personas to define where to create points of contact with possible buyers, I started designing wireframes to define the flow expected from the new purchase process.

Below: Wireframing and low fidelity prototype.
Wireframing

visual design and testing

With the wireframe defined and tested through a low prototype fidelity, I started collecting visual references and composing the visual identity of the page to produce a high fidelity prototype with the final responsive design of the application. Finally, after defining and testing the prototype in high fidelity I made designed the microinteractions that brought more dynamism to the user’s experience.

Below: Final layout animation.