How to show product data to retail end-consumers?
Photoshop, Illustrator, Google analytics
Alkemics is a collaborative platform exchange between CPGs and retailers. Starting with e-commerce French market, we were looking for a competitive and efficient proof of concept to provide smart and up-to-date data.
As predicted by Gartner in 2016, we can expect a rise from 42% to 77% of companies embarking on a digital transformation project in the next 5 years. The CPGs market won’t be an exception. With more than 40,000 products (SKUs) with thousands of attributes in a typical supermarket, the big data is not a big word anymore. Moreover, all of these promotions, seasonal operations, local assortments, etc. should provide the same information on all supports even on the Internet, due to regulations and consumers’ expectations (allergies, health diseases, diet…).
Without clear and up-to-date product information, final customers could be hurt (because of allergies for instance) and retailers could be condemned to expensive fines (more than 25k€ per inconsistency).
How might we provide to final customers homogeneous and correct data on a real-time basis, and avoid to our retailer clients to lose money?
Early customer validation
Actually, the request came from Auchan, our first partner at this time. They wanted a solution to avoid paying huge fines, due to an inconsistent or non-existent data on their website. The idea to display in real-time our product data on their website was a technical answer to this issue.
The first step was to dig this problem and my goal to bring a real business value.
So, I started to talk with the different stakeholders:
- The Product Manager for Brand solutions, and ex-Marketing manager for a cosmetic brand, helped me to understand the goals and expectations of our brand clients, but also to understand what the end-consumer was expecting.
- The Sales team shared with me some customers frustrations on our platform.
The key-findings was huge:
- Retailers need to reduce the number of product with inconsistent data, and avoid to pay fines.
- Brands want to display all their marketing campaigns and rich contents to give a convincing and homogeneous message on all supports including ecommerce website where their product are sold.
- End-consumer wants to be informed and understand what he buys.
- Alkemics needs to satisfy both clients and create more product value around the data exchange.
After all, the end-consumer are the final beneficiaries of the future solution.
After retrieving all these insights, I built a team with the Product Manager and a full-stack developer to summarize the requirements and design this new solution.
Regarding the time I had and the low priority of this task, I decided to sit closed to the developer to be more efficient on my choices during my sketching sessions.
- is often below the fold
- is not attractive to read
- is scattered, with empty sections which take a lot of space
Afterward, I had to map the data from our platform to the future hosted product page, keeping in mind all the requirements to match with the brands expectations.
I took the regulated data and displayed them in the header. Then, I prioritize the important information the end-consumer would like to see first, without forgetting to solve the previous problems: have the contents above the fold and make it more readable.
Regarding the hundreds of data and the importance of rich content such as videos – which were also part of our premium offer – I imagined some thema like nutritional data, history, advice, etc. and searched a way to display it visually. After few tests, I found a solution: tabs.
Then, I quickly prototyped it on paper, and show how simple interactions should be, adding some annotations on it. I took care of the wordings and work with the Product Manager to find one title for each section.
After the team validation, I started working on visual design and seeing how colors of Auchan could be used. The iconography was an easy way to catch the attention of end-consumers and make them want to slide the different sections.
I knew we could not access any data from the Auchan website, so I hoped to do a nice look and feel hosted product page from the first shot, and improve it with some of our own analytics after few weeks.
Our main KPIs was the number of clicks on all sections. Without any comparable at the beginning, we arbitrarily consider that 2 interactions with the content could be a nice figure.
iframe is mandatory!
Due to technical constraints (old infrastructure, long time to release…) on our partners e-commerce websites we decided to use an iframe. This option allows us to independently develop, track and improve the value for the end user. However it comes with some constraints:
- No access to other elements of the page (price, promotion, basket…)
- Independent CSS (colors, guidelines)
- Worse performance at load time
In addition, we needed to correctly fit in the available space allowed by our partners. And this space is different for each of them.
Launch & Learn
This project was a huge success. I’m proud to see the impact on our customers and our business. Auchan told us (without any figures sadly) that the number of fines decreased and they were happy to have these new product pages.
Brands was delighted to directly see the content they add on our platform.
For Alkemics, it became the “loss leader”. Business team shows how fast it was during demo, and it allows them encouraging brands to enter more data, notably for the marketing fields.
Last but not least, specialized magazines talked about my work like LSA or Lineaires, and we received by the way of AuchanDrive an award from Qualiscope for the most complete product page and an “upgraded” navigation.
Icing on the cake, after almost two years and more than 2M of unique visitors, a lot of French e-retailers took the tab idea and display their own information like we did.
Improving the experience of our customers on our website with the product sheet, Alkemics answered to two main problems: how to be compliant with the regulation with complete and up-to-date information, and, how to make this data attractive for our customers. Working with e-drive website ergonomics and navigation issues, the team allows us to be more productive and serene, thanks to the real-time updating which is smooth and automated.Nicolas Labe
Go deeper and work directly with the different stakeholders was the key. Also, I was afraid to not enough specify my sketches and do no wireframes was like a “blessing in disguise” for me.
But when I sketched this user experience, I didn’t test it, even with a paper prototype whereas finding some end-consumers… Well, it was not the hardest thing to do. Moreover, I only focused on the iframe desktop and I didn’t think about the app or other devices which could be used by Auchan. Finally, I let my creativity manage the visual design without thinking to the future variations for each retailers, notably for the icons which need to be custom.
Next time, I will obviously do some tests (one is better than nothing ;-)) and be more careful with the possible uses plus anticipate the possible evolution.