Overview
The article discusses the comprehensive redesign of LinkedIn's user interface (UI) aimed at creating a warmer and more inclusive experience for its users. It details the engineering challenges faced during the implementation across multiple platforms and the collaborative efforts of various teams to achieve a successful launch in under 60 days.
What You'll Learn
1
How to implement a new design system across multiple platforms simultaneously
2
Why maintaining existing product features during a UI redesign is crucial
3
How to utilize mappings for design asset management in large applications
Prerequisites & Requirements
- Understanding of user interface design principles
- Experience working in large-scale software development environments(optional)
Key Questions Answered
How did LinkedIn manage to redesign its UI without disrupting ongoing product development?
LinkedIn's approach involved implementing the new design language transparently while allowing product teams to continue their work. By adopting design changes that did not impact layouts and using mappings for design assets, they minimized disruption and maintained feature development for their 706+ million members.
What challenges did LinkedIn face during the UI redesign process?
The redesign involved modernizing a user interface across three applications with over 5,000 pages, requiring coordination among hundreds of developers. Key challenges included avoiding mixed UI instances and ensuring that the redesign did not block ongoing product development.
What was the timeframe for the UI redesign project?
The entire redesign project was completed in less than 60 days, from kickoff to launch, showcasing the efficiency and collaboration of the engineering teams involved.
Key Statistics & Figures
Number of pages in the UI
over 5,000
This statistic highlights the scale of the redesign project across LinkedIn's applications.
Number of developers involved
hundreds
This indicates the collaborative effort required to manage the redesign across multiple teams.
Number of LinkedIn members
706+ million
This emphasizes the importance of maintaining service continuity for a large user base during the redesign.
Technologies & Tools
Some links below are affiliate links. We may earn a commission if you make a purchase.
UI Library
Art Deco
Art Deco is LinkedIn's internal UI library that provides guidelines for text, color, spacing, and common components.
CSS Preprocessor
Sass
Sass was introduced to help teams apply new styles consistently across the web platform.
Key Actionable Insights
1Implementing a new design system requires careful planning to avoid disruption to existing features.By prioritizing ongoing product development while adopting new design elements, teams can ensure that user experience improvements do not hinder feature releases.
2Utilizing mappings for design assets can streamline the transition to a new design language.This approach allows teams to manage design changes effectively without incurring technical debt or disrupting the user experience.
3Training materials and guidance are essential for scaling design updates across product teams.Providing clear documentation and resources helps teams adopt new design standards efficiently, ensuring consistency across platforms.
Common Pitfalls
1
Failing to account for existing technical debt can hinder the redesign process.
Without addressing technical debt, teams may face challenges in implementing new design systems, leading to a fragmented user experience.
2
Not providing adequate training and resources can slow down the adoption of new design standards.
When teams lack guidance, inconsistencies can arise, undermining the benefits of a unified design approach.
Related Concepts
User Interface Design Principles
Design System Implementation
Collaboration In Software Development