What is a Design System?
A design system is a comprehensive catalog of style guides, pattern libraries, and reusable components that are continuously updated and improved. It is crucial for creating scalable and updatable products, allowing for faster iteration, streamlining the development process, fostering a shared language, and facilitating easier testing.
Current Workflow
The design system developers were using was Umbraco with a components library, SyncFusion. The company believed the two softwares would allow for faster software development at scale. However, that did not appear to be the case as roll-outs were slow and the number of help tickets suggested that there were lots of bugs.
The Dilemma
Creating and maintaining a design system requires ongoing resources. Some companies prefer using or modifying an existing system rather than creating their own. Our company faced the decision to:
1. Create its own design system
2. Modify an existing design system
3. Modify its products to fit an existing design system
The goal was to enhance software speed and reduce bugs. The UX team argued that a custom design system was essential for achieving these business goals.
The Hypothesis
The UX team advocated for a custom design system for several reasons:
1. Quality Control: Having reusable, quality-tested components would accelerate development.
2. Design Control: Ensuring proper branding and design consistency.
3. Cost Efficiency: Long-term savings by avoiding the costs associated with modifying or going without a design system.
My Role
As a UX Researcher, I assisted the UX Team Lead/Manager. My tasks included:
1. Researching and creating a knowledge base of UX practices.
2. Developing templates, forms, and diagrams of UX practices.
3. Organizing and conducting interviews with stakeholders, including scheduling interviews, drafting questions, and creating surveys. I also analyzed data and drafted the final report.
THE APPROACH
We conducted a series of one-on-one interviews with developers, followed by a short survey. This mixed-methods approach provided both qualitative and quantitative insights.
Developer Interviews
We interviewed 12 out of 17 developers contacted. The interviewees included:
3 Front-end developers
3 Senior Front-end developers
2 C# .NET developers
2 Software architects
2 Technical leads
Most developers had worked at the company for 1-5 years. They were primarily involved in front-end development but did not feel they were making UI design decisions.
Interview Results
Developers cited positive aspects of their workflow, such as peer reviews, agile structure, support, and daily scrums.
However, they also highlighted areas for improvement, including the need for a design system to reduce errors, improve consistency, and speed up updates and deployment. The developers felt that the current workflow was not working. More design and prep work needed to be done before hand off to developers.
One developer mentioned a previous meeting that involved important stakeholders, including designers, the UX team, and customer support specialists. The developer believed that "90% of the problems with that update were avoided" by having everyone involved in the discussion. The developer wanted to have more of those meetings, where problems were identified before anything was coded. It saved time, and more importantly money, down the road. It also made design decisions clear to the developer who said that the meeting left everyone with a clear picture of the work that was being done.
Post-Interview SURVEY RESULTS
The post-interview survey revealed key insights:
1. Most developers understood what a design system was.
2. Current workflows and tools were not effective.
3. Developers desired a better system and ongoing training.
Only one developer mentioned doing a deep dive into SyncFusion and Umbraco. This developer felt confident in the current work flow. However, most developers only had a basic understanding. They were too busy answering and solving support tickets, and working on updates, to do a deep dive.
Presentation
After analyzing the data, the UX Team presented their findings. We included graphs of the quantitative data and personal quotes from the developers to argue for a custom design system.
The UX Team presentation focused on:
1. Workflow improvement: the need for proper design meetings with all stakeholders where problems can be identified before coding.
2. Design System: a custom design system, one created by the developers, would allow for better updates and software development. It would require time and resources to build but the investment would pay off. It would allow the company to scale products efficiently and allow for technological and security improvements.
FINAL OUTCOME
Despite compelling evidence from the UX team's research, the company decided to continue using existing design systems SyncFusion and Umbraco.
However, they acknowledged the need for workflow improvements and implemented processes to enhance design and architecture before development, aiming to reduce errors and rework.
LESSONS LEARNED
This project underscored the importance of:
1. Thorough research and clear communication of findings.
2. Being open to pivoting and adapting based on stakeholder feedback.
3. Ensuring continuous improvement in workflows and tools.
While the decision was not what the UX team hoped for, it led to valuable changes in the company's development processes, highlighting the impact of comprehensive UX research and stakeholder engagement.
