MY ROLE

Lead Designer

team

4 Designers + 3 Developers

Overview

During my 3.5 years tenure at Lyearn, I helped create and scale 2 design systems with completely different teams and product verticals. Given the volatility of the products and business strategies, I had an amazing time figuring out how we can develop a system to keep up with rapid design iterations.

The first design system Turbo was created to bring consistency in the UI elements and reduce communication complexities within our small team. At the end of the project, we had 27% fewer UI bugs reported during the dev workflow and a 20% increase in speed while designing UI. Read more about the Turbo Design System here :)

In this case study, I am going to give a walk-through of the Backpack Design System we initiated after we had management and business re-organization right when the pandemic started back in 2020. During the 2 years, I worked with 4 team members solving communication and collaboration issues to streamline our visual design across 10+ new product features.

TLDR of my contribution to the design system team :)

Creating

While transitioning to work with different team, we had to shift all our design assets from Sketch to Figma and that came with a challenge of creating a new file structure from the ground up. Here’s an overview of various file structure we experimented with in the beginning and then the final file organization when I left Lyearn!

A few more things that I initiated and led for features used by 100,000+ users-

• Designed custom components
• Created & improved colors, typography, spacing and loader styles
• Created theme-able tokens and dark mode

Collaborating

Documenting

A couple of designers regularly critiqued about getting lost in the design system and were clueless about half of the things. In the span of 2 years, my responsibility was to experiment with ways to communicate our intent of the components and the library itself to designers using varied types of documentation. Here’s a look at various documentation we initiated and scraped as opposed to “a single mold works for all” strategy :)

Learning & Educating

A huge part of the design system involves communicating our designs and intent to our outstanding team of developers. Along with giving them new updates on the design system, we also focused on developing relationships and rapport for seamless collaboration by-

• Conducted 2 anonymous surveys which resulted in 80% improvement from previous handoff process
• Brought out key problems through cross-collaboration vs one way updates
• Plugin support, resource sharing and
• Creating custom learning material, handoff guidelines and nomenclature to encourage consistent usage among internal teams

Audits & Testing

The surveys brought another interesting insight - how do we make sure our designs were translated perfectly into the developed version?

Our team ran a brainstorming session and included an audit and testing cycle after every design sprint. Most of the large companies had a similar process although, it was interesting to come up with our own method through trial and error after a year of running sprints within the small teams.