Responsive site




Jack Wolfskin, a well-known German outdoor brand was recently acquired by Callaway Golf to expand into the USA. Visit the new site.


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


Head of e-Commerce
Visual Designer
Accessibility (Design and Development)
UX Designer

My role

UX/UI Lead and Visual Design


Figma, Adobe Illustrator/Photoshop, InVision, Whimsical and SharePoint

Who are our users?

Some 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

Let's spread the word

Before the head of e-Commerce and myself got on board, Callaway had decided to create a marketing page to introduce the brand onto the market. We designed the page with the target in mind to capture emails.

E-Commerce pages

Design library

I created the design library from scratch using some existing elements such as typography and color palette, and improving some others to comply with ADA. A lot of the fonts sizes currently used are too small for people with low vision impairment. Also some focus states are not defined which make it hard for people with motor disability to navigate the website.

Main navigation

Jack Wolfskin European website nav

Hybris template

Problems with JW Europe site nav

  • 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.

Problems with the template

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.

Usability testing

I conducted gorilla testing with the logo centered and the logo aligned to the left. I tested with 6 people, asking them which navigation is easier for them to find what they are looking for.

100% of the participants chose the second version with the logo on the left without any hesitation.

Final proposition

The Hybris dev team agreed to modify the nav, and this final version has been approved by Jack Wolfskin Germany for us to use. We also got approved to use the other version of the logo on mobile.

After seeing the results, the team in Germany decided that they will also move to a left sided logo in the future.

748px breakpoint

PLP pages

Hybris template
Jack Wolfskin Europe


  • 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.


  • 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.

Layout 1 is the closest layout to JW Europe. Layout 2 allows to use all the images without adding the gray background to them, as it does not work well with all of the assets.

60% of the participants were more comfortable with the gray background."It's more visible with the gray background"

I then added layout 3, and tested layout 1 and 3. Layout 3 gives more room to the models since some of the models looks squished.

80% of the participants preferred version 3, and had no problem identifying each product.

I tested how users prefer to see the different colors laid out.

60% of the participants preferred the version with the colored dots."The picture is too small, it's hard for me to distinguish the colors."

PDP pages

Jack Wolfskin Europe
My final version
Mobile version
Size guide mobile