Background
Wind River’s flagship product, Studio Developer, is composed of several DevSecOps applications, or modules, each with its own development and product team.
This organizational structure led to several issues:
Lack of communication
There was little cross-team communication because there was no built-in body to incite it
Inefficiency
Developer teams wasted time repeatedly building the same components.
Inconsistency
Our customer’s experience suffered due to the inconsistent look and behavior in the final product.
Everyone needed a cohesive, comprehensive, single source of truth for front-end components.
Although this was an internal project with no direct revenue link, I proposed and convinced senior leadership of its value by how it would address both design and technical debt.
Understanding the Problem
To start, we applied the same user experience principles we would to any product. We wanted to clearly understand the problems from the perspective of all the personas involved so that our solution would have the biggest impact.
We interviewed 15 people from 9 different teams in 4 different disciplines (design, development, sales, and field engineering) to gather insights.
We documented differences in tech stacks and incompatible libraries. We collected stories of crunched deadlines and what frameworks made developers’ lives easier. We compiled customer feedback on front-end component issues.
Organized themes after our research debrief.
Design Brief
With all this information in hand, we knew the new system needed to:
Unify the front end of Studio Developer.
Ensure Accessibility, aiming for 508 AA compliance.
Be Responsive down to a 1366 pixel viewport.
Differentiate Wind River from its competitors.
Seamlessly fit into designer and developer workflows
Execution
We audited 6 different Wind River front-end development libraries as well as the current and upcoming designs. Out of this work came a specific and prioritized list of components we wanted to standardize.
We got to work creating a fresh design system. Thanks to the UX team’s design expertise, our initial set of components came together quickly.
But talk to anyone who’s worked on design systems and they’ll tell you that there’s much more to it than a single, design library file.
Collaboration and Rollout
I met regularly with the development team tasked to create the front-end library (the “Portals” team) for alignment, progress reviews, and QA. This close collaboration maintained momentum and we were able to sort through issues quickly.
I organized a company-wide presentation, with over 200 developers in attendance, to showcase the in-progress work, preview the components, and walk through the adoption process. I invited senior Portals team members to present code and documentation. The whole event was met with very positive feedback.
Lessons Learned
As it sometimes goes, the project did not go according to plan. Although everyone could agree that it was sorely needed, the project faced challenges:
Deprioritization
Often sidelined for customer feature requests.
High Up-Front Costs
Required significant development resources.
Frequent Hand-Offs
Led to extensive documentation needs due to changing developers.
An example of the level of documentation we needed.
The key lesson: Executive buy-in and sustained investment were crucial. Despite selling senior management on its value, the project needed an executive champion to maintain momentum when things got crunched.
Impact
Ultimately, I’m proud of what I and the team were able to accomplish. We achieved significant milestones:
Research
We took a comprehensive approach to make sure that the front-end library would work for all who engaged with it.
Design
We create a robust and easy-to-use design library, standardizing the appearance and behavior of over 1,500 components.
Governance
Devised a scalable, future-proof process for the maintenance and creation of future front-end elements.
Future Prospects
When Wind River and I parted ways, I was exploring using Figma’s variables and design tokens to streamline the design system’s publication process. I was preparing a proposal, complete with POC, to lift a lot of the front-end development burden through the use of design-to-code plugins and automation. These innovations are exciting, and I’m eager to apply these skills and tools in my next role.
Client:
My role on the project:
Design Director
Skills I used:
UX Design
Design Systems Design
Visual Design
Responsive Design
Accessible Design
Collaboration
Project Management
