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

Mobile

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.

Exposed Subcategories

Analytics and user tests showed us that visitors spent a large amount of time viewing product listing pages and detail pages, often remaining in the same category. To improve cross-category browsing 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. A 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 lifestyle imagery.

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 content team and developers as early on as possible to help refine and set expectations.