Design Systems: Brand experiences at scale.

Design doesn't scale, and capability required to scaling it won't happen magically.
I have put together a point of view on Design System. In bringing it together, I had two types of audiences in mind. Design leaders and practitioners, who want practical insights to advance design in their organisations and product executives, innovation leaders, and business owners, who are looking for ways to amplify and accelerate the digital transformation they're leadings.
I hope you will enjoy it.

Transcript

1. HIAMF® Design Systems Meaningful, relevant and truly personal brand experiences at scale. DS
2. HIAMF®
3. HIAMF® Heartache of design. 1 Scale
4. Do we have any of these challenges or aspirations? 1. Expensive design debt 2. Lack of brand consistency 3. Fragmentation across products 4. Speed and scale product design 5. Decrease maintenance 6. Design mature organisation
5. Brand Brand Product Corporate Marketing Voice Physical Website Native apps 01 Promotion Intranet … 8 Brand 02 5 Brand 03 3 Brand 04 9 Sales Public Relations Brand 01 6 S 01.1 S 02.2 S 01.2 S 02.2 Brand 2018 2016 2017 2018 2019 2009 2019 2019 2019 Across an enterprise, disparate systems can arise separate by myriad boundaries of teams, organization units, and platforms. While distinct systems, outsiders assume they share a common visual language inherited from Brand, inventory reveals massive discrepancies. If you’ve worked at a company of any scale, you’ve lived something like this. Large banking example: System divisions across lines of business
7. HIAMF® In other words How does a team of distributed designers, spread across different time-zones, projects and competing objectives ever find a way to work together?
8. Experience branding process meets design systems P P P P P P P SP SP SP SP SP Brand SP SP SP SP SP SP SP SP SP P SP SP DS P Product SP Sub Product DS Design System
9. HIAMF® System But what on earth is a design system? 2
10. HIAMF® Design /dɪˈzʌɪn/ —The art of creating and arranging imagery, shapes, and colours to create something visually appealing and/or functional. System /ˈsɪstəm/ — A series of things working together in harmony; a complex whole.
11. HIAMF® Isn’t design system just another name for brand guidelines? Wait a minute!
12. Design System base products 1. Open 2. Environment 3. Dynamic 4. Collaboration 5. Problem-solving Design Guidelines base products 1. Closed 2. Handing off 3. Static 4. Conformity 5. Limited feedback
13. Design System base products Design Guidelines base products Product’s complexity Time Area of time when the guidelines are valid Design debt Product’s complexity Time Area of time when the guidelines are valid DS 01 DS 02 DS 03
14. HIAMF® Why are design systems so Important? Experience 3
15. HIAMF® At its core, a design system is a culmination of people, processes, and shared assets that work together in order to unify products, negotiate and align cross-team communication, increase efficiencies, and reduce maintenance cost.
16. Functional Foundational Vs.
17. Design System maturity Level 1 No system Level 2 Style guide Level 3 Pattern Library Level 4 Design System Level 5 Adv. Design System • Bespoke design & code • No reusable concepts • Colors, typography • Style HTML samples • Bespoke code • Reusable styles • Share vocabulary • Lightly documented • External to codebase • Reusable components • Mostly documented • Integrated with codebase • Well maintained • Core part of workflows • Fully documented system • Dedicated team/resourcing • Full governance integrated • Detailed roadmap
18. HIAMF® Experience at scale
19. HIAMF® The Way We Build Human interface guidelines Atlassian Design Carbon: IBM Design Language A bold new brand awaits Audi’s design system
20. HIAMF®
21. HIAMF® As a general rule The bigger the product portfolio, the more necessary a design system is.
22. HIAMF® System outcomes
23. 36 Faster to market, for new features and products % 1. Efficiency Efficient team workflow & communication across product verticals.
24. 42 Less ongoing maintenance cost for the business % 2. Maintainability Easier to test and maintain code.
25. 18 Less support requests, resulting in one less person per support team % 3. Consistency A consistent user experience & interface across products & devices.
26. 12 Potential user-base increase, unlocking further revenue streams % 4. Accessibility Baked in accessibility, to create more inclusive products.
27. 5 A stable foundation that will support the next 5 years of feature growth Years 5. Scalability Knowing that we won’t need to knock back key feature requests in the future.
28. HIAMF® Building your first Design System. from scratch to production. Create 3
29. HIAMF® Challenge How to create millions of unique experiences that combine human needs and technology, while staying true to the brand’s core values, promise, and purpose?
30. HIAMF® Every design system is different and unique to every organization. • Interviews and surveying a broader (potential) contributors, influencers and leaders to assess perspective, attitudes, culture, and existing practices. • Requirements gathering via task analysis, tech planning, and convention setting. • Product tours to immerse in as-is products and in-flight designs to which the system will apply, taking screenshots and notes. • System(s) reviews assessing as-is design assets, code libraries, standards documentation depth and quality, and governance models. Month Planning and Strategy Discovery Concepts 1 1.0 Release Circle • Defining what a design system is and why it’s important. • Proposed scope, timing, products and processes included in 1.0 release, subsequent product adoption and support, and system development and maintenance that follows (the how and when). • Recommended multi-disciplinary system team composition and how they’ll engage contributors and decision-makers (the who). S1 2 S2 S3 S4 S5 S6 3 4 0.1 Alpha 0.3 Beta Simpler libraries can take 2–3 months while robust component catalogs — flexible theming, sophisticated tooling, robust documentation — may take a couple months longer. By the cycle’s end, the 1.0 represents the “big launch” you publicise is generally available to product squads at the ready. 0.1 General availability “Big launch” 5
31. HIAMF® Design methods help define a system that ensures that the Brand values trickle down consistently to all end-user experiences. Define technology and development infrastructure, and design execution standards. This will make for a strong implementation foundation. Apply design system for quicker and highly efficient development, consistent and unified design, and an impeccable, harmonised end-user experience. Easier and more efficient management, updates and scaling across several products. Year 1 Strategy Release 1.0 Quarterly Cycle Quarterly Cycle Quarterly Cycle Quarterly Cycle Q1 Q2 1.0 2.0 Q3 Q4 Q1 Q2 Year 2 Operate Beyond the 1.0 Release.
32. HIAMF® Design is not style. It’s not about giving shape to the shell and not giving a damn about the guts. Good design is a renaissance attitude that combines technology, cognitive science, human need, and beauty to produce something that the world didn’t know it was missing. Paola Antonelli
33. HIAMF® I’d love to work with you and your team. design@helloiamfran.com Thanks