LinkedIn connects the world’s professionals and gives them an authentic means to establish their own professional profile online, connect with trusted contacts and extend their professional network, and exchange information, ideas, and insights to make better, faster decisions.

Overview

Percentage of Art Deco coverage across platforms before starting this project.

DESIGN GOAL

Offer a complete Art Deco library for company-wide usage across web and native platforms

Cross-team collaboration

Design partners

Beyond the Engineering groups, there were multiple teams involved within Design: our Design Systems team and The Art Deco Guild. The Guild is a team of distributed designers, spread across offices, projects, and objectives, who provide the Systems team with a horizontal view across Design. Throughout this process, we used them to audit pattern usage and gather feedback on our approach.

Approach

First, we considered ways to introduce Art Deco—LinkedIn's unique brand—to iOS and Android, two platforms that already had well-defined paradigms and design guidelines established by Apple and Google.

There were few options we explored:

• Control the entire experience: Write a complete set of custom foundations and components for native platforms.
  
• Strictly adhere to OS standards: Strictly follow native OS components and restyle them to fit LinkedIn's brand.
  
• Leverage native OS standards, but fill in the gaps: Adopt native components and restyle them to fit LinkedIn's brand (type, color, iconography, etc.). Any component that was not covered by the native OS would be custom-built for LinkedIn.

Despite an intrinsic desire to guarantee a uniform experience across all platforms, members' familiarity with our desktop and app experiences are just as important as their familiarity with their mobile platform. Furthermore, native OS components are already thoughtfully considered, rigorously tested by the OS creator, ensure proper accessibility functionality, and drastically reduce LinkedIn's engineering overhead.

On the other hand, limiting our experience to only the native OS components puts our design capabilities outside of our direct control. In the end, the best option was the leverage all OS standards to maintain the familiar controls and confident native experience, but fill in design gaps with our own solutions.

Consistency.  After this project, developers will no longer need to implement each screen independently using the platform's basic UI tools. This reduction in re-implementation will result in consistent UX and streamlined code.

Fewer bugs. By re-using component implementations, we expect to see fewer functional bugs, as components in the repository are heavily tested before going to production.

Reduced app size. After teams migrate to using Art Deco foundations and components, we expect to see a reduction in the overall size of the application.

Faster review. Designers and developers can build screens at a higher level of abstraction with less design and code to review.

Process

First, we audited Apple's Human Interface Guidelines (HIG) and Google's Material Design and compared it with what we currently offer in Art Deco. Then we consulted with our engineering counterparts and identified common native UI components that could be restyled and adopted (e.g., bottom sheets, toggles, switches, checkboxes, etc). These components were quick to develop and were priortized to be specced first.

We then addressed the unique components that were essential LinkedIn's ecosystem. Below are examples of fully customized components, but note that we designed them to feel familiar to the native OS. Specifically, the Alert and Action Sheet components needed the ability to serve rich content like icons, illustrations, and profiles—a feature that Apple's native component does not allow.

Spec & Documentation

Each component required a comprehensive spec. All specs contained an overview, visual styling, interactions and configurations, motion, internationalization, and accessibility. After specs were complete, engineers reviewed the spec to discuss implementation. Once the engineers completed coding the component, it was reviewed and pushed to the Art Deco Sample App. This internal demo app was an easy way for designers and developers to review foundations and components that were currently available in code.

Below is an example of a comprehensive spec for iOS Popovers and how it translated into our Art Deco Sample App. 

Metrics

While it is not possible to come up with a precise estimate of these combined benefits and savings, conservatively we hope to decrease our engineering efforts by 10% and a boost the efficiency of our designer's workflow. Also, let’s not forget there are benefits not tied to efficiency such as an improved member experience by creating a consistent products across the LinkedIn ecosystem.