Posts in Design Systems
Raising the Bar of Your Design System

While there have been a number of exciting developments in the digital product space to help people with disabilities, there still exist many products with fundamental accessibility issues making frequent daily tasks cumbersome and even broken at times. For example, a user may not be able to read critical content because the text is too light in color and they have low vision or are outside in the bright sunlight.

Many of these fundamental issues can be addressed if accessibility design guidelines are applied at the design system level. This makes the design system even more effective at it’s task of saving time and resources as well as providing a more consistent experience for the end user.

In this talk, Jen Devins, walked us through three strategies to efficiently bake accessibility into design systems.

Focus on system wide building blocks first

Baking accessibility into the foundation of your design system is a critical place to start for a thoughtful, holistic solution. Apply color contrast guidelines to the overall palette to help users with low vision; ensure the state system considers clear focus and selection indicators to help keyboard users; provide clear and concise labels to common icons to help users who are unable to see the screen; ensure touch targets are large enough for users with low mobility or simply with larger fingers.

Embrace standard interaction model patterns

Another important accessibility guideline is to ensure all users can navigate efficiently regardless of how they interact with the product. For example, relying on only keyboards is common for people who find using a mouse challenging due to arthritis as well as power users who feel keyboards are faster . But what if you don’t rely on keyboard all the time? How are you supposed to know the best interaction model?

Luckily, there exist a number of industry-wide resources such as he WAI-ARIA Authoring Practices from W3C that document expected behaviors. Following these standards will better meet users expectations and reduce time spent reinventing any wheels.

Document action items for people implementing the design system components

While a design system with accessibility baked in can greatly help increase product accessibility, there is still work a product team will need to do once the implement the pattern or component in context. Recommending ways to group elements for more efficient navigation as well as indicating visual elements that will need labels are great examples of action items to make teams aware of.


About the Speaker

Jen Kozenski-Devins | Head of Google Accessibility UX

Jen has been a UX Designer for 20 years and over time found herself immersed in the world of inclusive design and accessibility. Her goal is to learn from users and educate product teams on ways to make products more inclusive. During her career at Google, Jen was a design manager on products such as Search, Google Analytics, and G Suite and is now the Head of Google Accessibility UX. Before Google, she worked on the main shopping experience at eBay.



Design Systems for Non-Traditional Use Cases

People usually associate Design Systems with polished final designs, cleanly mapped to production code and accompanied by a nicely documented site. This talk isn’t about those systems. It’s about all the other ones. The scrappy, simple, reusable components you use all the time, without thinking. The ones that help you express quick ideas, arrange sticky notes for research, or provide photos and names of people from your team to offer more realistic examples in your designs.

In this talk, Noah Levin, Design Manager for Figma shares some examples, tips, and best practices to be scrappier with your Design Systems and speed up the design process for everyone. He believes designers should only have to design a basic building block once, and everyone else should benefit immediately, without needing to put in all that extra work to create polished finalized documentation.

Content Strategy Techniques for Design Principles

In-house teams may spend months defining principles. But what makes great principles and once you have them, how do you apply them effectively?

In this talk, Selene Hinkley, Product & Design Systems Content Strategist will discuss content strategy techniques for design principles, and the context for how to translate design principles into experiences. She will share examples of how design principles help Shopify solve real-life problems, and how to define content formulas and page templates for writing solid design principles.


Bridging the Design and Engineering Gap With Design Systems

Designers today are caught between shunning redline specs and being overwhelmed to learn new skills to bring their designs to life. Out of this tension comes design systems – not only a more efficient way to design, but a better a way to bridge the gap between design and engineering.

In this talk, Mike Dick, Design Systems Lead at Survey Monkey shares his experience leading design systems for companies like Twitch and Quora, and a deep dive on how SurveyMonkey's design system was built to empower design and engineering teams to come together to refresh their 20-year-old product.

Creating and Evolving a Cross-Platform System at Scale

The design challenges we face are becoming larger in scale and and more complex. As designers and developers, we need more systematic and abstracted methods to continue building great products.

The past couple of years, Airbnb has been systemizing UI design & development on web and mobile platforms with a design language system (DLS). In this talk, Karri Saarinen, Principal Designer at Airbnb discusses what are their learnings and challenges in creating and evolving a cross-platform system for a large, fast growing and design lead product company.

Designing a Comprehensive Color System

Color is subjective, emotional, and complex. How do you design a cohesive color system for your product that is both emotive and branded, but also usable, accessible, and flexible enough for the future?

