PROJECT

CALVIN KLEIN REDESIGN DESKTOP

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 on the team with occasional support from an external freelancer.

I coordinated and led all facets of design including information architecture, user flows, interaction design, visuals, and prototyping. I also conducted user research using methods such as interviews, surveys, and 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 Hilfiger, so less focus was put on this aspect.

FINAL USER INTERFACE

Desktop

Gender split

96% of all our customers shop within a single gender. Based on this insight we performed various A/B tests, and user tests. These tests showed us that the new splash page 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

Data showed users who search converted better than the baseline.
In the UK, for example, a small percentage of users that used the search functionality represented almost a quarter of the revenue. Based on this fact we ensured high visibility of the search in the menu.

Larger images

A survey shows us that over a third of underwear buyers and a quarter of apparel buyers are motivated to buy because of bigger and better product imagery. Larger imagery, and less text helps users to view products and scan our offering more easily. The focus remains on primary information which is essential to the decision-making process.

Filter

For filters the greater their visibility the higher their usage. A/B tests showed us higher engagement and exposing the filters also increased clicks. Filters were also made sticky for increased usability.

Product Image

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

Thumbnails

We noticed an increase in 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 behavior, we highlighted the product category which leads Category PLP, and a brand category that leads to a branded PLP.

The brand category also educates our customers 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 was 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 the 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 the content team and developers as early on as possible to help refine and set expectations.