Adapting a Component Library for Better Adoption

Developing a UI component library for a large organisation with many different products is a challenging endeavour. A good system will strike the right balance between consistency and flexibility and will afford developers efficiency and quality. These are characteristics difficult to get right up front.

At the ABC, we are continually iterating our component library to improve a key measure of success: adoption. We want teams to want to use it! This talk will discuss some of the challenges we’ve faced, how we approach trying to find the right level of component granularity and cover some illustrative examples of the changes we’ve made to get more developers of ABC digital products on board.

Transcript

1. Adapting a component library for better adoption
3. Design system vs code What it does vs what it is Single responsibility principle
6. Design Language System
15. " Is Does vs
16. Animal .poop() Dog .bark() Cat .meow()
17. Animal .poop() Dog .bark() Cat .meow()
18. Robot .drive() CleaningRobot .clean() KillerRobot .kill() KillerRobotDog .bark() Animal .poop() Dog .bark() Cat .meow()
19. Robot .drive() CleaningRobot .clean() KillerRobot .kill() KillerRobotDog .bark() Animal .poop() Dog .bark() Cat .meow() KillerRobot .kill()
20. Robot .drive() CleaningRobot .clean() KillerRobot .kill() KillerRobotDog .bark() Animal .poop() Dog .bark() Cat .meow() KillerRobot .kill() KillerRobotDog .bark()
21. Robot .drive() CleaningRobot .clean() KillerRobot .kill() KillerRobotDog .bark() Animal .poop() Dog .bark() Cat .meow() KillerRobot .kill() KillerRobotDog .bark()
23. Hero Regular Compact
24. Desktop Tablet Mobile
25. Desktop Tablet Mobile
26. Desktop Tablet Mobile
27. type Props = {| className?: string, title: string, articleLink: string, description: string, duration?: number, published?: { labelDate: string, prefix?: string }, altText?: string, desktop?: CardVariants, mobile?: CardVariants, tablet?: CardVariants, imgSrc?: string, srcSet?: Array<string>, imgRatio?: ImgRatio, topic?: string, topicUrl?: string, lazyLoad?: boolean |};
28. type Props = {| byLine?: string, className?: string, contentSource: string, contentType: string, contentCardFooter?: { hideFirst?: boolean, hideSecond?: boolean }, contributors?: Array<Author>, contentUri: string, recipeid?: string, title: string, articleLink: string, description: string, docType?: DocTypes, duration?: number, keywords?: Array<string>, published?: { labelDate: string, prefix?: string }, altText?: string, isDark?: boolean, desktop?: CardVariants, mobile?: CardVariants, tablet?: CardVariants, hideFooter?: boolean, imgSrc?: string, overlay?: boolean, srcSet?: Array<string>, site?: { title?: string }, imgRatio?: ImgRatio, topic?: string, topicUrl?: string, variant?: 'regular' | 'hero' | 'secondHero', lazyLoad?: boolean
29. • author links • document types • topics • meta information • recipes • dark mode • analytics $
32. type Props = {| byLine?: string, className?: string, contentSource: string, contentType: string, contentCardFooter?: { hideFirst?: boolean, hideSecond?: boolean }, contributors?: Array<Author>, contentUri: string, recipeid?: string, title: string, articleLink: string, description: string, docType?: DocTypes, duration?: number, keywords?: Array<string>, published?: { labelDate: string, prefix?: string }, altText?: string, isDark?: boolean, desktop?: CardVariants, mobile?: CardVariants, tablet?: CardVariants, hideFooter?: boolean, imgSrc?: string, overlay?: boolean, srcSet?: Array<string>, site?: { title?: string }, imgRatio?: ImgRatio, topic?: string, topicUrl?: string, variant?: 'regular' | 'hero' | 'secondHero', lazyLoad?: boolean
34. Yeah, nah.
35. %
37. Design system:
 a set of connected patterns and shared practices, coherently organised to serve the purposes of a digital product Pattern library: a tool to capture, collect and share design patterns and guidelines for their usage
38. Design System !== Component Library
39. Abstract pieces
40. Design system
41. Design system Component library
42. Is Does card layout icon position heading styles wrapper + border
44. type positions = 'top' | ‘left' | 'right';
45. type positions = 'top' | ‘left' | 'right'; type imagePosition = { mobile: positions, tablet: positions, desktop: positions };
46. @media (--upto-mobile-max) { .mobile-image-left {...} .mobile-image-right {...} .mobile-image-top {...} } @media (--between-tablet-min-max) { .tablet-image-left {...} .tablet-image-right {...} .tablet-image-top {...} } @media (--from-desktop-min) { .desktop-image-left {...} .desktop-image-right {...} .desktop-image-top {...} }
47. <CardLayout />
48. <CardLayout image={data.image} > {data.content} </CardLayout>
49. <CardLayout image={data.image} imagePosition={{ mobile: 'right', desktop: 'top' }} > {data.content} </CardLayout>
50. Desktop Tablet Mobile <CardLayout image={data.image} imagePosition={{ mobile: 'right', desktop: 'top' }} > {data.content} </CardLayout>
51. Single responsibility principle
52. <CardLayout /> <CardHeading /> <CardMediaIndicator /> <CardBox /> image position hover and focus styles icon position wrapper with border
53. <CardBox border> <Link> <CardLayout imagePosition={{ mobile: 'top' }} > <CardHeading /> </CardLayout> </Link> </CardBox>
54. <CardBox border> <Link> <CardLayout imagePosition={{ mobile: 'top' }} > <CardHeading /> <Text cardBody /> </CardLayout> </Link> </CardBox>
55. <CardBox border> <Link> <CardLayout imagePosition={{ mobile: 'top' }} > <CustomTopicTag /> <CardHeading /> </CardLayout> </Link> </CardBox>
56. <CardBox border> <Link> <CardLayout imagePosition={{ mobile: 'right' }} > <CardHeading /> </CardLayout> </Link> </CardBox>
57. <CardBox border> <Link> <CardLayout imagePosition={{ mobile: 'right' }} > <CardHeading /> </CardLayout> </Link> <CategoryLink> </CardBox>
58. <CardMediaIndicator iconPosition={{ mobile: 'strip' }} > <TheImage /> </CardMediaIndicator>
59. <CardMediaIndicator iconPosition={{ mobile: 'strip', desktop: 'corner-overlay' }} > <TheImage /> </CardMediaIndicator>
60. <CardBox border> <Link> <CardLayout imagePosition={{ mobile: 'right',
 desktop: 'top' }} image={ <CardMediaIndicator iconPosition={{ mobile: 'strip', desktop: 'corner-overlay' }} > <TheImage /> </CardMediaIndicator> } > <CardHeading /> </CardLayout> </Link> <CategoryLink> </CardBox>
62. Design system !== component library Build what it does, not what it is Do one thing and do it well Partial adoption is better than zero
64. Thank you YouTube: Fun Fun Function Book: Design Systems Book: Coders at Work Photo by Josh Rose on Unsplash Photo by 
 twinsfisch on Unsplash Photo by Vadim Sherbakov on Unsplash Photo by Valentin Jorel on Unsplash Spot image via Mac Observer Article: Composing Components Article: Atomic Design Images References Fonts ABC Sans Colour palette Menlo Emoji " % $ Presentation by @astrotim Tweet by Sebastian Markbåge