Under the hood: Updating LinkedIn’s UI


Simple example of the Sass function and mixin

Leaving ourselves in a better technical state

In addition to updating our UI to better embody the inclusive, warm, and welcoming community of individuals who make LinkedIn, LinkedIn, we have further pushed our products to fully adopt the new design system while largely avoiding additional technical debt. We can update our UI significantly faster today than we were able to when we started because we took this opportunity to not only leverage as much infrastructure as we could, but also provide a common framework for gaps not covered by infrastructure-controlled styling. This will allow us to experiment and iterate in the coming months to learn what works (and what doesn’t) for members with our new design system.

We will be able to adopt other parts of the design language, like layout changes, without them looking out of place and creating a “Frankenstein” experience. We will also be able to introduce the new infrastructure for this design system much more seamlessly into our product on a timeline that makes sense for our product teams and avoids a massive migration. We are providing valuable feedback on the new design system before all of LinkedIn’s products adopt it.

Lastly, development of the new infrastructure is now far enough along that we are able to align anything we redesign or build more closely by adopting the new language, including semantic tokens. This process of abstracting colors and other design system variables has changed our developer approach and language to be more semantic for these design terms. Doing this now makes adopting the new design system easier, and opens up opportunities to bring more UI improvements to our members.

Acknowledgments

We would like to thank the core infrastructure engineering team for making this possible: John Robinson, Abhishek Nancherla, Luis Torres, Bryce Pauken, Christopher Wilson, Daniel Hagman, and Jensen Kuo. We’d also like to shout out our key infrastructure partners—Chris Leonavicius, Tian Sun, Bryan Levay, Yeli Arenyeka, and Domenic Santangelo—as well as Samson Choi, Alex Lakas, and Tony Lai for supporting our early tests.

A big thank you to our design and research partners: George Penston, Oscar Gonzalez, Jessica Clark, Nate Whitson, Joe Farquharson, Karolina Sadocha, Aryel Cianflone, and Craig Mackintosh.

Thank you to the team that helped execute this project: Vivek Tripathi, Yoshi Komada, Mark Hill, and Zuki Ndulo.

Thank you to the executive team that placed their trust in us to execute this project: Nisheth Joshi, Erran Berger, Joann Wu, and Kiran Prasad.

Lastly, a huge thank you to the many engineers and designers that came together and made all of this a reality.



Source link