Fleurop

Challenge

  • Redesign of Fleurop homepage, PDP and checkout procedure to improve conversion

Process

  • Background research
  • Hotjar heatmapping
  • Analyse usertest / usability reports
  • Wireframing
  • Setup Design system
  • Prototype

Role

  • UX design
  • UI design

Hotjar heatmapping

“The use of heatmapping made it easy to see the engagement of users, remove excessive design elements and decide on placement for CTA’s”

Wireframing

To determine the quickest and most user friendly way of checking out, several wireframes were created and tested before diving into the design. Prototyping in Figma helped to quickly setup a clickable wireframes and helped to determine the right user flows. 

Session recordings, heatmaps and A/B test results lead to key changes in the design. The decision to remove buy buttons, add a more intuitive CTA in the header section and focus on options on the detail pages lead to a better conversion rate.

Design system

To have a consistent design language I’ve set up a design system from which following designs could easily be derived of. We used an atomic design setup so that there is a structured way to navigate between design elements and the whole user interface. Desired changes can then be easily adjusted to the different building blocks to manipulate pages and prototypes.  

Prototypes

Several prototypes were build so that the development team could initiate A/B testing whereupon desicions for implementation could be based.  

back to overview
next