Consistency is Key - Working with a design system (Droidcon Italy)

Working with a design system can be hugely rewarding: layouts can be created and modified using shared components. This should result in faster development and consistent designs across the app. But getting there is a slow and painful process.

When implementing a design system you have to make many decisions, like: Where do you start? What actually makes a component? And how flexible should components be? This talk will shed some light on these issues by taking you through Deliveroo's process of adopting a design system in its three Android apps.

Presented at Droidcon Italy 2019
https://www.youtube.com/watch?v=7a0_RA04kQk

Transcript

1. CONSISTENCY IS KEY Working with a design system Maria Neumayer - @marianeum
2. Consumer Restaurant Rider
3. Deliveroo
4. What is a design system?
5. Visual Styles
6. Visual Styles UI Components
7. Visual Styles UI Components Guidelines
8. Consistency Faster scaling Prevents duplication Single source of truth
9. Consistency Faster scaling Prevents duplication Single source of truth
10. Consistency Faster scaling Prevents duplication Single source of truth
11. Consistency Faster scaling Prevents duplication Single source of truth
12. Material Design
13. ⁉
15. Setting up a design system
18. Consumer Restaurant Rider
19. Consumer Restaurant Rider UiKit
20. Git Submodules
21. Subproject commit cb713…070 [submodule "android-common"] path = android-common url = git@github.com:deliveroo/android-common.git
24. Private Maven Repository
25. implementation "com.deliveroo.android:ui-kit:1.0.0"a repositories { maven { credentials { username 'user' password 'pw' } url 'url' } }
26. ./gradlew assembleRelease artifactoryPublish
27. implementation “com.deliveroo.android:ui-kit:1.0.0"a
28. implementation "com.deliveroo.android:ui-kit:1.0.1"a
29. implementation "com.deliveroo.android:ui-kit:1.0.1"a ./gradlew assembleRelease artifactoryPublish A private Maven repository for Android in 30 min
 Jeroen Mols
30. Major Minor Patch 1.0.0
31. Major Minor Patch 1.0.0
32. Major Minor Patch 1.0.0
33. Major Minor Patch 1.0.0
35. repositories { mavenLocal() }a ./gradlew assembleRelease publishToMavenLocal
36. repositories { mavenLocal() }a ./gradlew assembleRelease publishToMavenLocal
39. Creating components
41. <color name="teal_100">#00ccbc</color> <style name=“UIKit.TextAppearance.Heading.Medium”>
46. <style name="Special.Button" parent="Body.Medium.Bold.White"> <item name="android:minHeight">@dimen/button_height</item> <item name="android:paddingStart">@dimen/padding_sides</item> <item name="android:paddingEnd">@dimen/padding_sides</item> <item name="android:paddingTop">@dimen/padding_top_bottom</item> <item name="android:paddingBottom">@dimen/padding_top_bottom</item> <item name="android:foreground">?selectableItemBackground</item> <item name="android:stateListAnimator">@animator/button_animator</item> </style> <style name="Special.Button.Primary"> <item name="android:background">@drawable/button_bg_primary</item> </style> <style name="Special.Button.Secondary"> <item name="android:background">@drawable/button_bg_secondary</item> <item name="android:textStyle">normal</item> <item name="android:textColor">@color/teal_120</item> </style>
47. <style name="Special.Button.Primary.Green"> <item name="android:background">@drawable/button_bg_green</item> </style>
48. <style name="Special.Button.Primary.Green"> <item name="android:background">@drawable/button_bg_green</item> </style> <style name="Special.Button.Primary.Red"> <item name="android:background">@drawable/button_bg_red</item> </style> <style name="Special.Button.Primary.Small"> <item name="android:paddingStart">@dimen/padding_small</item> <item name="android:paddingEnd">@dimen/padding_small</item> <item name="android:paddingTop">@dimen/padding_small</item> <item name="android:paddingBottom">@dimen/padding_small</item> </style> <style name="Special.Button.Secondary.Large"> <item name="android:minHeight">@dimen/button_large</item> </style> ⁉
49. setBackgroundResource(R.drawable.button_bg_secondary) setTypeface(typeface, Typeface.NORMAL) setTextColor(context.getColorR.color.teal_120))
50. <Button style="@style/Special.Button.Primary" android:layout_width="match_parent" android:layout_height="wrap_content" android:drawableStart="@drawable/ic_star" android:text="@string/button_label" /> Wanted Result
51. <com.deliveroo.common.ui.UiKitButton android:layout_width="match_parent" android:layout_height="wrap_content" app:icon="@drawable/ic_star" app:text="@string/button_label"/> Result
52. <style name="no_agents_button" parent="UiKit.Button.Primary" />
53. Styles + Easy to setup + Easy to extend - Less consistency - Might be restrictive Custom Views + Full control + Decide properties and restrictions - Harder to extend ⚖
54. Button
55. Button UiKitButton
56. <declare-styleable name="UiKitButton"> <attr name="text" format="string"/> <attr name="icon" format="reference"/> <attr name="type" format="enum"> <enum name="primary" value="0"/> <enum name="secondary" value="1"/> <enum name="tertiary" value="2"/> <enum name="destructive" value=“3"/> </attr> <attr name="inverted" format="boolean"/> <attr name="loading" format="boolean"/> <attr name="enabled" format="boolean"/> </declare-styleable>
57. <com.deliveroo.common.ui.UiKitButton android:layout_width="wrap_content" android:layout_height="wrap_content" app:text="@string/button_label"/>
58. <declare-styleable name="UiKitTheme"> <attr name="uiKitButtonStyle" format=“reference"/> </declare-styleable>
59. button.type = UiKitButton.Type.PRIMARY button.text = "Hello Droidcon Italy"
60. var type: Type = Type.PRIMARY set(value) { field = value updateColours() } var text: CharSequence? get() = textView.text set(value) { textView.text = value } button.type = UiKitButton.Type.PRIMARY button.text = "Hello Droidcon Italy"
61. Forces consistency Simplifies the component
62. Forces consistency Simplifies the component
65. Designers + Engineers need to be aware of limitations
69. Simplicity Consistency Reusability
70. Simplicity Consistency Reusability
71. Simplicity Consistency Reusability
73. Atomic Design
74. Atoms Molecules Organisms Templates Pages
75. Atoms Molecules Organisms Templates Pages
76. Atoms Molecules Organisms Templates Pages
77. Atoms Molecules Organisms Templates Pages
78. Atoms Molecules Organisms Templates Pages
79. Atoms Molecules Organisms Templates Pages
80. Atoms Molecules Organisms Templates Pages Atomic Design in Android - Yahya Bayramoglu
84. implementation "com.deliveroo.android:icon-set:1.9.0"a
85. What’s next?
87. Design Tokens
88. JSON Android XML iOS plist Web CSS
89. Core Banner EmptyState Dialog Card
90. We’re still at the beginning
91. THANK YOU Maria Neumayer - @marianeum We’re hiring - deliveroo.co.uk/careers