Design of Philips online shop

The project was to design Philips online shop to be rolled out across the UK and Europe. The objective was to design a user centred design that was easy to use so customers could search and complete transactions in as few clicks as smoothly as possible.

The Problem

The site was to be built around the Hybris e-commerce platform which was extremely limited in its ability to be customised from a development point of view. Designs needed to be validated with the Philips product team and Hybris consultants based in Amsterdam to make sure they could be implemented.

The Challenge

The main challenge was building a visually appealing responsive site for multi-lingual content around the limited e-commerce platform Hybris. This meant the responsive design had to look good in multiple screen sizes and accommodate multiple languages. This meant a lot of trial and error and testing had to be performed. Applying Philips brand guidelines & working with the Philips product team in Holland & London, I was responsible for designing & implementing a consistent UI experience across multiple screen sizes. The user centred design focused on making aesthetics of the products standout with a clean UI layout & photography and with clear CTA actions to maximise ROI.

The Solution

A/B testing showed that by using a bright orange button, (a colour which was in high contrast to the main Philips blue branding and logo) customers were on the whole 20% more likely to click through and make a purchase. The bright button colour attracted attention and stood out enough on the page to maximise click through and ROI. Making sure multi-lingual content worked globally.

The work on this project led to an atomic design style guide project that Philips would implement across their portfolio of global sites.

View Philips online shop

The Design Process

Discovery phase

• Gathering requirements and research
• Defining the: Brand/ User/ Goals
• UX Workshops in ideation, personas, user journeys, user flows

Sketching and wireframing

Prototype > test > iterate > refine

Design high fidelity UI visuals, interactions and package up assets

Support build and implementation by developers

Designing the atomic components

The UI Visuals

Shopping cart page