How Five Products Came Together In 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!...

Published July 1, 2021

4 minute read

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.

image1- case study

 

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 2- case study

 

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. 

 

image 3- case study

 

 

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 4- case study  

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 5- case study
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 6- case study

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 7- case study Visually brighter, and simple tweaks in interactions allow for a better UX.

image 8- case study
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.


Author Arnfinn Hushovd

Arnfinn is our Head of User Experience at EcoOnline. His role is to make our products friction-free and intuitive so our customers can do their essential work as fast and efficiently as possible.

Our related posts

| Health & Safety
4 Chemical/EHS legislation updates you need to know about

2023 is already shaping up to be a busy year for chemical and EHS legislation in Europe. Several initiatives stemming...

| Health & Safety
COP27 – Three Key Takeaways for Business

Commentators have offered mixed reactions now that the dust has settled on COP27. Where the Loss and Damage (L&D)...

| Health & Safety
How to Write an Incident Report

“If you can’t measure it, you can’t improve it.” (Peter Drucker). That’s the adage that lies behind the policy of...