Kensington is a global computer accessories brand with an annual turnover of $1m.
"Every product we innovate is engineered with the user in mind”
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.
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.
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.
- Card sorting
- Competitor analysis
- Content audit
- UI design
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.
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.
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.
Planning of homepage component options
The process was complex, as each component had layout and functionality variants, plus other design considerations…
- HTML5 content
- Product rows
- Text and content blocks
- Blog posts
- Column variants
- Rows of components
- Width and page variants
- Country site options
- Language options
- Character limits
- Link options and button copy
I sketched ideas quickly into wireframes for each component and built layered templates, as a guide for Kensington’s in-house Visual Designer.
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 banner artwork with copy
Content prioritisation across product pages was a vital exercise, as the existing pages featured an overwhelming amount of information for customers.
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 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
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.
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
Cross-device testing of cart and checkout
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 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.
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 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 with background blur overlay
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.
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 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.