Philips online shop responsive design
Background
Philips required a frictionless eCommerce shop to be rolled out across the UK and Europe. They wanted to create an online shopping experience to convert online window shoppers into paying customers. The shop had to be user-friendly, reflect the Philips brand, attractive, and make shoppers come back for more time and again.
The Problem
Philips wanted to provide a thoughtful user experience design to customers with a fulfilling, friction-free experience to maximise conversions and make customers come back time and again.
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
Several factors would determine the success of this project. This included user experience, brand recognition, navigation, trustworthiness, product quality, shipping costs, return policies, and customer service.
Key aspects of the design for easy navigation were:
- Well-defined product categories
- Product search
- Filtering products
- Product quick view
- Promo offers
- Great product imagery
- Supplying right amount of product info
- Employ persuasive design
UI challenges
The Philips style guide was limited and was designed around brand print material rather than UI components. There were many standardised components that needed to be designed to reflect the brand. Considerations included atomic components, colour, typography, spacing and layout, logo usage, product imagery, tone of voice etc..
The site had to be visually appealing, responsive, display multi-lingual content and was constrained by the technical limitations of the e-commerce platform Hybris. This involved a lot of A/B testing and iteration.
I led the UI from conception to execution, working in close communication with the UX team in London and stakeholders from the Philips product team based in Amsterdam. I was responsible for designing & implementing a unified, consistent UI experience. The user centred design was tested, iterated and simplified to remove distractions.
Product search
We built a search function to help customers easily find what they are looking for:
The search box was present in the top right of the navigation on every page following known design patterns. The search design was quickly recognisable, visible, and easily selectable.
A UX function was built to support all kinds of queries, such as product names, categories, attributes, as well as customer service related information. A sample search query and auto-complete in the input field aided usability.
Sorting and filtering of results
Designing the atomic components
The UI reflected Philips strong brand identity throughout the site. The colours and typography reflected the brand and strong product imagery on clean white backgrounds made the products stand-out. The clean UI layout with high contrast call to action buttons helped maximise conversions.
Maximising conversions
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 UI Visuals
Shopping cart page
Comments are closed.