HIAMF® Design Systems Meaningful, relevant and truly personal brand experiences at scale. DS

HIAMF®

HIAMF® Heartache of design. 1 Scale

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

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

No content

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?

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

HIAMF® System But what on earth is a design system? 2

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.

HIAMF® Isn’t design system just another name for brand guidelines? Wait a minute!

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

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

HIAMF® Why are design systems so Important? Experience 3

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.

Functional Foundational Vs.

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

HIAMF® Experience at scale

HIAMF® The Way We Build Human interface guidelines Atlassian Design Carbon: IBM Design Language A bold new brand awaits Audi’s design system

HIAMF®

HIAMF® As a general rule The bigger the product portfolio, the more necessary a design system is.

HIAMF® System outcomes

36 Faster to market, for new features and products % 1. Efficiency Efficient team workflow & communication across product verticals.

42 Less ongoing maintenance cost for the business % 2. Maintainability Easier to test and maintain code.

18 Less support requests, resulting in one less person per support team % 3. Consistency A consistent user experience & interface across products & devices.

12 Potential user-base increase, unlocking further revenue streams % 4. Accessibility Baked in accessibility, to create more inclusive products.

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.

HIAMF® Building your first Design System. from scratch to production. Create 3

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?

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

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.

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

HIAMF® I’d love to work with you and your team. design@helloiamfran.com Thanks