Consistency is Key - Working with a design system (Android Makers)

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 Android Makers Paris 2019
https://www.youtube.com/watch?v=THYqC3ACadQ&t=6s

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. Designers Engineers
18. Consumer Restaurant Rider
19. Consumer Restaurant Rider UiKit
20. Private Maven Repository
21. implementation "com.deliveroo.android:ui-kit:1.0.0"a repositories { maven { credentials { username 'user' password 'pw' } url 'url' } }
22. ./gradlew assembleRelease artifactoryPublish
23. implementation “com.deliveroo.android:ui-kit:1.0.0"a
24. implementation "com.deliveroo.android:ui-kit:1.0.1"a
25. implementation "com.deliveroo.android:ui-kit:1.0.1"a ./gradlew assembleRelease artifactoryPublish A private Maven repository for Android in 30 min
 Jeroen Mols
26. Major Minor Patch 1.0.0
27. Major Minor Patch 1.0.0
28. Major Minor Patch 1.0.0
29. Major Minor Patch 1.0.0
31. repositories { mavenLocal() }a ./gradlew assembleRelease publishToMavenLocal
32. repositories { mavenLocal() }a ./gradlew assembleRelease publishToMavenLocal
35. Creating components
37. <color name="teal_100">#00ccbc</color> <style name=“UIKit.TextAppearance.Heading.Medium”>
42. <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>
43. <style name="Special.Button.Primary.Green"> <item name="android:background">@drawable/button_bg_green</item> </style> $
44. <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> ⁉ #
45. setBackgroundResource(R.drawable.button_bg_secondary) setTypeface(typeface, Typeface.NORMAL) setTextColor(context.getColorR.color.teal_120)) &
46. <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
47. <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
48. <style name="no_agents_button" parent="UiKit.Button.Primary" /> &
49. Styles + Easy to setup + Easy to extend - Less consistency - Might be restrictive Custom Views + Full control + Decide properties and restrictions - Harder to extend ⚖
50. Button
51. Button UiKitButton
52. <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>
53. <com.deliveroo.common.ui.UiKitButton android:layout_width="wrap_content" android:layout_height="wrap_content" app:text="@string/button_label"/> (
54. <declare-styleable name="UiKitTheme"> <attr name="uiKitButtonStyle" format=“reference"/> </declare-styleable>
55. button.type = UiKitButton.Type.PRIMARY button.text = "Hello Android Makers"
56. 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 Android Makers”
57. Forces consistency Simplifies the component
58. Forces consistency Simplifies the component
61. Designers + Engineers need to be aware of limitations
65. Simplicity Consistency Reusability
66. Simplicity Consistency Reusability
67. Simplicity Consistency Reusability
68. Updating components
69. <declare-styleable name="UiKitButton"> <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> </declare-styleable>
70. <declare-styleable name="UiKitButton"> <attr name="type" format="enum"> <enum name="primary" value="0"/> <enum name="secondary" value="1"/> <enum name="tertiary" value="2"/> </attr> <attr name="destructive" format="boolean"/> </declare-styleable>
71. <attr name="type" format="enum"> <enum name="primary" value="0"/> <enum name="secondary" value="1"/> <enum name="tertiary" value="2"/> <!-- {@deprecated Use property instead.} --> <enum name="destructive" value="3"/> </attr> enum class Type { PRIMARY, SECONDARY, TERTIARY, @Deprecated("Use property instead") DESTRUCTIVE }
72. var type: Type = Type.PRIMARY set(value) {a if (value == Type.DESTRUCTIVE) {a Timber.w("Using deprecated destructive type! Use destructive property instead") field = Type.PRIMARY isDestructive = true }aelse {a field = value }a updateColours() }a
73. var type: Type = Type.PRIMARY set(value) {a if (value == Type.DESTRUCTIVE) {a Timber.w("Using deprecated destructive type! Use destructive property instead") field = Type.PRIMARY isDestructive = true }aelse {a field = value }a updateColours() }a
74. var type: Type = Type.PRIMARY set(value) {a field = value updateColours() }a
76. Atomic Design
77. Atoms Molecules Organisms Templates Pages
78. Atoms Molecules Organisms Templates Pages
79. Atoms Molecules Organisms Templates Pages
80. Atoms Molecules Organisms Templates Pages
81. Atoms Molecules Organisms Templates Pages
82. Atoms Molecules Organisms Templates Pages Design System
83. Atoms Molecules Organisms Templates Pages Atomic Design in Android - Yahya Bayramoglu
86. &
87. implementation "com.deliveroo.android:icon-set:1.9.0"a (
88. What’s next?
90. Design Tokens
91. JSON Android XML iOS plist Web CSS
92. Core Banner EmptyState Dialog Card
93. We’re still at the beginning
94. THANK YOU Maria Neumayer - @marianeum We’re hiring - deliveroo.co.uk/careers