Product-Partnerships2.jpg

Design Systems @ LinkedIn

Over 550 million people rely on LinkedIn's suite of products to execute work, grow their career, or find the next big thing.

At LinkedIn, our Design System affords over 100+ designers the tools and resources they need to work quickly and at massive scale. How much scale? Over 550 million people rely on LinkedIn's suite of products to execute work, grow their career, or find the next big thing.

As part of the Design Systems team, I focus on supporting our foundational pattern elements, namely, iconography and illustration. A lot of my day-to-day work is spread between improving request and asset creation processes, executing on our stylistic and optimization techniques, facilitating best-practice workflows and documentation guidance, and working with developers to continue to improve our tooling and back-end repository, as well as maintaining design tooling.

In addition to my primary focus, I also work within our team on overall component and library strategy, as well as system adaptation, horizontal research, and relationship building with design partners.

 

 
Icons-Hero.jpg

Icon system

As a foundational element of our design system, our icon library provides designers with an integral method of communicating complex concepts or actions within a confined space -- important for smaller screens or layouts with dense information. Every icon within our library goes through a 5-step process: Request, Ideation, Production, Development, and Release. In each of these steps, I work closely with other designers, project and product managers, and developers to ensure the successful implementation of an asset in the product environment along with it's proper documentation within the system.

One big benefit of working on the systems team is the ability to understand how different components manifest across various products. For icons, one big issue was misuse of this foundational element. In an effort to make our library more accessible to designers early on, we developed a process allowing product designers to request icons. This gave us valuable information on where the library was deficient for key product needs, but also opened the floodgates for a litany of requests that, while beneficial to a particular requester, was not necessarily great for LinkedIn as a whole. As a result of this learning, I worked on a series of guidelines to tighten icon requests and create awareness around the importance of correct usage, including better documentation, educational presentations, and more explicit direction within existing tools.

Icons2.jpg

Over 400 icons

Balancing a system of over 400 UI icons requires not only effort to create, but also to maintain. For each icon that exists, I need to develop guidelines and best practices for usage within our many products. 

 

 
Slider-Controls.jpg

Componentization

Components are the main building blocks of any design system. Product designers can build and test multiple solutions quickly, all while staying true to the core styling of a brand. Our team supports code not only for web, but iOS and Android as well, allowing our designs flexibility for product building across all supported platforms. During our native build-out, I was responsible for delivering a comprehensive spec sheet for slider controls. During the process, I was involved in collaboration between our native platform developers, including expected functionality and behavior, as well as accessibility controls and localization.

Similar to the Foundational portion of our system, Components have been a tremendous learning curve for the team. By late 2017, we shifted our focus from a fully web-compatible system to start including native iOS and Android components. In order to better deliver components to our developers, our team put together a comprehensive spec that tried to cover every possible iteration of a component. For this particular project, I focused on taking our existing slider component for web and translating it into comprehensive specs for both iOS and Android. This process involved a short exploration process to understand all the different variations required for native sliders, followed by detailing out sizing/spacing, visual styling, tap/touch targets, expected behavior, accessibility usage, and language behavior among other things.

 

 
Product-Partnerships.jpg

Product Partnerships

Design systems are very horizontal in nature. It reaches across dozens of teams in the design org and even one minute change to the system can have a tremendous impact on a product. That's why we partner closely with our product counterparts to facilitate systems thinking and understand their needs and frustrations. For an initiative on better understanding member intent within the product, I worked with a number of other product teams to help streamline certain interaction flows to make settings changes and intent reversal more clear to our members.

In early 2017, I was part of a task-force of designers looking into ways we could better communicate member intent -- defined as actions with intended or unexpected consequences -- across the LinkedIn ecosystem. We met weekly to discuss research findings, share common problems and potential solutions, and put together a roadmap that would enable the success of the project. After this initial planning phase, I worked with one other designer to act on the first part of our roadmap: identify one problem are and deliver a solution to design leadership. Throughout this process, we met twice a week to share work; I primarily approached this issue from a systems standpoint and worked on ways we could solve problems through the system while the other designer gathered research from product and discussed ways that product teams could better communicate to solve issues. For our presentation to leadership, I mocked up several potential solutions including key areas of interest, do's and don'ts, and prototypes.

Binary-Input-Motion-Text.gif

Binary inputs

For this project, I was responsible for extrapolating limited user data to imagine an experience in which a member might want to give feedback on a particular company.

SM-SL-FeedManagement.gif

Show more or less

For this project, I was responsible for prototyping an improved show more/show less experience within the feed, including options for how a member could have more control over permanent actions.

 
Product-Partnerships3.jpg

Relationships matter

One huge aspect of systems design is fostering relationships with those who rely on you to get work done. I make sure for each project I work on to communicate often and early with with key stakeholders, finding ways to involve them in the decision-making process which helps facilitate changes quicker.