From flash websites to design systems with Linzi Berry, Design System Lead at Lyft

Avocode
Avocode  — From Design to Code
8 min readFeb 26, 2019

--

Introducing our new interview series — The Grit.

Grit in definition means: “perseverance, the strength of character and passion for long-term goals.”

People high in grit are able to maintain their determination and motivation over a long period of time. They overcome the obstacles to achieve greatness. It has become even a better precursor to success than something hazy like IQ, which is why their stories are truly inspiring.

In this series, we’d like to bring these stories closer to you. Meet our first guest Linzi Berry, Design System Lead at Lyft.

Designs Systems has become sort of a buzzword of 2018. While everyone is talking about their importance, only a few brave designers are actually pursuing how to build and maintain them. Since only a few people have so much experience with Design Systems as Linzi Berry, she was an obvious choice for this interview.

Linzi Berry was born in western Massachusetts, raised north of Boston, went to school in upstate New York (RIT), and since then have been in the Bay Area for 10 years. She’s actively putting effort into maintaining a healthy work/life balance, enjoys making Instagram videos of her crazy cats and loves dinners, tattoos, RuPaul’s Drag Race at The Cafe in Castro and stand up paddleboarding.

Hey Linzi, thanks for taking the time. How did you start with design in general?

When I was itty bitty, my mom was an interior designer, and my dad was a project manager for Hasbro games — so you could say it’s in my blood. I had a fantastic art program at my high school and won a partial scholarship into RIT’s New Media program. It was a trifecta of timely digital design: flash websites, tv opening animation, and dope 3D renders. Truthfully what I took away from my college experience was how to learn quickly, not become too attached to process, and great visual design.

I had done a ton of internships during school, but the bubble burst and recession hit and all of my prospects in NYC fell apart. Life doesn’t always go the way you planned. My professor and mentor told me to go west. I finally landed a gig at Odopod, a digital agency, as one of their first junior designers. I was there for 7.5 years, from junior designer to associate creative director, from single to married (my coworker), from flash websites to responsive web to soda touch screens to design systems. Most people moved around every two years in tech, but I stayed because the people were talented, genuine, and funny — and I’m lucky enough that I was able to acknowledge that that was rare.

In 2017 I wanted to stop working on luxury clients and put my dedication into a company I truly believed in, who saw the good in humanity and pushed for eco-friendly solutions. I’ve been at Lyft ever since.

What is your favorite project that you worked on?

My favorite project, outside of my current one, was working on a design for the Fitbit web dashboard.

Fitbit helped me get active and lose 30lbs, so getting to work on a product that had changed my life was a dream come true.

When you’re at an agency, you pitch beautiful pages that feel own-able, but this was the first time my designs were hit with accessibility and common color recognition feedback. At the time I thought their feedback was super picky, they kept wanting me to change and test the colors over and over again. I was treating it like a perfect design project that I could wrap in a bow and hand-off, and they were treating it as a product to be iterated on. Looking back, this project prepared me for where I am today… and I’m still proud of it.

Fitbit dashboard color studies

As an expert on design systems, how would you explain a design system to someone who has never heard of it before?

A design system is an internal product made up of 3 parts:

Build
We define and uphold principles, like localization, accessibility and solving the root of the problem. We build & maintain flexible, universal foundational attributes and components to Lyft’s quality standards in design, Android, and iOS.

Contribute
We deliver a consistent user experience for key flows and features by participating in the adoption and migration of current designs and code into the system.

Support
We educate teams on how to use core elements and apply the system’s principles to build their own. The biggest way we do this is through documentation. We also lecture at all-hands, teach classes, host office hours, and answer questions on Slack.

A design system is the canonical way designers and engineers design and develop at your company. It is universal across products and platforms, delivers consistency and predictability, reduces design and engineering time and debt, and raises the quality of our experiences.

