Feedback elements
for idealo’s design system
Working in silos, each team had custom designed and built feedback elements for their area. A common pattern was not defined meaning feedback elements varied greatly in design and functionality across the user journey.
My aim was to unify all feedback elements, define behaviour and most importantly find a solution that fits all use-cases.
I started by defining what a feedback element is. This included academic research and a competitor analysis. I also asked all UX designers to collect the status quo - all feedback elements from their product area. For this project I decided to concentrate on inline banners, system banners, toasts, modals, in-context-popups and tooltips for web. For the apps we reduced this to inline banners and toasts (floating messages).
Infographic
To help decide when to use which element, I designed an infographic that defines the behaviour of each element.
Four Options
For the design I came up with three styles: pastel, full colour and white with a splash of colour (2 variants). These were first tested on various page types and use-cases which pre-eliminated the pastell.
User Testing
Finally, I tested all feedback elements in a user test where the white designs with a subtle splash of colour came out as the clear winner. These had more positive associations, and were perceived as subtle but had good visibility. The full-coloured designs were difficult to read and perceived as aggressive. Doing the tests meant the design team backed my design decision and adoption has been phenomenal, with every product area, including the apps, which use their own design system, replacing the old designs.
