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!...

Written by Arnfinn Hushovd

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 studyEverything 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 studyDeveloping 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 studyMobile 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 studyOne 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, color, 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

| occupational safety
Action Management: A Case Study of Paper VS. Online

What is the best way to manage safety actions and make sure they are actually completed? We aim to find out with this...

| occupational safety
5 Reasons why audits fail, and what to do about it

Failure to properly manage audit actions can have disastrous consequences. In this blog, safety expert Bridget Leathley...

| occupational safety
Computer Ergonomics – Beyond the Furniture

Today’s DSE users have more autonomy, but more complex tasks, often with unfamiliar, inadequate or badly selected...