Our principles define quality, foundational elements give constraints, and components are consistent, coherent, and reduce time and debt. However, the most important part of the system is collaboration with, education and support for the teams using it.

Lyft Product Language; Lyft’s Design System

What’s it like to be leading the design systems team at Lyft?

Lyft hired me for my visual design skills. I started on a product feature team and pushed to pursue design systems because, at the time, designing at Lyft was the wild west.

I had designed systems for companies in the past and I knew how valuable it could be to have this guiding light amidst the chaos. Flash forward to today, I’m on a team of highly skilled designers broken into three parts: design systems, design tools, and illustration.

I lead the design systems tiny, but mighty, team of two — covering all of mobile and web. Currently the sole designer on mobile, I work closely with our four detail-oriented engineers (two Android and two iOS.)

My typical day is bouncing between studying best practices, designing solutions that work best for us, and supporting my team as well as all of the product designers and mobile engineers at Lyft.

Lyft Design System’s elevation

Could you describe Lyft’s current design system solution?

Our current design system solution is built around our opportunities for greatest impact. We aim to:

  • Deliver coherency and predictability to our product because multiple teams solving the same problem differently creates a disjointed user experience.
  • Raise the quality of our experiences for every person and every edge case because not designing for edge cases, accessibility or localization creates broken experiences.
  • Reduce design and engineering time and debt because one of the designs and code takes time to create and update.
  • Create a universal design system that works best for Lyft on all platforms because fast timelines mean only designing for one platform leaving developers to make assumptions.
Lyft Design System’s buttons

You mentioned you have built design systems before. How was that different?

I began developing design systems on the agency side at the beginning of a responsive web. The work tripled, while our resources and available time didn’t. A templated, modular system was the only way to accomplish large site redesigns for companies like Coca-Cola, Hennessy, and Hawaiian Airlines.

I lovingly built these systems out, each with robust documentation, and handed it off to the client. Months later a subpar version launched with many new colors, type styles, and components that weren’t in the pristine original.

I went in house at Lyft to gain experience in maintaining the system over time and to figure out what happened from agency handoff to product launch.

While design systems constantly evolve, what is the initial process behind building it?

As I mentioned before, a design system is an internal product. Like any product, it’s good to start with understanding the real problems your company has that a system can solve, but also be open to the possibility that not every company needs a design system. Create goals that have a business impact then get buy-in with a test project. Many design systems start as grass-roots efforts, but in order for them to gain traction beyond the designer and engineers who are already on board — leadership buy-in is a must.

And how do you keep it fresh — up to date?

If there is a bug in a system component, that is priority 0. System components are used everywhere and if they break, they break everywhere. Fix the bugs immediately! Listen to your engineers. If you’re fortunate, they will reach out with feature requests for one of the system patterns (because their designer changed it slightly.)

Get to the root of why it was changed. Just cause they felt like it? Because they didn’t know the rules of the pattern? Because of a legitimate use case? Decide, as a team, if that new feature is worth supporting. You can do this by assessing if it still follows the goals of the pattern or breaks them. Ask the team if they’d be willing to contribute their new feature back to the pattern or if it’s something the system team should take on. Contributions are the best.

We have yet to go through a redesign with the system, but when we do I’ll let you know how it goes!

Bonus Question: What’s your favorite way to eat avocado?

Not healthy at all… but my favorite way to eat avocado is cut into wedges, battered and fried with pickled slaw, pico de gallo, and spicy aioli on homemade corn tortillas. 🥑 (At Hook Fish Co, San Francisco.)

Want to stay in touch with Linzi? Find her on Twitter, Instagram, Medium.

Have a suggestion for an exciting designer or front-end developer we should interview? Hit me up at jurajmihalik@avocode.com.

Avocode is the first cross-platform design hand-off tool for teams that are building next-generation Web, iOS, & Android projects

--

--

Get the latest updates and news about Avocode – the best way for designers and developers to work more efficiently. Together.