Kensington

Global eCommerce

The Client

Kensington is a global computer accessories brand with an annual turnover of $1m.

"Every product we innovate is engineered with the user in mind”

The Challenge

Kensington had a legacy website that lacked brand consistency and didn't sell directly to their end-users. Instead, customers were being pushed to third party applications to purchase Kensington products, leading to a disjointed and confusing user experience.

The Goal

To design a fully-branded, global eCommerce site which would enable Kensington to own the entire customer journey - all driven by a custom content management system (CMS), with region-specific content.


My Role

As UX Lead for the project I was responsible for the design of the eCommerce platform and CMS. I also took the lead on UI design, working within brand guidelines.

Skills used

  • Card sorting
  • Competitor analysis
  • Content audit
  • Wireframes
  • Documentation
  • UI design

My process

Research

After an extensive requirement gathering session, I started by looking at analytics to discover how Kensington’s existing site was being used. I discovered that many users were not reaching key categories via the product navigation.

We needed to revisit the product navigation structure, as it had been designed for the business to use internally, rather than for customers. The new structure needed to work for customers - easy to scan, easy to understand.

open card sorting session

Product navigation card sort

I held a session with two of my colleagues to revisit the product navigation, in order to achieve a flat structure with meaningful taxonomies. We discussed the overall schema and got hands-on with an open card sort, determining how products could be better grouped and prioritised.

This was a great starting point for the project. I fed back to Kensington's Senior eCommerce Team, which got them thinking about usability early on in the process.

Component Design

Kensington has multilingual, country-specific content and merchandising - all of which needed to be added to the platform and edited regionally.

I worked with the Global eCommerce Leader at Kensington to define and design all the page templates and components for the new platform. These would be used by regional administrators, to build out the global site content and merchandising via the CMS.

homepage components

Planning of homepage component options

The process was complex, as each component had layout and functionality variants, plus other design considerations…

Component types

  • Banners
  • Carousels
  • Images
  • Videos
  • HTML5 content
  • Product rows
  • Text and content blocks
  • Lists
  • Blog posts

Design Considerations

  • Height
  • Column variants
  • Rows of components
  • Width and page variants
  • Country site options
  • Language options
  • Character limits
  • Link options and button copy
  • Translations

I sketched ideas quickly into wireframes for each component and built layered templates, as a guide for Kensington’s in-house Visual Designer.

banner layout options

Three banner options for 450px high full-width banner

The templates helped communicate where text or carousel controls might obscure a background image and where the focal point of the image should be positioned.

final full-width banner

Final banner artwork with copy

Content audit

Content prioritisation across product pages was a vital exercise, as the existing pages featured an overwhelming amount of information for customers.

product page content priorities

Defining product page content and prioritisation

I carried out a content audit to identify all potential product page elements and grouped these by priority, based on what users need to understand or do in order to make a purchasing decision. From here I set about prioritising the content within each group, which influenced the final product page layouts.

We then conducted an A/B test on the product page layouts - serving one of two variants to new users over the course of a week, in order to determine which prompted more users to add products to their cart.

product page layout and priorities

Product page priorities applied to final design

Responsive Checkout Design

The most challenging part of this project was the responsive cart and checkout. Competitor analysis gave me insights into how best to structure the overall checkout workflow, which I documented for discussion with the project team.

responsive checkout research documentation

Responsive checkout research documentation

We reached agreement on a broad approach to the cart and I started to wireframe each stage of the checkout in detail - looking at customer and guest user flows and the specific regional requirements.

checkout process wireframes

Cart and checkout wireframes (guest US customer)

Business requirements and the global nature of the site meant that there were many other design considerations beyond a standard checkout process, including…

  • Voucher code functionality and CMS
  • US tax calculator
  • Pre-order items
  • Region-specific shipping options
  • Region-specific payment options
  • PayPal and Amazon payment integration
  • Account customer address book
  • Lazy registration process
  • Payment processor integration
  • User orders showing in their account
  • Email workflow
  • Regional email and invoice templates
checkout process

Cross-device testing of cart and checkout

UI design

The project team was keen to design a flat UI, which mirrored Kensington's brand guidelines. Using the corporate colours and font, I built key pages for UI sign off by the project team - sharing competitor analysis and eCommerce benchmark reports to validate design decisions.

section page UI

Section page deliverable

Kensington is a quality brand and its site needed to reflect this. As well as a clean UI and quality artwork, the addition of subtle button transitions and interactions helped elevate the user experience.

header interactions

Header interactions

Carousel control arrows were a detail that needed thought. The arrows are added dynamically when a carousel is created, so they could potentially appear over any colour or hue, yet they needed to contrast well.

I used arrow icons that were both black and white, which tested successfully against all backgrounds and kept to the flat aesthetic.

carousel arrows

Carousel arrows designed to contrast over all background colours

Similarly, I found the megamenu at the top of the site often clashed visually with the content below it. To achieve successful contrast, I added a dark overlay to the background content.

Whilst working through this with the development team it was suggested that we could blur the background too. This really focused the user on the menu.

megamenu blur overlay

Megamenu with background blur overlay


Launch

Post-launch I discovered some interesting trends. Country-specific content management has led to an increase in the number of promotions run by Kensington's global team - and subsequently an increase in engagement from customers outside the UK and US.

country banners

New CMS enables country-specific merchandising to drive engagement

The product page Q&A feature was used far more than expected and instantly gave valuable insights - often highlighting where content should be added or made more accessible.

Kensington's "knowledge team" now answer customer questions and also use this feedback to enhance user experience.

customer questions

Customer questions flag where content needs to be addressed

Ultimately, the new platform has changed the way Kensington do business online - selling more directly and effectively to a global audience.

Independence from third party integrations means that Kensington is fully in control of the end-to-end customer experience.

This gives flexibility to develop inline with eCommerce best practice and has led to a huge increase in customer intelligence for the business.

launched project

Want to see more?

Learn how I helped a law firm share information more effectively