Health & Safety

Five Products, One Comprehensive User Experience

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. Context 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. Developing a common design language

Back to all

Article

July 1, 2021

LinkedIn Email Copy Link Copied to clipboard WhatsApp

image1-%20case%20study.png?width=3544&name=image1-%20case%20study.png

Context

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.

image%202-%20case%20study.png?width=2000&name=image%202-%20case%20study.png

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.

Developing a common design language

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.

image%204-%20case%20study.png?width=707&name=image%204-%20case%20study.png

There was a wide variety of icons in use, with conflicting meanings and visual expressions. Based on IBM Carbon icons, we adopted, altered, and added to the family of icons to create one look
throughout.

It’s still the early days, and there’s a lot of work ahead of us to develop the design system, however, we’ve already seen the first results and the value it delivered in bringing the products
closer together. For me, it has been particularly rewarding to see that the entire organization is ready to adopt design-driven thinking, with product managers and developers immediately seeing
the value and purpose of the work we’ve been doing with the design system.

image%205-%20case%20study.png?width=735&height=396&name=image%205-%20case%20study.png
Mobile UX focuses on ease of use and speed. Fastest time to a task.

First step — Navigation

Let’s face it — managing workplace safety isn’t easy. Professionals responsible for this area are busy, so expecting that they would spend hours and hours on product training isn’t
particularly realistic.

That’s why our goal is to remove some of that complexity by providing really intuitive products which would be easy to figure out based on known interactions without the need for in-depth
product education. Rather than introducing a new learning curve, we’d like EcoOnline products to naturally merge into professionals’ daily working habits.

image%206-%20case%20study.png?width=1449&name=image%206-%20case%20study.png

One common navigation across our site allows for easier UX.

As the first step, we decided to address the navigation in the products, as well as the navigation across all of them. Through a unified experience in icons, colour, typography, text,
and interactions, we hope to give customers a consistent, familiar feel.

We took a hypothesis-driven approach, and our final proposal was a result of combining existing user patterns that worked well (as I mentioned, we wanted to preserve the existing habits) with
new ones that we thoroughly tested with our customers in 4 countries, to positive results.

image%207-%20case%20study.png?width=648&name=image%207-%20case%20study.png Visually brighter, and simple tweaks in interactions allow for a better UX.

image%208-%20case%20study.png?width=2000&name=image%208-%20case%20study.png
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.