The Markant Group An Asset Library for Consistent User Interfaces

Timeframe 2020/21

Customer benefits

Standardised brand presence
Simple management of UI elements
Time savings in the development of new products

Home / References / The Markant Group: An Asset Library for Consistent User Interfaces

As a reliable partner for vendors and retailers, the Markant Group supports its customers with comprehensive solutions for every stage of the value chain. Not only can these customers use Markant’s solutions to clearly model their accounting processes and payment systems, but they can also consolidate them, ensuring the efficient exchange of data. This gives vendors planning security and retailers the opportunity to outsource routine tasks and to use analyses to process their data. In order to provide its customers with a unified experience across all platforms and solutions, Markant created Markant One, a corporate design intended to be rolled out across all of Markant’s services. To enable the development teams to implement the changes both quickly and consistently, inovex worked with Markant to create a library of the company’s important UI components and digital assets − the Markant Elements.

The challenge: multiple portals, a great deal of administration

Markant develops a wide variety of browser-based solutions and platforms relating to payment services, market and price analysis, B2B integration, and finances and security. Until now, the interfaces for these solutions were developed separately using structures which have evolved over time, resulting in an inconsistent corporate identity and requiring considerable organisation. Transferring the newly developed corporate design to the individual applications involved significant implementation effort. Each Markant team faced the challenge of incorporating the new standards into its own solution – whose application technology differed in certain areas from others. It was, therefore, essential that the new UI design was capable of being integrated consistently into more than 15 applications.

Creating a consistent digital presence – quickly and easily

In many areas of life and work, user experience determines a product’s level of success, and Markant’s B2B services are no different. All the group’s applications must speak the same design language and be equally available on all devices (desktops, smartphones, tablets, etc.). In order to fulfil these requirements, inovex worked with Markant to create a component library of its most important digital UI assets.

The project: a unified user interfacee

The Markant Elements contain the essential UI components the group uses for its applications, including, for example, buttons, input fields, layout and structural components, icons, and more. This component library serves as a central repository for storing and managing the individual UI components of websites and apps, and it enables changes made in one part of the system to be rolled out and aligned across all the applications. In order to view and test the individual elements, inovex and Markant used Storybook to create what is known as a “component explorer”. This allows the modification and behaviour of components to be tested interactively before they are integrated into the various applications.

The Markant Elements form a clear design language which can be centrally managed and further developed via the component library. This provides the Markant teams with a single source of truth for their corporate design and enables the elements to be used efficiently in all the company’s products. Having access to its own library saves the group time when it comes to implementing its products and increases the quality of its applications.

Technology enables early implementation

For Markant, it was important that the new solution could be rapidly implemented and that the development effort remained manageable. As a basis for the Markant Elements, therefore, inovex’s component library was used.

The inovex Elements were developed for inovex-internal products and can be rapidly aligned with customers’ UI requirements. This solution eliminates upfront development time and enables the gradual expansion of the components.

Technologically, the elements are based on web components developed using Stencil. These can be used platform-independently and without a framework natively in a browser. This makes them particularly suitable for flexible deployment in a variety of technology setups, as well as in HTML- and JS-based frameworks. The component library can also be used to easily enhance or expand existing front-end applications and to implement new applications more quickly.

Next steps: a future-proof development environment

The Markant Elements were thus used to create a UI solution which both enables the centralised management of all the group’s UI components and facilitates the rapid implementation of a unified brand presence across all platforms. It also allows it to be scaled to meet future needs.

In addition to enjoying these benefits, Markant wanted to be self-sufficient in the long term. The company is, therefore, considering building up the internal expertise required to manage the Elements in the future and to create a UI solution which covers all its lines of business.