BASTIAAN BURGHARDT

PROJECT

CALVIN KLEIN REDESIGN MOBILE

THE BACKGROUND

Previous freelancers, agencies, and temporary designers made the design for the Calvin Klein website. This resulted in a poorly designed website with no cohesive style. What we wanted to accomplish was to start fresh and make truly customer-centric designs.

USER & AUDIENCE

The target users of Calvin Klein are young fashion-forward customers who are not afraid to express themselves. These customers have a strong preference for mobile-first, quick, direct engagement.

TEAM & ROLE

I was the only designer in the team with occasional support from an external freelancer.

I coordinated and led all facets of design including: information architecture, user flows, interaction design, the visuals, and prototyping. I also conducted user research using methods such as interviews, surveys, internal focus groups to study both user behavior and attitudes.

DESIGN APPROACH

Our main focus was on the Happy Path in our flow, which goes from the Homepage to Product Listing Page (PLP), then to Product Detail Page (PDP).

In the checkout we only implemented purely cosmetic updates. This was due to a shared checkout experience with Tommy Hilifger, so less focus was put on this aspect.

FINAL USER INTERFACE

Mobile

Gender split

96% of all our customers shop within a single-gender. Based on this insight we performed various A/B tests which showed us that the splash page as a whole improved the user experience and conversion.

Leading our users to gender landing pages allows us to create relevancy in the content provided. This is the first step towards personalization and helping our users find exactly what they are looking for. 

Search

Users who search converted more highly than anyone else.

Users who are using the search function in the UK on mobile had a conversion rate much higher than those who didn’t.

In the UK, a small percentage of users that were using the search functionality represented almost a quarter of the revenue! Based on this fact we ensured high visibility of the search in the menu.

Exposed Subcategories

Analytics showed us that visitors spent a great deal of time viewing items on a PLP and clicking to view PDP pages, often remaining in the same category. To improve cross-category shopping we implemented a faster way to switch between categories by exposing the next level navigation.

We leveraged mobile-native gestures (swiping) to help users quickly understand the offering in each category without having to perform a page refresh.

Sticky Filter Button

Filters are key to providing relevancy and personalization to users.

For filters, the greater the visibility is, the higher the usage will be. A/B tests showed us an increase in clicks and more PDP visits. We also made the filter sticky to increase usability.

Dynamic grid

Full-width PLP images create a truly immersive experience. User survey showed us that over a third of underwear buyers and a quarter of apparel buyers are motivated to buy because of product imagery.

This spot can also be used for more lifestyle-focused imagery. The same survey showed us that a fifth of underwear buyers and a fifth of apparel buyers are motivated to buy because of the lifestyle imagery.

Product Image

Results from a survey showed that 36% customers were motivated to buy because of the product imagery.

Thumbnails

We noticed an increase of add-to-bag when using thumbnails instead of swatches. There was also a higher form of interaction recorded.

PLP Links

Analytics showed us that there were a lot of PDP-to-PDP visits without ever visiting a PLP. To counter this behaviour, we highlighted the product category which leads Category PLP and a brand category which leads to a branded PLP.

The brand category also educates our customer about the multiple brands that fall under the CK umbrella.

USP

Highlighting fast-selling products or a special USP below the CTA created a sense of security and led to an increase in AOV.

Product Details

On load, the product details information is open by default whilst secondary product information remains closed. This helps to declutter the page and keep it product-focused.

Collapsed

During the user tests for CK set page, half of the participants of the users didn’t think it’s necessary to have detailed shipping information on the PDP directly visible. They would rather see it when they feel like they need it.

Add to bag

Add to bag triggers a slide-out that shows all the sizing options available.

Dropdown mimics native picker which creates a seamless mobile flow. By removing the old size drop-down we reduced the number of clicks during the add-to-bag process.

Tests showed a modest uplift in revenue, and a modest uplift in add-to-bag.

CONCLUSION

The overall redesign was well received within the company and by our customers. It increased communication within the company by becoming a northern star for every department.

Since the redesign required close coordination across multiple departments, personal growth wise, I learned to involve multiple stakeholders such as content team and developers as early on as possible to help refine and set expectations.

NEXT UP: CATEGORY ENTRIES

CHECK IT OUT