the power of design systems - uxpa cleveland

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 you.catalina.ruxandra@gmail.com

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