50+
product teams adopted
the design system
42%
less ongoing maintenance costs
30%
lighter web pages
36%
faster time to market
Phases and toolkit items used
Component build
Token architecture
Creative strategy & positioning
Audit & planning
Guideline & design principles
Rapid prototyping
The Brief
Client
Union Investment
look at Solid Design System's UX Design Award nominationOverview
Union Investment is one of the largest fund management companies in Germany. They have several digital products with almost no consistency between them. This called for a solution to unify with numerous rules to serve 52 product teams with users from all corners of the country.
My Role & Contributions
As the Design Engineer, my responsibilities encompassed:
Strategy:
- Setting design strategy, principle and foundational guildines and best practices
- Leveraging experience working on other design system projects to inform strategies and avoid past mistakes
- Leading the design efforts and ensuring alignment with objectives
Design and Problem-Solving:
- Inspired by the idea of "single lego block", components are built as bite-size composable building blocks to increase reusability. Complex components such as table or navigation are therefore used with much ease (and joy).
- Building the structure of standardized design tokens as single source of truth between design and development to address inconsistencies in color palettes, spacing, and typography.
- Demonstrated approachoes that simplify the user experience and improve feature utilization
- Presented user-centric design processes to leadership, influencing key decisions
Mentoring Team Members:
- Guiding and training designers from other teams
- Preparing training materials
The Challenge
As their digital products expand, neither the print-focused guidelines, vector-based assets, nor the Magnolia CMS components are easily adaptable for digital platforms or optimized for modern development. This leads to significant manual effort for adaptation, inconsistent UI elements, developers and designers effort for adaptation, inconsistent UI elements, developers and designers struggle with scalability and efficiency due to fragmentation.
The Process
Audit
To address these issues, a comprehensive audit was conducted of the entire product suite to identify necessary components, patterns, and guidelines. Many inconsistencies were discovered in color palettes, spacing, and typography, which led me to develop standardized design tokens.
Moreoever, workshops were held to collect product needs from stakeholders and finalize approaches to solve identified problems. User testing was performed on general patterns and components to ensure usability and effectiveness. Our goals and success metrics were defined collaboratively:
- Establish a solid foundation: Prioritize foundational elements before iterating on additional features.
- Adoption rate: Measure success by the percentage of teams adopting the design system in new projects.
- Streamlined design process: Facilitate the engineering for better integration on both design and development.
Kick Off
The audit list is filtered down to the most used cases - only what is essential and agnostic is built into the Solid Design System. Best accessibility practice is also integrated to funnel the design process.
Laying the foundation
The Solid design system is guided by four core principles:
- Cohesive brand experience: Maintain consistency across products
- Accessibility: Embed accessibility standards while maintaining the brand's visual identity into all components and patterns
- Clarity: Promote clear and straightforward user comprehension
Design & Development
A design is first dissected and refined. Then the design would be turned into resuabled components which are built, structured and stress-tested in parallel with front end to ensure the build is closest to front end.
Component Build
Inspired by the idea of "single lego block", components are built as bite-size composable building blocks to increase reusability. Complex components such as table or navigation are therefore were used with much ease (and joy).
Structure
Significant challenges were faced, such as balancing the development of the design system while projects were rapidly evolving. To overcome these obstacles:
- Detailed release notes are always up-to-date keeping stakeholders informed to manage expectations.
- Component build focus on both foundational components and complex CMS elements simultaneously.
- Components are gradually introduced into existing products.
- Iterations happen in parallel with building from peer feedback for further improvements or addition.
Reflection & Learnings
Key lessons learned:
- Documentation is crucial: Keeping a detailed record of decisions creates a valuable paper trail for transparency and future reference.
- Early leadership involvement: Engaging leadership from the outset helps align expectations and fosters support, even if it means agreeing to disagree at times.
- Continuous research is vital: User needs are diverse; ongoing research ensures the product remains relevant and user-focused.
- Prototyping enhances feedback: Users provide more actionable feedback when they can interact with tangible prototypes rather than abstract discussions.
Influences on My Approach
This project reinforced the importance of a user-centered design approach and the value of iterative development based on real user feedback. It highlighted the necessity of balancing business objectives with user needs to create a product that delivers genuine value.