Wolfskin Tech Lab

A microsite for the new Jack Wolfskin collection.

UX/UI, Web design, Art direction

Challenge

Jack Wolfskin asked us to create an online experience for the new Tech Lab collection — a collection that differs from their usual outdoor wear and focusses on life in the city. The experience should explore this new concept and its innovative technology and provide easy access to the full product range.

Approach

To highlight Tech Lab’s innovative approach, we created a standalone microsite, detached from their main online store. A combination of impactful images, video snippets, and animations inside a full-screen format allows the user to dive deep into the world of Tech Lab.

Client
Jack Wolfskin

Agency
Machinas, Barcelona

Role
Lead designer
(Concept, art direction and UX/UI)

Date
August 2016

Deliverables
Microsite, newsletters and web banners

Concept and structure.

We created a flexible flow where the user could decide whether he wants to immerse himself and get inspired or jump directly to a specific section like features or product range

Home

Video immersion.

A clean and simple start page features the collection’s brand film in the background to attract attention and create curiosity.

Navigation

Inspiration vs. direct access.

Vertical scrolling or the left side navigation explores the more conceptual and inspirational pages. The icons on the right take the user straight to more technical pages like a video page, a features overview, and a product range.

The shopping cart is always visible in the top right corner.

Deep dives

Horizontal scroll and modals.

On some pages, the user can encounter a horizontal scroll or overlays for more in-depth information.

Purchase.

Being able to select and add a product to the shopping card directly within the experience was an essential requirement of the user flow.

Product range

A slider to explore.

We opted for a slider to showcase the product range because

we don’t have more than nine products per gender
a slider allows us to stay within the full-screen format
it’s easier to compare the products side by side

Product details

Selection and purchase.

The user can select the color and size and add the item to the shopping basket.

Technical restrictions prevented us from implementing a checkout process in this microsite — when clicking on the shopping basket, the user is kindly asked to complete the checkout on the main website.