ROHA Logo
Software delivery platform

Setting the strategy to implement a design system

Enabling and aligning the organisation with the common goals of implementing a design system

Year 2021
Role Director of Design
Sector Software Development

About the company

The market leader of value stream management solutions for enterprise IT, improves the speed and quality of software creation by capturing, visualizing and analyzing critical indicators of every aspect of the delivery process.

Problem

Because of the way it was built, our platform had some critical UI and usability issues. For five years, different teams worked on their projects isolated from the others. Multiple technology frameworks were introduced without a clear long-term strategy, and the design team wasn’t a mature and strong function in the business.

This caused a poor user experience, high-cost maintenance of the front end and a slow innovation and development process, which affected the overall business value of the platform.

plutora ways of filtering
In this image, there are 15 filter bars for different entities and tables. We were making our users crazy.
plutora old UI examples
We weren’t consistent in the way we solved problems or defined interaction patterns. These five screens show different hierarchies, font sizes, font weights, colours and layouts.

Research

When you have a problem this big, you need to back up your idea with all the possible data and insights. We spent a good amount of time building a case for the design system and the benefits of each function in the business.

Users

We interviewed our current customers and analysed their behaviour and complaints.

Woman blond

Internal stakeholders

We conducted workshops with solution consultants and the sales and support teams to get their feedback.

Woman tuxedo

Bugs

We reviewed and prioritised bugs related to inconsistencies, usability, interaction patterns and the user interface.

Bug

Engineering team

We collaborated closely with the engineering team in planning the maturity strategy to increase our front-end skills and leadership.

Worker

Product managers

We organised workshops with all the product managers to understand our issues and problems. We also planned how to implement the design system and how to handle the challenges of the transition.

Worker Helmet

Usability

We executed usability tests in the key flows of the platform. They provided us with a better view of the most important issues and pain points of our users.

Hands Love
Usability scorecard
Scorecard example of the usability test for the current version of the platform

Findings

After months of research and convincing people of the value of our design system, it was the moment of truth.

Old technologies

80% of the platform was built on Ext JS, a 2007 JS component-based framework. It was a splendid option at that time. However, it wasn’t easy to find people who knew about it, and it was difficult and complex to maintain in 2021.

broken house

No documentation

We didn’t have complete and updated centralised documentation for our design UI elements, interaction patterns, core values and branding. Without these definitions, it was impossible to keep everything together.

Monkey no see

Disconnected teams

Three platform teams were working in a disconnected way. The lack of communication created chaos in terms of following one common language. Each team came up with separate solutions for their problems and even used multiple technologies or frameworks.

Broken Heart

No ownership

No one was responsible for the design system documentation and maintenance of updates – both within the design and engineering teams.

No

No process in place

No documentation, disconnected teams and no ownership equalled no process to have and maintain one centralised design system.

No

Frustration

The developers were frustrated with the old technologies and spent too much time fixing the old code. It was also hard to hire a developer to work within the old technology frameworks. The designers didn’t have a voice in the business and a mature process. The sales and customer success teams were also dissatisfied with the number of complaints about the platform and problems in sales demos. The users were frustrated with the inefficiency and usability problems of the platform.

Crying face

Low efficiency

Every new feature was a pain to design and develop due to the lack of design patterns and clear components.

Low Battery

No accessibility

Our UI didn’t meet the minimum usability requirements.

No Phones

Strategy

Implementing a design system is not an easy task. The business must be aligned, and the product, engineering and design teams have to work together to make it happen.

Build up support

We created a set of presentations with the key stakeholders to explain the need for a mature design system in the business. Mostly, we focused on the high-level business value to the leadership team.

Find the right tools

Teaming up with product and engineering, we evaluated the best flow and tools to implement our design system. We defined the responsibilities in each team and started drawing our process guidelines.

Design sytems tools and flow
Tools and workflow selected by the team

Set the process

We set the process to evolve our front-end by increasing the integration of the design team with each product team, expanding our communication channels and assigning ownership to specific members in each team.

Atomic design methodology
We used an atomic design methodology for a structured design system hierarchy

Documentation

We began with the documentation of each component, design pattern and token. Furthermore, the front-end team implemented the repository and documentation on Storybook.

Transition

All the new will use our new design language. To increase consistency and reduce usability issues, we re-skinned our old UI and reduced the time to value. Gradually, we will decouple our legacy frameworks to implement modern modular frameworks and integrate them with our new design system.

Design system

Once the business was aligned, we showed them how the new design system would look like. We mapped the requirements, all the views on the platform, the interaction patterns and the components.

Putting together a comprehensive list of the required work was part of the challenge of simplifying this large platform.

design system buttons
Sample of the small components, buttons, labels and multi-selects
design system calendar
Calendar component in two configurations

After building all the basic components and defining the new style, we isolated specific interactions – for example, filtering to implement a test in every use case to understand how one standarised solution can meet every case requirement.

Exploration of filtering, multiple input element types and the states of the filtering

Similar to the more complex interactions, for example, the CRUD function on the entities view.

In this step, we found complex problems to solve. The amount of data we manage can be overwhelming.

Working as a team, we’re able to resolve the challenges with smart solutions.

Entity sidebar exploration: the majority of the CRUD actions happen in this component with edit functions, such as numbers, date ranges, users and dependencies

The feedback was amazing. Everyone saw the value of having a modern and more consistent platform. Feedback like ‘easier to use, ‘more organised’ and ‘doesn't look like I'm in a different tool every two pages’ told us we were on the right track.

Concept of the new design system implemented with almost all components in action: reports, tables, entities and filters

The project has been validated! Now it's time to put the rest of the plan into action. For the product team, it’s full steam ahead to create all the environments for our new front-end and to implement the new processes, technologies and cultural changes needed for success.

Conclusion

A design system is a vital part of modern software development. A good design system must be integrated into the business. Fancy documentation is not enough.

The design system should be treated as a product within a product, and every member of the product team should be responsible for it.

The bigger the organisation, the more important a strong design system is to create a good user experience, deliver software faster and increase the value of the business.

It’s not an easy task. Nevertheless, the benefits for the business and product team are massive.

Next Steps

It's a long journey to fully implement a design system. The strategy is in place is just a thing to keep moving and evaluate at every milestone how are we going.

More Case Studies

Increasing software delivery intelligence Transforming the Merchant Portal with a User-First Approach
lala
Let's work together! Send me an e-mail, connect on LinkedIn, or book time on my calendar.