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.
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.
Internal stakeholders
We conducted workshops with solution consultants and the sales and support teams to get their feedback.
Bugs
We reviewed and prioritised bugs related to inconsistencies, usability, interaction patterns and the user interface.
Engineering team
We collaborated closely with the engineering team in planning the maturity strategy to increase our front-end skills and leadership.
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.
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.
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.
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.
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.
No ownership
No one was responsible for the design system documentation and maintenance of updates – both within the design and engineering teams.
No process in place
No documentation, disconnected teams and no ownership equalled no process to have and maintain one centralised design system.
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.
Low efficiency
Every new feature was a pain to design and develop due to the lack of design patterns and clear components.
No accessibility
Our UI didn’t meet the minimum usability requirements.
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.
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.
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.
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.
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.
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.
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.
- Create a team focused on managing, improving and evolving our design system.
- Finish the process of migrating the rest of the platform to the new stack.
- Evaluate our new process to find ways to improve.
- Comply with accessibility standards.
More Case Studies
Increasing software delivery intelligence Transforming the Merchant Portal with a User-First Approach