Responsive site
E-Commerce
Overview
Context
Jack Wolfskin, a well-known German outdoor brand was recently acquired by Callaway Golf to expand into the USA. Visit the new site.
Constraints
Using assets and visual guidelines from Jack Wolfskin Europe, and a Hybris template from another brand that Callaway acquired.
Team
Head of e-Commerce
Visual Designer
Engineers
Accessibility (Design and Development)
UX Designer
My role
UX/UI Lead and Visual Design
Tools
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.
1440px
748px breakpoint
Mobile
PLP pages
Hybris template
Jack Wolfskin Europe
Constraints:
- 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.
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.
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
