To be able to support diverse businesses in size and type, it was important for the company to offer flexibility to their customers.
Each online shop has his own style, business requirements, target group/s, as well as its own technical characteristics (different container widths, just to mention one).
After analysing a range of online shops as well as existing Product Finders developed by Excentos and similar companies, we identified four main possible user's needs to base our Theme planning on: advising, informing and educating, inspiring, interface experience.
According to this we planned the development of 3 + themes.
As a first theme, the goal was creating a greatly flexible UI, integrable in diverse websites, involving little or large amounts of content.
Working with a parallel prototyping approach, I have started by wireframing a few instances.
For this theme I designed using content for a hypothetical Bike Finder.
I used Adobe XD for wireframing and prototyping.
My role in this project included user-testing (after a first version was launched) and analysis through video recording of users using the product finder, iteration of the design through prototype in Adobe XD as well as directly editing the CSS code (SCSS).
This theme wants to target the female western fashion industry and its shoppers.
Involving more image content and less text, it aims to inspire and advising at the same time.
The process started with wireframing different possibilities to display the elements considering the limitations of the backend and the user's needs, with a mobile-first approach.
To design it, we chose to use a Coat Finder's content.
To service more complex Product Finders with large amounts of content, I designed Sky.
This theme also adds to the shopper experience a Comparison table.
As an example we decided to use a Printer Advisor.