Ecommerce

Research / UX/UI

Online shopping website displayed on a desktop and smartphone screen, showing a red puffer coat for women from Jack Wolfskin.

My role

UX/UI Lead

The team

UX/UI designer, Visual designer, e-commerce manager, engineers

Context

Callaway Golf had just acquired Jack Wolfskin, a well-known German outdoor brand, and we had to create and launch a US e-commerce website adapted to the US audience.

Date

2020

Results

A pie chart showing 11.9% with a blue arrow pointing to a segment of the chart.
A pie chart showing a segment labeled 19.6% and an arrow pointing to the segment.

Source: PR Newswire

OVERVIEW

  • Using assets and visual guidelines from Jack Wolfskin Europe, and a Hybris template from another brand that Callaway acquired.

  • A very short timeline - 4 months

Constraints

GATHERING RESEARCH &
MARKETING

Several surveys had been created and sent to US outdoor enthusiasts in the past by the Research team at Callaway. From the results, this is what we learned about our main target:

. Below 35 years old 

. Single or household with young children

. Accessories are high on their list of purchase

Who are the users?

We created a marketing page to introduce the brand to the market. With the help of a Visual designer, we designed the page with the target in mind to capture emails.

Introducing the Brand to the Market

Clothing and outdoor gear website showcased on computer and phone screens with images of people hiking, wearing outdoor apparel, and carrying backpacks, with a black and yellow color scheme.

Design library

I created the design library from scratch using existing assets, such as typography
and color palette, and improved some other elements to comply with ADA. A lot of the font sizes currently used by Jack Wolfskin Europe are too small for people with low vision impairment. Additionally, some focus states are not defined, which makes it hard for people with motor disability to navigate the website. The color yellow had to remain, as well as the Italic font.

A grid of website button styles in different colors and states, including active, hover, disabled, and disabled hover, with options such as 'Shop Our Collection', 'Cancel', 'Add to Cart', and 'Sign In'.

Main navigation

Jack Wolfskin European website navigation

Jack Wolfskin outdoor gear website homepage, featuring categories for apparel, footwear, advice, highlights, sale, and activities with images of people hiking, skiing, and outdoor activities.
A person standing on a rooftop balcony in an urban setting, wearing athletic clothing, with tall buildings in the background.

Hybris template to work from

IDENTIFIED PROBLEMS

The European website is not easy to navigate

  • The hamburger menu is repeating what’s in the main menu. Users do not gain anything more from clicking on it.

  • The logo being centered does not allow enough space between the different sections hence does not really respect the Gestalt law of Proximity.

Jack Wolfskin logo is higher than wider and the team in Europe did not want to compromise on the size of the logo which is understandable.

Problem with the template format

USABILITY TESTING

I conducted gorilla testing with the logo centered and the logo aligned to the left. I tested the prototypes in person with six different people, asking them questions such as: where would you click to find women’s pants? Subsequently, I assessed their speed in navigating to that particular section and compared it to the alternate version.

Gorilla testing

Version with logo centered

Screenshot of the Jack Wolfskin website homepage featuring a woman in a down coat walking past a purple wall, with navigation options and product categories.

Version with logo on the left

Screenshot of Jack Wolfskin's online store homepage showing navigation for women, men, kids, equipment, and sustainability. Featured section highlighting 100% recycled products and a woman in a black puffy coat walking against a purple wall, labeled as the "Recycled Warmth" jacket, called CRYSTAL PALACE

100% of the participants found what they were looking for faster with the logo on the left.

Results

The Hybris dev team agreed to modify the nav, and this final version was approved by Jack Wolfskin Germany for us to go ahead and implement. We were also approved to use the other version of the logo on mobile, which was more user-friendly.

After seeing the results, the team in Germany decided that they would also move to a left-sided logo in the future, which they did www.jack-wolfskin.de

Final proposition

Screenshot of Jack Wolfskin website homepage with navigation menu including options for Women, Men, Kids, Equipment, and Sustainability, and a search bar.
Screenshot of Jack Wolfskin website header with logo, navigation options for women, men, kids, equipment, sustainability, sign in, cart, and a search bar.
Screenshot of Jack Wolfskin website menu with options for women, men, kids, equipment, and sustainability, and login/register links at the top.

PLP pages

  • JW image assets are square PNG files with a transparent background.

  • We used the Hybris template for other pages with has a 20px left margin which we want to keep consistent.

Constraints

Jack Wolfskin Europe

Hybris template

Screenshot of a website displaying women's winter coats for sale, including various styles and prices with discounts.
Screenshot of a website selling men's t-shirts, showing four shirts with prices and descriptions.

Goals

  • Fit square images within the Hybris template without having to make too many modifications.

  • Content editors should be able to implement elements easily into the CMS.

USABILITY TESTING

After analyzing goals and constraints I crafted 3 layouts. I asked the participants which layout they were more comfortable with.

The layout that is closest to JW Europe is Layout 1. Layout 2 permits the use of all images without the inclusion of a gray background which may not be compatible with all assets.

Gorilla testing

Layout #1

Layout #2

Display featuring four women modeling insulated winter coats in various colors: beige, red, gray, and navy blue. The coats are labeled as 'The Ten Year Microfiber Puffer' and 'The Ten Year Lab Jacket,' with prices listed as $84.95. The model in the beige coat is on the top left, the red on the top right, the gray on the bottom left, and the blue on the bottom right.
Four women wearing different colored puffer jackets with the titles and prices. Top left: beige 'The Ten Year Microfiber Puffer' priced at $84.95; top right: red 'The Ten Year' for $84.95; bottom left: dark green 'The Ten Year Microfiber Puffer' on sale for $84.95 from $94.95; bottom right: navy 'The Ten Year Lab Jacket' for $84.95.

Results

60% of the participants were more comfortable with the gray background.

"It's more visible with the gray background."

Iteration

I then added layout 3 and tested layouts 1 and 3. Layout 3 provides additional space for the models as some of them appear cramped.

Layout #1

Layout #3

Products from The Ten Year collection including three long padded jackets in beige, red, and blue. Each jacket has a hood and is displayed on a female model. The jackets are priced at $84.95, with one style originally priced at $94.95.
Four women modeling different long, insulated winter coats in beige, navy, dark blue, and gray with prices listed, on a white background, with color swatches above each coat.

Results

80% of the participants said layout #3 was more lisible, and had no problem identifying each product.

PDP pages

Jack Wolfskin Europe

Online product page displaying a red puffer coat titled 'Crystal Palace Coat' for women, priced at 239.95 euros, with options for size and color, and an 'Add to Cart' button.

Jack Wolfskin US

Online product page displaying a red 3-in-1 women's puffer jacket with a model wearing it, showing front and back views, available in multiple colors and sizes, with an add to cart button.

High fidelity design

Screenshots of the Jack Wolfskin online store showcasing a women's red puffer jacket, the NAHA JIN PARKA, on the product page. The right side displays related jacket options in different colors
Screenshots of a mobile shopping app displaying a women's puffer coat. The first screen shows the product page for a red, 3-in-1 hooded hardshell parka named 'Naha Jin Parka' priced at $299.95, with the model wearing the coat and thumbnail images below. The second screen shows sizes for the coat, color options, and a yellow 'Add to Cart' button. The third screen displays related product suggestions with images and prices for various jackets and coats.

Other Projects

A laptop screen displaying a health app with a report, graphs, and personal details, alongside a smartphone showing a daily exercise tracker interface.

Health tech

View case study
A laptop and smartphone displaying a job and learning platform interface with navigation menus, job listings, and course options on a purple background.

Social Tech

View case study