Upload
others
View
2
Download
0
Embed Size (px)
Citation preview
The Power of Design Systems
Building bridges, not walls.
Cătălina Manea
*insert description here*
What We Will Cover
“What" - A Brief History / What is a Design System / Design Systems Today“Why & Where” to Begin the Design System Process "When” - When & If a Design System is Needed“Who” - Audience and Stakeholders“How" - Components/Tools/Process“What” is Next? Takeaways & Next Steps
1400 1919 1922 1927 1963 1980
MovableType
WilliamAddison&GraphicDesign
FuturistManifesto
Bauhaus
IvanSutherland&Sketchpad
TheArtofProgramming
Bookdesignwasacraftprimarilyfocusedonreadability.
TheBauhausschooltookamodernist
approachtotheunification
ofartsandcraft.
Designingbooks,asacombination
oftypesetting,illustrationanddesign.
AgroupofItalianartistssworeoffthetraditionalarts,
andinsteadsoughttovisualizethefuture,technologyandtheindustrialrevolution.
Computationaldesigntool.
Manipulationofgeometricshapesonthescreenbyusinga
light-pen. AdobeDirectorandthe
programminglanguageLingo.
Brief Timeline
Beyond Pattern Libraries, Atomic Design, Material Design
Design Systems Today
A Look at the Data
Yes57%
No 43%
Do you know what a dedicated Design System team is?
Yes14%
No 86%
Have you ever been part of a Design System team?
When was the first smart phone made?
• 1984• 1992• 1998• 2002• 2010
Design System;
A set of defined things that you then share within the company. People know they exist and can use them to achieve their goals and the common user goals
A series of components that can be reused in different combinations. Design systems allow you to manage design at scale & they are integrated in the product development workflow
A product that supports the products at your company• Goes through phases of maturity as it becomes more complex• Goes through a process similar to the SDLC• Needs to go through ideation, launch and maintainability
Design System PrinciplesCommon language for the elementsGuidelinesWorkflowsCorporate Style GuidePattern Library with codeCommunication mediums
Wireframes7%
Mocks27%
Style Guides13%
Design Patterns/Elements
20%
Code 33%
What Does a Typical Design System Include?
Identify the problemWhen to implement a Design SystemIdentify the stakeholdersDocument current stateGet buy-InDefine your Design System Principles (think big picture)Define methods of communication (tools)Establish an MVDS & create a roadmap Iterate & improve
Why & Where to Begin
Tech debt & design debtInconsistenciesMore time spent on writing code & duplicated codeUser Experience issuesLack of processLack of communication & collaboration
Identify the Problem – Do You Need a Design System?
Yes29%
No 14%
In Process57%
DoyouhaveadefinedDesignSystem?
A Look at the Data
Stages of a Design System
System for Efficiency
System for Consistency
System for Optimization
IdeateBuild Internal EfficienciesFocus on Output
Get Buy-InROI FocusClear AlignmentCommunication Tools
MaintainAdaptImprove
External Users – users that interact with a company’s applications on a daily basis to accomplish their goals; designing for the users;
Internal Users – users that impact the system and that interact with it at different levels;Developers;QA;Managers and Associate Managers;Product Managers and Product Owners;UX/UI team;
15
Audience & Key Stakeholders
1-3 14%
4-7 29%
8-12 57%
UX 43%
Dev 14%
Group Effort
(UX, UI, Dev)43%
Early67%
Late 33%
1927
When are Devs involved in the design process?Who maintains the Design System?Size of UX team
A Look at the Data
Document Current StateForshortterm&longtermpurposes
Interfaceinventory&heuristicevaluations
Educate & demonstrate the power of UXKeep the stakeholder in mindRun a beta/pilotMeasure success to prove concept Communicate, communicate & communicate!
18
How to Get Buy-In?
“People don't buy what you do; they buy why you do it." What's your 'Why'?
-Simon Sinek
Establish the MVDS
Short term vs long term goals… because we can’t solve for everything.
Define Your Design System Principles
Design principles must support the larger purpose of the product and help express the product’s ethos.
Here is when everyone must come together, not just UXWho are your principles written for? Who is your audience? Overarch the company’s values or a product visionWork on how design principles contribute to that larger goalTest and evolve the principles
Sketch22%
InVision22%
Git 17%
DSM 17%
NPM 17%
Bootstrap5%
SoftwaretoolsusedintheDesignSystem
A Look at the Data
How to Measure Success?
Adoption & utilization of the Design SystemAnalytics & researchROI (tech debt, project cost/time, etc.)Feedback
ConsumeReduceRecycleEvolve
Iterations, Iterations, Iterations …
Design System Pain-Points
32
No time26%
No buy-in16%
Adoption5%Maintainability
11%
Funding/Budget21%
Others Don’t'Understand It/Awareness
21%
Bridge the communication gaps between departments
Have a Common Language
Simplify process vs. complicate it
Have & create a seamless user experience
Library of elements is not enough
Keep it transparent
Think modular (consistency at the enterprise level)
Don’t let the tool/system define your requirements
Don’t build for a particular platform - keep it abstract
Primitives First (Thanks AirBnb)
01
02
03
04
05
06
07
08
09
10
Takeaways
11
12
Don’t stun creativity
Make it fun for everyone
Resourceshttps://hackernoon.com/building-cross-platform-applications-with-a-universal-component-library-e6292ca9a15
https://airbnb.design/events/when-we-use-systems/
https://airbnb.io/projects/ruby/
https://www.invisionapp.com/inside-design/3-lessons-learned-history-design-systems/
http://bradfrost.com/blog/post/atomic-web-design/
https://www.depalmastudios.com/blog/what-is-a-design-system
https://www.figma.com/blog/state-of-design-systems-2018/
https://current.innovatemap.com/wisdom/on-the-current-state-of-design-systems/
https://designsystemsrepo.com/tools/
https://medium.com/ux-power-tools/the-path-to-design-system-maturity-d403daba692a
https://medium.muz.li/design-principles-behind-great-products-6ef13cd74ccf
https://medium.com/tradecraft-traction/eight-things-you-need-to-know-about-design-systems-bae8bd884b3b
https://medium.com/eightshapes-llc/a-design-system-isn-t-a-project-it-s-a-product-serving-products-74dcfffef935
http://assets.runemadsen.com/classes/programming-design-systems/a-history-of-design-systems/index.html
http://designsystemsbook.com/
-Thank [email protected]
Appendix
Group Exercise
Company Profile: Tech Start-UpProduct: Indoor GPS Software Goal: Help users find locations/exhibits (ex: Airports, Malls, Museums, Hospitals)
Instructions:Form into groups of 4-6Create 5 sentences that explain what your Design System does and what problem it is trying to solveYour principles should be simple and easy to understand (any outsider should be able to understand them)
CreateDesignSystemPrinciples