Wolfskin Tech Lab

A microsite for the new Jack Wolfskin collection.

UX/UI, Web design, Art direction
wolfskin-techlab-mockup
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.

wolfskin-techlab_home
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.

wolfskin-techlab-nav
wolfskin-techlab_home-mobile
wolfskin-techlab_process
Deep dives

Horizontal scroll and modals.


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

wolfskin-techlab_product2
wolfskin-techlab_product1
wolfskin-techlab_features
wolfskin-techlab_features2

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
wolfskin-techlab_pov
wolfskin-techlab_product-overview1
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.

wolfskin-techlab_product
wolfskin-techlab_product-detail
wolfskin-techlab_product-detail3
wolfskin-techlab_product-detail2
wolfskin-techlab_product-detail-mobile

See also

Mambu – a flexible brand for a fintech company.Mambu – a flexible brand for a fintech company.

Mambu – a flexible brand for a fintech company.

Art Direction Visual Identity
Netcall – a new brand and website for a CX company.Netcall – a new brand and website for a CX company.

Netcall – a new brand and website for a CX company.

Art Direction UX/UI Visual Identity Web Design
Velocity Web kit – a tool for consistency and collaboration.Velocity Web kit – a tool for consistency and collaboration.

Velocity Web kit – a tool for consistency and collaboration.

Process UX/UI Web Design
Away – an app for planning travel itineraries.Away – an app for planning travel itineraries.

Away – an app for planning travel itineraries.

App Design UX/UI
Wolfskin Tech Lab – a microsite for the new Jack Wolfskin collection.Wolfskin Tech Lab – a microsite for the new Jack Wolfskin collection.

Wolfskin Tech Lab – a microsite for the new Jack Wolfskin collection.

Art Direction e-Commerce UX/UI Web Design
Sprint Business – a campaign to explain 5GSprint Business – a campaign to explain 5G

Sprint Business – a campaign to explain 5G

Art Direction Digital Campaign UX/UI Web Design
Back To Top