Designing with heart and SOUL: 25 years of user experience at ESTECO

Fresh out of university in 2013, I joined ESTECO as a front-end developer, thrilled by the opportunity to design and build products that could make people's lives easier.

From the moment I walked through ESTECO's doors, I knew I had joined a group of talented individuals, eager to learn and dedicated to placing users and customers at the heart of their work. I immediately recognized the ingenuity and innovative spirit of ESTECO, qualities that were reflected in our products and their respective user interfaces.

From the ground up: early days of product design

As our president recently wrote, modeFRONTIER, our first product launched in 1999, was the first of its kind to offer engineers powerful and accurate numerical technology combined with a vendor-neutral graphical simulation workflows. The "spaghetti chart" (aka parallel coordinates chart) in that first release went on to become the industry standard for representing multi-attribute design solutions.

The first version of modeFRONTIER was followed by a series of innovative solutions that combined cutting-edge technology with user interfaces designed to simplify complex problems, algorithms and tools. These solutions included smoother interactions in the graphical workflow, new wizards to guide users through intricate tasks, and sophisticated charts and dashboards for analyzing results and deriving insights from simulations and optimizations. With each major release, the user interface of modeFRONTIER evolved to incorporate visual trends and patterns that were familiar to users.

The early 00s coincided with the rise of web 2.0, where the web shifted from static to dynamic information, from data-driven to interaction-driven websites and apps, from individual contribution to collaboration and knowledge sharing. This is when we started developing SOMO, our first web product. It extended modeFRONTIER capabilities by allowing our users to collaborate on simulations, optimizations and data analysis in a web browser. SOMO was released in 2013. At that time, user interfaces were considerably less polished compared to today’s standards.

In 2015 we released our first SaaS (Software as a service) product, BeePMN (now Cardanit), a real-time collaboration tool based on the BPMN standard for modeling business processes. In 2016 SOMO became VOLTA. It launched with a completely redesigned user interface and lots of new features. In 2018 we completely redesigned modeFRONTIER, introducing a new ribbon user experience, familiar to users of the Microsoft Office suite.

Design at scale

The years between 2013 and 2018 marked a period of big launches and extensive redesigns. During this time, our approach to user interface design and product development started to change. We wanted to create products with a pleasing, consistent and easy-to-use user interface. We recognized that users' needs, company objectives and the world around us require us to evolve the design of products over time. We knew full well that even if we somehow managed to build a good and consistent design for every new product or redesign, any future update (and there will always be updates) would require a huge effort to maintain the initial level of consistency and quality.

Without a common set of principles and components we could end up with duplicated work and a fragmented user experience. While duplicated work has an impact on the efficiency and the costs of our company, a fragmented user experience has an impact on our users. In inconsistent user interfaces, users find themselves doing the same tasks in different ways. Just to get an idea, imagine different kinds of buttons to perform the same action across the product, different labels to describe the same thing, and different icons and colors to represent the same meaning. Inconsistency makes an interface unfamiliar and increases uncertainty, errors, frustration, and leads to bad experiences. These usability and visual issues weaken our brand and the trust that users have in our products and our company.

Now, imagine you’re building not just one product, but multiple products. Designing multiple products amplifies usability and visual challenges. Each new product introduces more complexity and more opportunities for inconsistency. To handle these issues effectively and maintain a cohesive user experience across all products, designers turn to design systems.

Design systems are libraries of visual parts, user interface components and content guidelines that are used by designers and engineers to design and build consistent and quality user experiences at scale, efficiently.

SOUL: Our design system

SOUL is our design system. We started building it 10 years ago while working on the first version of VOLTA. We created an initial set of user interface components that was reusable, reliable, easy to change and that we could improve over time. We were creating a design system, even if, in 2014, the term wasn’t being used yet.

After releasing VOLTA in 2016, we started thinking about the future of the design of our products. We asked ourselves “what if we could create a unified experience for our products?” and “what if we could use SOUL across our product line?”. It was at this time that I left the VOLTA development team and set up the UX team together with a small group of design-minded colleagues. Our goal was to design the user interfaces of all ESTECO products to meet user needs, ensure consistency, provide an easy and pleasant experience and embody the voice and tone of the ESTECO brand.

After a decade of dedicated work, collaboration, company support, and the passion of many individuals, we now use SOUL to design and build the user interfaces of all web-based ESTECO products. These include VOLTA, Cardanit, modeFRONTIER license manager, product user guides, mobile apps and websites.

SOUL for everyone

At the 2024 ESTECO International Users’ Meeting, we announced that SOUL is now available to everyone. Making our design system publicly available helps push us toward higher quality experiences, enables us to be transparent and attracts talent who share our commitment to quality. ESTECO users can leverage SOUL and ESTECO APIs to create web apps, mobile apps, and web-based desktop apps that integrate with our products. This allows them to extend their capabilities by offering a seamless and personal user experience across ESTECO products and their apps.

Here are the key features of SOUL:

• Visual foundations: The basic elements that ensure visual and functional consistency across all digital products like colors, typography, iconography and space.
• User Interface components: The building blocks you can use and combine to create web-based applications.
• Extensive documentation: A documentation website that guides designers and developers who use SOUL assets and components.
• Playground: A web editor that allows you to quickly prototype with SOUL.
• Regular updates: Improvements and updates to keep the design system aligned with the latest design trends and technological advancements.

What’s next

A lot of things have changed over the past 25 years. We’re now serving a much broader audience. Visual trends and technology are constantly evolving, and the level of quality that users expect from digital experiences is higher than ever. Design systems have grown from a niche emergent practice in product design to a consolidated one.

Like any design system, SOUL is ever-changing. In keeping with the times, we’re now making our components available as web components, a technology standard that enables developers to use SOUL together with their preferred technology stack.

In the coming years we aim to make SOUL more expressive and accessible. Our focus will be on better support for multiple brands, introducing new color themes (for example, dark themes), and accommodating various ways of interacting with user interfaces. We plan to broaden SOUL’s use beyond web and mobile to all user interfaces.

We look forward to seeing what you’ll create with SOUL and how SOUL will shape the future design of ESTECO products.