This document discusses why product teams should build design systems. It notes that as product teams grow, inconsistencies can emerge across products without standardized processes. A design system creates a single source of truth for visual assets and interactions. It allows for more efficient development, faster iteration, and increased product consistency. The document provides recommendations for creating a design system, such as defining design principles, unifying visual design, and creating an interactive component library. It also lists additional resources on design systems.
The Design System is an essential part of today's UX world which provides agility and performance in the longer term. Atomic Design is a part of Design System for designers and developers to build the parts of a complete design.
The SlideShare presentation consists of the summary of the Design System 101 Workshop, as presented by UX Gorilla with Mayank Dhawan.
Link of the event: https://bit.ly/2RwN4RF
The workshop took place on December 01, 2018 at 91springboard, Jhandewalan Extension, New Delhi.
This event was for designers, developers or members of the product team to help them with a clear understanding and give them useful ideas to make better decisions, help their teams to save time so that they can do things they would enjoy.
Building a Design System: A Practitioner's Case Studyuxpin
- How to build a design system from scratch
- How to audit your product for design consistency
- How to structure and communicate a design system to an Agile team
Design system presentation - How to sell it internallyEugene Kardash
Design System is a systematic approach to creating and maintaining consistent user interfaces, which coherently communicate the brand values and empower user experience.
This presentation's goal is to give an overview of the current state of design maturity at the company (here, at Herbalife Nutrition), to justify the necessity of having it, and to get buy-ins from decision makers.
A design system is a framework of practices that bring designers and products together. It is a platform to identify, and document what to share, whether a visual style, design patterns, front-end UI components, and practices like accessibility, research, content strategy.
The role of design with enterprise organizations is expanding, spreading across product teams and influencing decision-making at higher and higher levels. This scale, paired with the array of devices, browsers, screen sizes, locales, and environments, makes it increasingly challenging to align designers and developers to deliver cohesive user experiences.
In this talk, I’ll discuss the lessons learned, the challenges faced, and best practices for creating and maintaining an effective interface design system.
UI design becomes increasingly important for products and services. Influencing their users' expierence. UX itself determines the value of digital offerings and is their key differentiator. But "historically grown" incoherent interfaces deteriorate value and brand of products and services.
This talk is about design systems, that help to avoid (or overcome) design dept and to enable scaling UX across platforms, products and devices. Modularity and standardisation of repeatedly used aspects helps speeding up processes and increasing business value. Design systems help making user experience tangible to teams and brand values actionable.
The Design System is an essential part of today's UX world which provides agility and performance in the longer term. Atomic Design is a part of Design System for designers and developers to build the parts of a complete design.
The SlideShare presentation consists of the summary of the Design System 101 Workshop, as presented by UX Gorilla with Mayank Dhawan.
Link of the event: https://bit.ly/2RwN4RF
The workshop took place on December 01, 2018 at 91springboard, Jhandewalan Extension, New Delhi.
This event was for designers, developers or members of the product team to help them with a clear understanding and give them useful ideas to make better decisions, help their teams to save time so that they can do things they would enjoy.
Building a Design System: A Practitioner's Case Studyuxpin
- How to build a design system from scratch
- How to audit your product for design consistency
- How to structure and communicate a design system to an Agile team
Design system presentation - How to sell it internallyEugene Kardash
Design System is a systematic approach to creating and maintaining consistent user interfaces, which coherently communicate the brand values and empower user experience.
This presentation's goal is to give an overview of the current state of design maturity at the company (here, at Herbalife Nutrition), to justify the necessity of having it, and to get buy-ins from decision makers.
A design system is a framework of practices that bring designers and products together. It is a platform to identify, and document what to share, whether a visual style, design patterns, front-end UI components, and practices like accessibility, research, content strategy.
The role of design with enterprise organizations is expanding, spreading across product teams and influencing decision-making at higher and higher levels. This scale, paired with the array of devices, browsers, screen sizes, locales, and environments, makes it increasingly challenging to align designers and developers to deliver cohesive user experiences.
In this talk, I’ll discuss the lessons learned, the challenges faced, and best practices for creating and maintaining an effective interface design system.
UI design becomes increasingly important for products and services. Influencing their users' expierence. UX itself determines the value of digital offerings and is their key differentiator. But "historically grown" incoherent interfaces deteriorate value and brand of products and services.
This talk is about design systems, that help to avoid (or overcome) design dept and to enable scaling UX across platforms, products and devices. Modularity and standardisation of repeatedly used aspects helps speeding up processes and increasing business value. Design systems help making user experience tangible to teams and brand values actionable.
In this talk we’ll uncover our journey in creating a Design System for Skyscanner and share our learnings on how we sold it to the business by proving its worth. We’ll talk through some of the design and tech considerations we’ve made and share the tools and techniques which have helped us along the way.
Drew has spent the better part of the last two years leading the charge on launching and managing the global design system at AIG. Learn some of the battle-tested tips, tricks, and methods gained during the process including how to:
- Manage contribution and intake
- Manage “snowflake” vs system components
- Support multiple brands with a single system
- Track and measure the ROI of your system
- Perpetuate buy-in
Bio
Drew Burdick is a multi-faceted design leader with over a decade of experience. He founded and led a creative agency, led top accounts at Red Ventures, and most recently helped to transform product design at AIG by leading a team to establish their global design system. He is now a leader with the Experience Design practice at Slalom, helping to drive client engagements in the Charlotte market.
A design system can vastly improve your team's productivity, but most of all, it leads to better products! The challenge lies in creating a mature system and leading its adoption across the company successfully. Let's talk about how we learned to meet the needs of different designers and developers on different products, on different tech stacks, on different platforms. Attendees will go home with tips they can use to improve design systems of any stage.
Design systems: accounting for quality and scalabilityuxpin
You'll learn:
How Forumone builds and implements design systems for their clients
How to plan, create, sell, and implement a design system
How to use common design tools to build a design system developers will use
Evolving your Design System: People, Product, and Processuxpin
You'll learn:
How to create and maintain a design system over several years
How people, process, and product change alongside a design system
Lessons learned from growing the Linkedin design system
Trying to build a design system for your project? But still, don't know how to? Then this post gonna teach you how to create the design system for the project!
------------------
Follow me on Instagram to learn more about design
https://www.instagram.com/fazurrehman/
------------------
Understand Design System
A Design System is the single source of truth, which groups all the elements that will allow the teams to design and develop a product even there is lots of benefits to having a design system, but you need to find the right people or company who really need design system or you think you really can solve their business problems by design system!
I will continue the design system in the 2nd post and tell you better understanding and road-map how to build a design system. ⠀
Interested to work with me, let's start working together!
fazurrehman@gmail.com
Slides for a few events i was lucky to give a talk this year. From my experiences of building a design system for the product team. Figma and storybook js are introduced.
Let's talk about Design Systems and how they could help you build better products in terms of efficiency, consistency, UX, code quality and accessibility.
Summary:
1. About me
2. Why have one?
3. Design system (fundamentals)
4. How to build a design system (process)
5. Cost and value
6. Inspiration
7. Q&A
Design Systems First: Everyday Practices for a Scaleable Design Processuxpin
You'll learn:
- How to create, adopt, and maintain your first design system
- How to practice a “design systems first” process of product development
- How to build and govern a design systems operations team
Creating and Scaling an Enterprise Design Systemuxpin
You'll learn:
- How to create a unified design language for a complex organization.
- How to use the most efficient processes and tools for maintaining the design system.
- How to scale code and interaction patterns across platforms and products.
In today's video, I showed & discussed one of the most anticipated topics! "Design System". Here I talked in detail about the concepts and applications.
Taken from Future of Web Design (#FOWD), London 2015 Conference. http://futureofwebdesign.com/london-2015
Reports are in from Twitter, Medium, and the like; we can’t make full comps, use Photoshop, or even utter the phrase 'visual design' anymore. What’s a designer to do? Has our role evaporated? Fear not! Dan Mall will help redefine the tasks of the modern day designer in light of the multi -device world that snuck up on us.
During this Morgenbooster, we will dive into the understanding of digital design systems, and why they have become increasingly popular.
What are they? How do they work? What will you gain from building one? And last, but not least we will take you through a couple of tangible experiences and journeys of building such a system.
Throughout the talk we will be sharing experiences from both a design and development perspective.
And hopefully we will all have the feeling of getting one step closer to a design system, which meets all the requirements in modern digital design. A system where all services, assets and communications are designed from one central place to evoke both emotions in a coherent brand experience and support the functional necessities of today’s dynamic business strategies.
A design system is a scalable framework of decisions & team behaviors spread across an organization so your products can converge on a cohesive experience. Start your plan with a firm understanding of what parts it includes, products it applies to, and people that will do the work.
Design System as a Product - Maria Elena Duenias, Esther Butcher
Design systems are a great example where web development and design meet. You can find innumerable resources on the internet, books and conferences on how to build them, and how they are exactly what your organization needs. But, building one requires a lot more than following a recipe. In this talk we are going to discuss how to build a design system as an internal product, and how it evolves to become what the users need.
Building compelling business cases for Design SystemsLaura Van Doore
This talk was originally presented at Web Directions Summit 2018 in sunny Sydney.
Design Systems have reached peak popularity. It’s no secret that the topic of Design Systems have been an outrageously popular topic over the past few years. Every design team has either built one, is building one, or wants to build one. But it’s not designers who we have to convince when it comes to investing in the build of a design system. Especially if we aren’t lucky enough to be in an organisation where design has a ‘seat at the table’. How can we sell the benefits of a design system with more focus on appealing to upper management, who may not see the same benefits we do?
This talk is aimed primarily at designers, but may also interest product managers, front end developers & other roles core to a product team. It will be of most benefit to those who are either looking to introduce a design system into their organisation, or to bolster their case to increase the business investment in an existing design system. The aim of the session is to equip the audience with the right tools & mindset to effectively sell a design system project to higher levels of business function within their organisation.
In this talk we’ll uncover our journey in creating a Design System for Skyscanner and share our learnings on how we sold it to the business by proving its worth. We’ll talk through some of the design and tech considerations we’ve made and share the tools and techniques which have helped us along the way.
Drew has spent the better part of the last two years leading the charge on launching and managing the global design system at AIG. Learn some of the battle-tested tips, tricks, and methods gained during the process including how to:
- Manage contribution and intake
- Manage “snowflake” vs system components
- Support multiple brands with a single system
- Track and measure the ROI of your system
- Perpetuate buy-in
Bio
Drew Burdick is a multi-faceted design leader with over a decade of experience. He founded and led a creative agency, led top accounts at Red Ventures, and most recently helped to transform product design at AIG by leading a team to establish their global design system. He is now a leader with the Experience Design practice at Slalom, helping to drive client engagements in the Charlotte market.
A design system can vastly improve your team's productivity, but most of all, it leads to better products! The challenge lies in creating a mature system and leading its adoption across the company successfully. Let's talk about how we learned to meet the needs of different designers and developers on different products, on different tech stacks, on different platforms. Attendees will go home with tips they can use to improve design systems of any stage.
Design systems: accounting for quality and scalabilityuxpin
You'll learn:
How Forumone builds and implements design systems for their clients
How to plan, create, sell, and implement a design system
How to use common design tools to build a design system developers will use
Evolving your Design System: People, Product, and Processuxpin
You'll learn:
How to create and maintain a design system over several years
How people, process, and product change alongside a design system
Lessons learned from growing the Linkedin design system
Trying to build a design system for your project? But still, don't know how to? Then this post gonna teach you how to create the design system for the project!
------------------
Follow me on Instagram to learn more about design
https://www.instagram.com/fazurrehman/
------------------
Understand Design System
A Design System is the single source of truth, which groups all the elements that will allow the teams to design and develop a product even there is lots of benefits to having a design system, but you need to find the right people or company who really need design system or you think you really can solve their business problems by design system!
I will continue the design system in the 2nd post and tell you better understanding and road-map how to build a design system. ⠀
Interested to work with me, let's start working together!
fazurrehman@gmail.com
Slides for a few events i was lucky to give a talk this year. From my experiences of building a design system for the product team. Figma and storybook js are introduced.
Let's talk about Design Systems and how they could help you build better products in terms of efficiency, consistency, UX, code quality and accessibility.
Summary:
1. About me
2. Why have one?
3. Design system (fundamentals)
4. How to build a design system (process)
5. Cost and value
6. Inspiration
7. Q&A
Design Systems First: Everyday Practices for a Scaleable Design Processuxpin
You'll learn:
- How to create, adopt, and maintain your first design system
- How to practice a “design systems first” process of product development
- How to build and govern a design systems operations team
Creating and Scaling an Enterprise Design Systemuxpin
You'll learn:
- How to create a unified design language for a complex organization.
- How to use the most efficient processes and tools for maintaining the design system.
- How to scale code and interaction patterns across platforms and products.
In today's video, I showed & discussed one of the most anticipated topics! "Design System". Here I talked in detail about the concepts and applications.
Taken from Future of Web Design (#FOWD), London 2015 Conference. http://futureofwebdesign.com/london-2015
Reports are in from Twitter, Medium, and the like; we can’t make full comps, use Photoshop, or even utter the phrase 'visual design' anymore. What’s a designer to do? Has our role evaporated? Fear not! Dan Mall will help redefine the tasks of the modern day designer in light of the multi -device world that snuck up on us.
During this Morgenbooster, we will dive into the understanding of digital design systems, and why they have become increasingly popular.
What are they? How do they work? What will you gain from building one? And last, but not least we will take you through a couple of tangible experiences and journeys of building such a system.
Throughout the talk we will be sharing experiences from both a design and development perspective.
And hopefully we will all have the feeling of getting one step closer to a design system, which meets all the requirements in modern digital design. A system where all services, assets and communications are designed from one central place to evoke both emotions in a coherent brand experience and support the functional necessities of today’s dynamic business strategies.
A design system is a scalable framework of decisions & team behaviors spread across an organization so your products can converge on a cohesive experience. Start your plan with a firm understanding of what parts it includes, products it applies to, and people that will do the work.
Design System as a Product - Maria Elena Duenias, Esther Butcher
Design systems are a great example where web development and design meet. You can find innumerable resources on the internet, books and conferences on how to build them, and how they are exactly what your organization needs. But, building one requires a lot more than following a recipe. In this talk we are going to discuss how to build a design system as an internal product, and how it evolves to become what the users need.
Building compelling business cases for Design SystemsLaura Van Doore
This talk was originally presented at Web Directions Summit 2018 in sunny Sydney.
Design Systems have reached peak popularity. It’s no secret that the topic of Design Systems have been an outrageously popular topic over the past few years. Every design team has either built one, is building one, or wants to build one. But it’s not designers who we have to convince when it comes to investing in the build of a design system. Especially if we aren’t lucky enough to be in an organisation where design has a ‘seat at the table’. How can we sell the benefits of a design system with more focus on appealing to upper management, who may not see the same benefits we do?
This talk is aimed primarily at designers, but may also interest product managers, front end developers & other roles core to a product team. It will be of most benefit to those who are either looking to introduce a design system into their organisation, or to bolster their case to increase the business investment in an existing design system. The aim of the session is to equip the audience with the right tools & mindset to effectively sell a design system project to higher levels of business function within their organisation.
There is certain topic discussed in every company: communication between departments.
As FE developers, we sit in between UX designers and BE developers.
Our apps must follow the guidelines from the UX, be compatible with the BE APIs while meeting the business requirements from our POs.
In this presentation I am addressing the relationship between UX and FE devs.
One way to collaborate better with our UX colleagues is to… learn a bit of UX and maybe share some Front End knowledge with them too.
How to Use Engineers in a UX DepartmentStephen James
Barbarians at the Gates How to Bring Engineers into Your UX Department in order to Lower Coordination and Transaction Costs and Accelerate Product Development
This is a modified version of a presentation given at an internal UX department offsite meeting for a large technology company back in 2014
As a PO, product designer, or PM, you've probably already thought about the possible benefits of building a design system for your organisation. And surely as all teams, like us, you kept asking yourself:
How do we start it?
But here are some guidelines to help you clarify how to start a DS.
Maximizing Value and Consistency of Experiences with Design Systems - Centerl...Centerline Digital
A convergence of design and marketing has become a necessary means for managing a brand and its offering to consumers. It takes a combined effort to continually provide quality output while also delivering responsiveness at scale at a time when channels, screens, and constant interaction demand more from us as teams. By looking at the convergence through a systematic lens you can expose potential in your efforts, both creatively and organizationally. This presentation explores how a design system can benefit you, and where to get started in building your own design system.
Learn more at http://www.centerline.net
With the adoption of methods based on rapid experiments to validate hypotheses with customers, there is also a need for design to adapt and respond continually. As such, there is a need to balance the decisions taken in autonomy by teams and the overarching service coherency. Inspired by devOps principles, designOps is a practice that aims to support people across the organization to continuously redesign their products without compromising design excellence. This talk, based on the experience of coaching design teams at different levels, explores the possibilities of moving out from heavyweight upfront analyses, reducing handoffs, and creating reliable feedback loops with end users. A new paradigm, where the ability of design is shifting from being a specific practice to genuinely becoming part of everyone’s job. A key component to enables others, designers and non-designers, to create meaningful experiences in a complex environment.
Design Systems: Designing out Waste, Designing in ConsistencyEqual Experts
Design Systems help modern innovative companies build new software quickly without waste and with a consistent look and feel.
They are the single source of truth to allow the teams to design, realise and develop a product.
From our work with Design Systems for Equal Experts' clients we have many learnings to share about benefits and risks and what needs to be overcome to get a system live and adopted.
SPEAKER: David Hawdale. Product and UX person at Equal Experts.
Contact www.equalexperts.com
Contact David: david.hawdale@hawdale-associates.co.uk
PDMA 2008 World Class Web 2.0 Product OrgAdam Nash
This is the presentation from the PDMA 2008 presentation by Adam Nash on "Building a World-Class Web 2.0 Product Organization" from September 15, 2008.
At the beginning of any new design project, the excitement is contagious. Being in the creative field, each team and each team member has countless ideas and different visions for the project. For any creative branding agency to be able to come up with an accurate solution, Design Process is a must.
Each project, especially large-scale projects with a bigger number of deliverables must have a pre-decided methodology which is to be followed.
Everything you need to know about design system.pdfKoru UX Design
Oftentimes, people tend to confuse a design system with a style guide, or even design principles. The truth is that a design system comprises all of these and more.
To know more about how a design system can benefit your product, read our free guide.
The shorter version of these slides was presented at Amuse UX 2015 Special Meetup (Budapest, Hungary) — http://www.meetup.com/UXbudapest/events/225944151/.
Implementing a Design System in a Small Team by SnapTravelProduct School
This session will provide a blueprint for how a team of 2 Designers and 3 Frontend engineers can work together, in a lean way, to build and implement a design system within 6 months while still working on other important company initiatives/features.
Fusionops UX position (richard.goldstein@fusionops.comRich Goldstein
FusionOps is the leader in supply chain analytics. We integrate AI, Cloud, and Analytics to help enterprise wide customers from the shop floor to Finance. Were hiring Sr UI Engineers
Designing for developers, developing for designersNatalia Medina
A interação entre designers e desenvolvedores é essencial na hora de construir um bom produto. Nessa talk falamos um pouco dos dois pontos fundamentais que facilitam a colaboração e possibilitam o compartilhamento de mindset entre designers e desenvolvedores.
____
The interaction between designers and developers is essential to build a good product. We talk about some of the two fundamental points that facilitate collaboration and enable the sharing of mindsets between designers and developers.
P&G Memo: Creating Modern Day Brand ManagementLewis Lin 🦊
Neil H. McElroy's memo on dedicated brand departments at P&G McElory's famous memo which lead to dedicated brand teams at P&G. Also famous for breaking P&G's "one page memo" rule!
Excerpt: Lewis C. Lin's The Product Manager Interview https://amzn.to/2X56Q8O
Includes instructions on how to modify the 30-day guide for Uber & LinkedIn PM interviews
30-Day Facebook PM Interview Study GuideLewis Lin 🦊
Excerpt from Lewis C. Lin's The Product Manager Interview https://interviewsteps.com/products/the-product-manager-interview-167-actual-questions-and-answers
Can AI do good? at 'offtheCanvas' India HCI preludeAlan Dix
Invited talk at 'offtheCanvas' IndiaHCI prelude, 29th June 2024.
https://www.alandix.com/academic/talks/offtheCanvas-IndiaHCI2024/
The world is being changed fundamentally by AI and we are constantly faced with newspaper headlines about its harmful effects. However, there is also the potential to both ameliorate theses harms and use the new abilities of AI to transform society for the good. Can you make the difference?
Dive into the innovative world of smart garages with our insightful presentation, "Exploring the Future of Smart Garages." This comprehensive guide covers the latest advancements in garage technology, including automated systems, smart security features, energy efficiency solutions, and seamless integration with smart home ecosystems. Learn how these technologies are transforming traditional garages into high-tech, efficient spaces that enhance convenience, safety, and sustainability.
Ideal for homeowners, tech enthusiasts, and industry professionals, this presentation provides valuable insights into the trends, benefits, and future developments in smart garage technology. Stay ahead of the curve with our expert analysis and practical tips on implementing smart garage solutions.
You could be a professional graphic designer and still make mistakes. There is always the possibility of human error. On the other hand if you’re not a designer, the chances of making some common graphic design mistakes are even higher. Because you don’t know what you don’t know. That’s where this blog comes in. To make your job easier and help you create better designs, we have put together a list of common graphic design mistakes that you need to avoid.
Expert Accessory Dwelling Unit (ADU) Drafting ServicesResDraft
Whether you’re looking to create a guest house, a rental unit, or a private retreat, our experienced team will design a space that complements your existing home and maximizes your investment. We provide personalized, comprehensive expert accessory dwelling unit (ADU)drafting solutions tailored to your needs, ensuring a seamless process from concept to completion.
Book Formatting: Quality Control Checks for DesignersConfidence Ago
This presentation was made to help designers who work in publishing houses or format books for printing ensure quality.
Quality control is vital to every industry. This is why every department in a company need create a method they use in ensuring quality. This, perhaps, will not only improve the quality of products and bring errors to the barest minimum, but take it to a near perfect finish.
It is beyond a moot point that a good book will somewhat be judged by its cover, but the content of the book remains king. No matter how beautiful the cover, if the quality of writing or presentation is off, that will be a reason for readers not to come back to the book or recommend it.
So, this presentation points designers to some important things that may be missed by an editor that they could eventually discover and call the attention of the editor.
Unleash Your Inner Demon with the "Let's Summon Demons" T-Shirt. Calling all fans of dark humor and edgy fashion! The "Let's Summon Demons" t-shirt is a unique way to express yourself and turn heads.
https://dribbble.com/shots/24253051-Let-s-Summon-Demons-Shirt
3. Index
The Challenges Facing Product Teams Today 5
Conclusion7
Enter the Design System 8
The Single Source of Truth 9
The ROI of Design Systems 9
Building the Design System 11
Recommended Resources 17
4. Marcin Treder
Since co-founding UXPin in 2010, he has helped build and lead prod-
uct teams in the Poland and Silicon Valley office. Previously, he was a
UX Manager at Grupa Nokaut, an enterprise ecommerce platform. He
holds an M.A. in Psychology from the University of Gdansk.
Jerry Cao
Jerry Cao is a content strategist at UXPin where he gets to put his over-
ly active imagination to paper every day. In a past life, he developed
content strategies for clients at Brafton and worked in traditional ad-
vertising at DDB San Francisco. In his spare time he enjoys playing elec-
tric guitar, watching foreign horror films, and expanding his knowledge
of random facts. Follow me on Twitter
Authors
5. The Challenges Facing
Product Teams Today
As a product team grows, its processes become more difficult to
manage.
Without a standardized workflow or toolkit, the team’s inefficiencies
and inconsistencies will eventually work their way back into the
product.
Software is often built by incredibly large teams of people. The
challenge to create coherent experiences multiplies exponentially
as more people are added to the mix. Over time, no matter how
consistent or small a team is, different people will contribute new
solutions and styles, causing experiences to diverge.
Building a Visual Language, Karri Saarinen,
Principal Designer and creator of Airbnb design system
Based on working with thousands of customers around the world,
we’ve seen four patterns emerge through the years.
6. The Challenges Facing Product Teams Today 6
1. Inconsistencies across products and platforms
UX inconsistencies reduces the user’s efficiency, which devalues
the product.
Especially common in enterprise products that span different
technology stacks, devices, and user groups, product inconsistency
is nearly impossible to resolve until the company’s workflows are
first addressed.
2. Lack of centralized assets leads to version control issues
Because different design teams use different tools that don’t always
integrate, nobody can truly guarantee that the right assets are all
being used in projects at any given time.
If the tools are desktop-based, version control issues become even
more of a pain. Designers must follow a strict naming convention,
otherwise the wrong assets will eventually make it to development.
3. Widening knowledge gaps between product teams
Without a “golden source” of assets and best practices, different
teams work off different guidelines and assumptions. Over time,
product inconsistency is inevitable.
4. Inefficient processes lead to repetitive or wasted work
Without a common toolkit for design and development, one-off
solutions and repetitive work drain a team’s efficiency.
7. The Challenges Facing Product Teams Today 7
Iteration cycles planned for 1-2 weeks may require 2-3x the time
because designers find themselves creating common elements and
pages from scratch. The inefficiency multiplies as designers redline
those assets for handoff and developers code up new solutions.
Conclusion
All of the above pain points are interconnected.
To improve product consistency and team efficiency, it helps to con-
solidate assets and workflows between designers and developers.
Otherwise, the ongoing pain of unscalable design remains the reality.
When I joined Spotify’s design team in 2012, the level of incon-
sistency and fragmentation shocked me. Up-close, the treatment
of type, colour, imagery, layout, IA, and interactions just didn’t
seem to align anywhere. We concluded the fragmentation in the
product was just reflecting the fragmentation in the team, that
designers spread across so many different projects, timezones
and competing timetables, just didn’t stand a chance.
Design Doesn’t Scale, Stanley Wood, Design Director at Spotify
8. Enter the Design System
Popularized by companies like Salesforce and Airbnb, design sys-
tems give product teams a reusable, component-based approach to
product development.
A design system can create value on at least two levels. At the
team level, it can create a more streamlined, predictable process
that reduces design and engineering time. At the UX level it helps
deliver consistency and predictability in the interface, and to
raise the quality of the experience overall when designers and
engineers are freed up to think about higher-order tasks.
Selling Design Systems At Your Company,
Nick Stamas, Creative Lead at WeWork
9. Enter the Design System 9
The Single Source of Truth
A design system is more than just a style guide or pattern library – it’s
the blueprint for product development.
All the design principles, visual assets, and patterns are thoroughly
documented. All code references are included for each piece of design.
As a result, design can scale right alongside development.
The ROI of Design Systems
1. Increased velocity and time to market
A component-based toolkit accessible in one place allows for a
more chunked-out Agile process, speeding up releases without
compromising quality.
10. Enter the Design System 10
2. Increased product value
Reusable components build upon each other, which creates a
consistent look, feel, and behavior to the product. As consistency
increases, so too does user efficiency.
3. Increased collaboration and knowledge sharing
Because the shared design system includes approved assets and
conventions, designers and developers are more autonomous
without closing off into silos.
4. Less time and money wasted
Because designers and developers aren’t caught up in redundant
questions or repetitive work, they’re freed up for projects that
deliver more business value.
An estimated $1.5MM+ in annual savings or 21.25% time saved
for a typical product development annual budget (based on on-
shore/offshore team of 100 resources)
What Is a Design System and What Are It’s Benefits?
Projekt 202
11. Building the Design System
Here’s the simple truth: you can’t innovate on products without
first innovating the way you build them.
The Way We Build, Karri Saarinen,
Principal Designer and creator of Airbnb design system
1. Create your interface inventory
To quickly identify current inconsistencies, start by creating an
inventory of everything in your product UI: color palette, text
styles, and UI patterns. The inventory is your strongest tool for
selling the need for a design system.
1. Review the interface and code and list all the colors and text-
styles you can find.
2. Take screenshots of UI patterns or copy patterns from your
projects. Place all the screenshots in one place.
12. Building the Design System 12
3. Categorize your patterns by their purpose (e.g. buttons, form-
fields, navigation etc).
4. Mark inconsistencies between the patterns and create a pre-
sentation for your team.
2. Get buy-in from the team
As you present the inconsistencies reflected in your interface in-
ventory, emphasize the ROI of the design system.
Engineers respond well to the source control, improved modu-
larity, and increased autonomy. Business stakeholders respond
well to the faster time to market, increased product value, and
less resources wasted.
13. Building the Design System 13
3. Define your design principles
Before you build your new system, create a set of general prin-
ciples for a coherent experience. What universal values should
designers to keep in mind?
Photo credit: The design principles behind Salesforce Lightning
Use your principles as a review heuristic for every new pattern
proposed for the design system and every new project.
14. Building the Design System 14
4. Unify your visual design
Think about the most fundamental and repetitive patterns in your
interface.
Colors, text-styles, icons will probably come to mind first. Perhaps
also some interactive patterns (hover on clickable elements), border
visual properties, or maybe animations? Discuss with the team to
decide which version of these elements will be canonical. Then,
document them as part of the system.
Photo credit: Our internal design system created in UXPin.
5. Create your interactive component library
Once you have the foundation well-defined, start adding your
approved interface patterns to the shared library. Keep them up-
dated and encourage the team to use them in every subsequent
project - your efficiency and consistency will improve drastically.
15. Building the Design System 15
Finally, plan a process of suggesting new patterns to make sure
that everyone in the product team has a say in the evolution of
the design system.
Photo credit: An interactive design systems library in UXPin
16. DESIGNSYSTEMS
Design Systems in UXPin
One platform for consistent design and development.
Modular design
and development
Scale quickly with design system
libraries.
One source of truth
for everyone
Close your knowledge gaps.
Formalize your design and code
conventions.
Painless documentation
and developer handoff
Eliminate busywork. Generate style
guides, specs, and documentation.
Design Language
Sync Sketch with UXPin for
a consistent design language: fonts,
colors, icons, assets, and more.
UI Patterns
Scale designs consistently with
Symbols and interactive components.
Automated Documentation
Documentation syncs everywhere
and travels with library elements.
My productivity and developer productivity have both increased.
They love that they can collaborate and move quickly to a powerful
experience.Tracy Dendy
HBO
To book a demo, call +1 (855) 223-9114 or email us at sales@uxpin.com
17. Recommended Resources
Nathan Curtis
Design Systems Leaders and Managers
The Principles of Designing Systems
What Will Your Design Systems Deliver?
Contributions to Design Systems
Component QA in Design Systems
Patterns ≠ Components
Light Dark Color Systems
Reference Designs for Systems
Tokens in Design Systems
Buttons in Design Systems
Color in Design Systems
Picking Parts, Product, and People: A Team Activity to Start a Design System
Right-Sizing the Rectangle: Grappling With Hierarchy in Design Systems
A Design System Isn’t a Project, It’s a Product Serving Products
Reduce, Reuse, and Recycle
A Design System’s Reach
The Component-Cut Up Workshop
Balancing Platforms in a Design System
Brad Frost
Atomic Design: The Online Guide
18. Recommended Resources 18
Dan Mall
Researching Design Systems
Selling Design Systems
Cooking With Design Systems
WeWork
Selling a Design System at Your Company
The Plasma Design System
Salesforce
Living Design Systems
The Lightning Design System is the Next Generation of Living Style Guides
Introducing Design System Ops
React JS and the Lightning Design System
Airbnb
Design Ops at Airbnb
Building a Visual Language
The Way We Build
Spotify
Design Doesn’t Scale
GE
The Predix Design System
Intuit
Intuit Design System Overview
19. Recommended Resources 19
Bottomline Technologies
Creating and Scaling Enterprise Design Systems
Beautiful Seams: Creating a Coherent Experience Across Products
Other
How to Construct a Design System
Design Systems in 2016
The Current State of Design Systems
Design Systems and Postel’s Law
How Designers Can Use Unit Testing to Build Resilient and Happy Design
Systems
What is Design Operations and Why Should You Care?
Component Workshops: Our One-Two Punch for Kicking Off a New Design
System
Object-Oriented UX
The Most Exciting Design Systems Are Boring
The Full-Stack Design System