Secrets to a successful design system

Transcription

1 Secrets to a successful design system 2018 Monica Lent Lead Frontend Engineer at SumUp

2 Defining success! Why & What? Secrets to a successful design system SumUp. A better way to get paid

3 Blockchain Design systems Docker Hooks GraphQL Serverless ReasonML Is it hype or is it helpful?

4 Alignment Efficiency Cross-platform UI Consistency Scalability Maintainability Single source of truth Design systems solve a real problem Re-inventing the wheel Change process Accessibility Clear standards Governance

5

6

7 Merchant application Partner Portal Marketing Website

8 A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications. - Will Fanguy, Invision

9 Elements of a design system Ideas Patterns Forms Language Artifacts Component library Documentation Tools Process

10 Elements of a design system Design System Design ideas & artifacts that can evolve together over time

11 Secrets to a successful design system

12 Responsibility & ownership Sheer time investment What goes in it? Component APIs Change management Communication Design systems are hard Documentation Testing Long-term maintenance Releasing Impact of regression Production support Deprecation

13 Lifecycle of a design system ) Idea Prototype Prod Maturity

14

15 What s the value proposition of a design system? Delivers value directly to the user Lines of code Delivers value directly to the user? Web app Website Design system

16 What are our challenges? How can developers help?. Thinking like a CEO

17 2,000+ CEOs and developers 6 countries

18 . How threatening are the following factors to the success of your business? Security / data breach 66% Increased regulation 62% Inconsistent UI suspiciously missing Disruption from tech industry Growing competition from China 62% 61%

19 . How much of an impact can developers have to help your company with each of the following challenges? Bring products to market faster 71% Increasing sales 70% Differentiating products / services 69% Internal reporting / visibility 65%

20 . productivity How much of a priority is it for upper management to increase the of its developers? High / medium 96% Not at all / low priority 3%

21 SECRET #1 Design systems are about productivity Consistency is a side effect SumUp. A better way to get paid

22 Let's imagine you have buy-in

23 *lots of things* ) Idea Prototype Prod Maturity

24 Picking your tech stack

25 Look at what you already have React JS Javascript view library Next JS React server-side rendering framework Elm Compiles to Javascript Jekyll Static-site generator Riot JS React-like microframework Ruby on Rails Traditional web app Marketing cloud s & landing pages

26 SECRET #2 The world is bigger than React You have to plan for it SumUp. A better way to get paid

27 Design tokens Platform-agnostic data that store visual data attributes TOKEN DATA (JSON) Web { } "color": { "b100": "#DAEAFF", "b300": "#7FB5FF", "b500": "#3388FF", "b700": "#2567D8", "b900": "#1641AC", } ios Token JSON Token as XML Android Token as SCSS

28 Static CSS library Compatibility layer between React Utopia and the rest of the world import { Tag } ; React apps <Tag selected onremove={fn}> Transactions </Tag> <link rel= stylesheet href= circuit-ui.1.0.css > Plain CSS <span class= tag tag--selected onclick= myfn > <span class= tag content > Transactions </span> </span>

29 ) Idea Prototype Prod Maturity

30 App 1 App 2 Your design system

31

32 What happened?

33 SECRET #3 A design system is a dependency Even if you control it SumUp. A better way to get paid

34 Change management in design systems Deprecate gradually and communicate in code and docs Define and test (ideally automate) the critical path in your apps Use canary builds to release in a shared env before production

35 ) Idea Prototype Prod Maturity

36 There be bugs in that code

37 The real cost of software is not the initial development, but maintenance over time

38 Team models for design systems SERVICE TEAM INNER SOURCE Maintainers Team DS DS User Contributor

39 SECRET #4 Collaboration is key to long-term quality Organize in a way that scales SumUp. A better way to get paid

40 the world is bigger than React design systems are about productivity treat What we ve learned so far a design system like a dependency collaboration is key to long-term quality

41 How will we know we ve Just ask! succeeded?

42 Pick your KPIs 3 Speed Quality Ease of Contribution Completeness

43 1 1 MEASURING QUALITY 3 3 Strongly agree Agree Neutral Disagree Strong disagree 8 Circuit makes it easier for me to implement or design a high-quality user interface"

44 2 MEASURING SPEED 2 9 "Circuit helps me implement or design features more quickly" Strongly agree Agree Neutral Disagree Strong disagree

45 SECRET #5 Design systems are about people Their success is the system's success SumUp. A better way to get paid

46 Progress over perfection

47 Thank you!