Recently, EcoOnline, where I currently work as head of UX, revealed its new, redesigned user experience that brought together five robust products. This has been an exciting project my team and I worked on — and this is only the beginning! Read on to learn how we’ve built a new design system and have been using it to make our products more impactful, accessible, and easier-to-use, as well as get them to “communicate” with each other.
Let me start by giving a quick introduction to EcoOnline and its product portfolio.
Through multiple mergers and acquisitions, EcoOnline (HQ in Oslo, Norway.) scaled to become a big international provider of workplace safety management tools. Our customers, from small and midsize businesses to brands such as NHS, Johnson & Johnson, and the National Gallery of Norway, use our intuitive solutions to track, control and minimize incidents, and manage chemical safety at work.
Challenges of Integrating More Products
EcoOnline has been growing rapidly and acquired six companies in just three years, to provide the best EHSQ (Environment, Health, Safety, and Quality) offering in the market.
The merger and acquisition growth strategy comes with a few known challenges. With every new addition, the offering was getting more and more robust — it was, however, growing as a portfolio rather than as an integrated product experience. Each of the products continued existing in its own universe, without a possibility for users to enjoy all the new functionality as part of one seamless system.
Everything was different. We had to learn what worked and what did not before we could propose a new solution. We did that by looking at all data, user interviews, and UX audits.
To add some more complexity, all products were built on different code bases and used different frontend frameworks.
To address these challenges from a user experience and design standpoint, we started by identifying the three main areas to focus on:
- No unified UX. User patterns were naturally different across the different companies’ products, and we had to iron that out by developing a coherent user journey.
- Different visual language. While several products had similar or complementary functionality, buttons and labels essentially doing the same job looked very different from product to product. We saw a clear need to develop unified design guidelines.
- Different code. As I’ve already mentioned, the code base products were built on was different. We had to find a way to deliver a consistent experience and integrate products without the need of rebuilding them from the ground up.
When I started at EcoOnline last year, we established the first dedicated design team as a horizontal discipline within the company. Today, I am leading a team of 6 amazing professionals who take the lead on product design and customer experience. Our first priority was clear from the start — to create a unified user experience across our products. In order to achieve that, we needed to develop a new design system.
Based on a combination of IBM Carbon and Shopify Polaris, our system is not exactly unique, and that’s deliberate. It wouldn’t have been possible to move as fast as we’re doing now if it had not been for Figma. An excellent collaboration too! Right now, most components are in Figma as we transition to having all components in Storybook and our reference site.
Chemical Managers got the biggest changes. User testing revealed fast to task and an overall improvement.
Main outcomes — and continuous learning ahead!
With this update, our offerings have become one. Since we released the new unified experience, our customer success and support teams reported a massive decrease in help requests and questions — we’re extremely happy to see these first positive signs!
Now, we’re going through the next learning phase to improve based on the valuable feedback we have received so far.
Here are a few planned initiatives and steps ahead of us:
- Consolidate all design components by migrating them from Figma to Storybook
- Conduct an in-depth UX text audit in order to build a consistent glossary and unify the text used across various elements in all products.
- Conduct a UI components audit — Which components are most frequently used by our customers today and how can we improve them?
The new design system will allow the UX and other teams at EcoOnline to scale faster and integrate newly acquired products to the family quicker so that our customers can immediately get the value from the integrated offering. I’m extremely excited to continue working on that!
Have a closer look at EcoOnline here.