Philips online shop responsive design
Background
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 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.
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
Comments are closed.