THE problem space
What Sparked the Mission
One of the biggest construction companies in the world embarked on its digital transformation journey. This meant new digital touch points, platforms and applications for how they operate on a business level, track activities and deliver to their customer base.
Due to the large number of started initiatives, technical teams grew rapidly, all counting on product designers to provide a unified vision on what they must build.
This section displays the pain points I noticed in the role of individual contributor (IC) from within one of the agile teams.
To get an accurate idea in terms of work volume, at that time, I counted over 10 teams, each having on average 8 to 12 members.
Initial Style Guide was kept as PDF. It made it difficult to maintain and keep up with updates and changes.
Fresh contributors (designers and developers) faced slow onboarding times, work redundancy and downtimes.
Accessibility issues since topics like responsive design and internationalization came in second.
Recurring inconsistencies were caused by missing documentation and a lack of standards.
Countless hours spent in meetings in order to align and to plan recovering from technical debt.
Product Owners and management lacked visibility into UX/UI processes which fostered feeling of doubt and mistrust.
Phase 1 - First Steps
From IC to Key Designer
During design review sessions and workshops, I went on advocating for a framework capable to handle the responsive design layouts.
If you think of Material Design, Bulma CSS or Twitter Bootstrap - you are right!
My direct manager wanted to see more, so I coded a prototype tailored to our specific use-cases and breakpoints. Those responsive layouts felt like a game changer, so the initial prototype which lived on my local machine made it’s way to an internal Bitbucket Repository.
What followed were 6 months of developing this pilot further into a new resource that I presented to the leadership. They liked it and they understood the value.
As a result of this success the Design System Team was officially established and it soon started to grow.
Phase 2 - Growth
More People and Better Process
The team evolved and so did our services and process - strengthening the
relationships with product owners and development teams.
The process of component management and creation
Phase 3 - mature design ops
Key Assets and Results
The consistency and design productivity was solved through packaging the Sketch Symbols into a Sketch Library.
The Bitbucket Repo became a custom web platform - documenting living examples accompanied by their code snippets.
Over 50 new components (and variants) were designed, built, tested, documented and made readily available
Migration to Web Components has begun to enable framework-agnostic support, acting as wrappers for React and Angular components.
Accessibility has been taken to the next level— by addressing colour contrast, ARIA attributes, and right-to-left (RTL) language support.
Updating the live materials got easier by automating deployment through Jenkins - in collaboration with the DevOps Team
Phase 4 - Large Scale Impact
New Directions Powered by the Design Language System
Dozens of teams from within and outside the organization decided to use the assets in their design and development efforts.
Here are some of the projects built with it.
The Added Value - Time and Money
Estimated costs breakdown
Estimated savings breakdown
Final Thoughts
Conclusions and Lessons Learnt
- I started with what I knew, but soon after that, I left my comfort zone. I focused on helping the teams perform better and I ended up growing in my role and contributing to an entire digital ecosystem.
- Design can look and feel good, but it is great when it makes others work easier, cuts down time-to-market and saves money.
- I realized the importance of DesignOps. It is critical in optimizing design efforts across a growing organization. It is in enabling design teams to work efficiently, consistently, and in alignment with business goals.
- On top of new technical skills I gained, I cannot image reaching so far without improving my soft skills and working closer to the management.