In this talk, Linda will take you through how their design systems team at Lyft took a mathematical approach to build Lyft’s new color system (Spectrum). 

Linda shared how they created a color system that both designers and engineers can understand, the tools they made to develop and share their palettes, and how they approached a scalable system built to take Lyft through future brand refreshes and app redesigns.

Getting Your Design System Off The Ground

Introducing a design system successfully doesn’t happen overnight. It often takes months, if not years, to create full adoption and use of your system. In it’s early stages your system can feel like it isn’t working or providing value. So, how do you get your design system up and running?

In this talk, Joey Zingarelli, Product Designer at Pinterest, shares practical tips on how to get your team designing and building your product within a new set of rules and guidelines. He talks about how to avoid the pitfalls of enforcement and get your system to empower, rather than hinder, your team.

You vs. The Design System They Told You Not to Worry About

While some companies have full-time teams of designers and developers, some can only do design systems work in their spare time. As an individual contributor, you may feel pressured to be a great engineer as well as hone your visual and interactions skills—or maybe you enjoy both but find companies often make you choose one over the other?

Despite being in the fortunate position of working with full-time design systems team, Diana Mounter, Design Systems Manager at GitHub, is not immune from feeling imposter syndrome or envy towards design systems team. Diana will share some real-talk behind design systems work, taking a look at industry examples in comparison to her own experiences, how they strive to do things at GitHub and what the future might hold.

Communicating Design Principles at Scale

Communicating the intent behind a new design system isn’t simple. You need to get the work out of the minds of the designers who crafted it and into use by others. For Material Design, which strives to meet the needs of a wide range of brands, the need to balance customization with consistency raises the challenge.

Rich Fulcher, Head of Material Design at Google shares how he and the Material team have approached educating designers and developers about getting the most of Material Design. From design principles to documentation, he’ll offer practical techniques for bringing a design system to life.


The System Always Kicks Back

Congratulations! You’ve launched a design system. Everyone loves it. Everything is great! But… Now what? Lucky for you, building a successful system is just the first step.

Last year, Shopify launched Polaris — a multi-year effort that brought Shopify’s experience together. In this talk, Kyle uses examples from ongoing efforts with the UX team at Shopify to keep Polaris working.

He covers how we’ve grown the system and the challenges we’ve encountered along the way. He talks about scaling the team and scaling the system while making sure it all doesn't fall apart. Through it all, he shared some light on the new problems you should expect after you build a successful system at your company.


About the Speaker

Kyle Peatt | Director of UX at Shopify | @kpeatt

Kyle enjoys problems. Lucky for him, leading Product UX at Shopify provides plenty of opportunities to think about complicated interconnected problems and try to come up with simple, powerful solutions.  As Director of UX, Kyle leads interdisciplinary teams across content, research, design, and front-end development to create great experiences to help Shopify’s hundreds of thousands of merchants. He also enjoys a good game of crib.

 
Thinking in Symbols for Universal Design

Benjamin’s talk touches on the internationalization and localization of design elements, and how might we design with consistency for multiple interface targets like Android, iOS, Virtual Reality, or even Natural Language interfaces. He’ll dive into how to apply the same techniques and principles to design a chatbot, or a telephone autoresponder, or confidently design for 90 different languages.

In this talk, Benjamin shared some examples of how Airbnb is already doing this, some predictions of where this is going, and wrap up with some practical takeaways.


About the Speaker

Benjamin Wilkins | Design Technologist @AirBnB | @ thatbenlifetho

Benjamin Wilkins is a founding member of the Design Technology team at AirBnB, working on scaling design through systems, tools, and emerging technology. Prior to working at AirBnB, he worked cross-functionally with a number of early stage startups before partnering to start This is After, a design collective focused on generative design and identities.

Introducing Design Systems into Chaos

There are often multiple variations of button styles and hundreds of lines of code written by multiple contributors before a company starts to build design systems, and few companies start with a dedicated full-time team. So when you do get to focus on systems, what's the most valuable way to spend your time?

Diana will be sharing practical examples on where to begin to set up a design system, what to prioritize, and how to make a big impact to customers and colleagues, to help you introduce systems that bring order to chaos.


About the speaker

Diana Mounter | Design Systems Lead @GitHub | @ broccolini

Diana is a product designer based in Brooklyn, NY, and organizer for the NYC Design Systems Coalition. She works for GitHub and leads their design systems team- the team responsible for building and maintaining GitHub's CSS framework, Primer. Before joining GitHub, Diana helped re-design Etsy’s seller tools, taught new designers how to push code, and was part of a small team that rebuilt the style guide.