Aktualizacja: lut 10
My role: Team leader, IA Designer
What have I learned:
Working with a B2B client
Work in a project team
Cooperation with various departments of the company
Meeting business goals
Applying Nielsen's heuristics
Building information architecture
Create a design system
About: Omni-Biotic is a brand of probiotics known well on the German and Austrian market. In the beginning of 2020 Omni-Biotic probiotics were launched in Poland by CMSL company, where I’d worked. Our role as distributors was increase in sales by 100 packages of probiotics per month.
I joined the project at the stage of website improvement. The probiotics were currently sold in one stationary store owned by the company and on the website mentioned above.
The team I lead took care of adapting the online store to the needs of an individual customer.
I started with data analysis. I checked abandoned carts, time spent shopping, browsed tabs, site navigation and bestsellers. Based on this, we knew how customers move around the website or what they are looking for. We also found pain points and useless tabs.
Then, together with the team, we made a protopersona for each of the products. At this stage, it seemed to us that each of the probiotics was aimed at a different customer. We wrote down all the characteristics of potential customers, their problems and goals. It turned out that we managed to find recurring problems and goals in most products (the exception was, for example, Probiotic aimed at pregnant women). On this basis, we created one protopersona for which we designed the website.
Then we created customer journey path which made it easier for us to spot improvement points. We also used the data that I collected earlier.
The information architecture on the product page turned out to be the most urgent matter to improve. It was illegible and too long. The most important information were mixed with the more detailed. The impression of chaos was caused by inconsistent styles.
Before designing, I also did desk research. I liked many solutions used by competing companies, but I had to choose those that did not exceed our budget. Thanks to this stage, we have introduced more payment options in the store.
Based on these activities, I created the information architecture.
The most important information (including allergens) are placed next to the preview photo, at the top of the page. For the description, I used the goals and problems collected during the creation of the individual protopersonas.
I added tags under the price for easier searching. They also were collected at the stage of creating the protopersonas.
I divided the information into 6 categories: "nutritional values", "ingredients", "probiotic strains", "research", "effects", "recommended consumption". It is a specialist product, so it was important for us to separate the ingredients from the nutritional values and probiotic strains. Each of the cards expands by clicking on "+".
Below, I have included information about related products that support the action of the selected probiotic.
The project is also scaled to the mobile version.