ADDC 2019 - Maria Neumayer - Consistency is Key - Working with a Design System

Working with a design system can be hugely rewarding: layouts can be created and modified using shared components. This should result in faster design and 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.

Recordings & more: https://addconf.com/

Transcript

1. CONSISTENCY IS KEY
   Working with a design system
   Maria Neumayer - @marianeum
   

   View Slide

2. Consumer Restaurant Rider
   

   View Slide

3. Deliveroo
   

   View Slide

4. Design system
   

   View Slide

5. Visual Styles
   

   View Slide

6. Visual Styles UI Components
   

   View Slide

7. Visual Styles UI Components Guidelines
   

   View Slide

8. Material Design
   

   View Slide

9. !
   ⁉ #
   

   View Slide

10. View Slide

11. Designers Engineers
    

    View Slide

12. View Slide

13. View Slide

14. Consumer Restaurant Rider
    

    View Slide

15. Consumer Restaurant Rider
    UiKit
    

    View Slide

16. Private Maven Repository
    

    View Slide

17. implementation "com.deliveroo.android:ui-kit:1.0.0"a
    

    View Slide

18. Major Minor Patch
    1.0.0
    

    View Slide

19. Major Minor Patch
    1.0.0
    

    View Slide

20. Major Minor Patch
    1.0.0
    

    View Slide

21. Major Minor Patch
    1.0.0
    

    View Slide

22. View Slide

23. View Slide

24. View Slide

25. Creating components
    

    View Slide

26. View Slide

27. #00ccbc
    <br/>

    View Slide

28. View Slide

29. View Slide

30. View Slide

31. View Slide

32. <br/><item name="android:minHeight">@dimen/button_height</item><br/><item name="android:paddingStart">@dimen/padding_sides</item><br/><item name="android:paddingEnd">@dimen/padding_sides</item><br/><item name="android:paddingTop">@dimen/padding_top_bottom</item><br/><item name="android:paddingBottom">@dimen/padding_top_bottom</item><br/><item name="android:foreground">?selectableItemBackground</item><br/><item name="android:stateListAnimator">@animator/button_animator</item><br/>
    <br/><item name="android:background">@drawable/button_bg_primary</item><br/>
    <br/><item name="android:background">@drawable/button_bg_secondary</item><br/><item name="android:textStyle">normal</item><br/><item name="android:textColor">@color/teal_120</item><br/>
    

    View Slide

33. <br/><item name="android:background">@drawable/button_bg_green</item><br/>
    $
    

    View Slide

34. <br/><item name="android:background">@drawable/button_bg_green</item><br/>
    %
    <br/><item name="android:background">@drawable/button_bg_red</item><br/>
    <br/><item name="android:paddingStart">@dimen/padding_small</item><br/><item name="android:paddingEnd">@dimen/padding_small</item><br/><item name="android:paddingTop">@dimen/padding_small</item><br/><item name="android:paddingBottom">@dimen/padding_small</item><br/>
    <br/><item name="android:minHeight">@dimen/button_large</item><br/>
    ⁉
    #
    

    View Slide

35. 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
    

    View Slide

36. android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:icon="@drawable/ic_star"
    app:text="@string/button_label"/>
    Result
    

    View Slide

37. Styles
    + Easy to setup
    + Easy to extend
    - Less consistency
    - Might be restrictive
    Custom Views
    + Full control
    + Decide properties
    and restrictions
    - Harder to extend
    ⚖
    

    View Slide

38. Button
    

    View Slide

39. Button UiKitButton
    

    View Slide

40. 
    
    
    
    
    
    
    
    
    
    
    
    
    

    View Slide

41. button.type = UiKitButton.Type.PRIMARY
    button.text = "Hello ADDC”
    

    View Slide

42. Forces consistency
    Simplifies the component
    

    View Slide

43. Forces consistency
    Simplifies the component
    

    View Slide

44. Designers + Engineers
    need to be aware
    of limitations
    

    View Slide

45. '
    

    View Slide

46. (
    Communicate changes
    Document components
    

    View Slide

47. (
    Communicate changes
    Document components
    

    View Slide

48. (
    Clarify behaviour
    Enable easy access
    

    View Slide

49. (
    Clarify behaviour
    Enable easy access
    

    View Slide

50. Communicate
    

    View Slide

51. Creating components
    

    View Slide

52. Simplicity
    Consistency
    Reusability
    

    View Slide

53. Simplicity
    Consistency
    Reusability
    

    View Slide

54. Simplicity
    Consistency
    Reusability
    

    View Slide

55. Updating
    components
    

    View Slide

56. 
    
    
    
    
    
    
    
    

    View Slide

57. 
    
    
    
    
    
    
    
    

    View Slide

58. 
    
    
    
    
    
    
    enum class Type {
    PRIMARY,
    SECONDARY,
    TERTIARY,
    @Deprecated("Use property instead")
    DESTRUCTIVE
    }
    

    View Slide

59. View Slide

60. View Slide

61. )
    

    View Slide

62. implementation "com.deliveroo.android:icon-set:1.9.0"a
    *
    

    View Slide

63. What’s next?
    

    View Slide

64. Design Tokens
    

    View Slide

65. JSON
    Android XML
    iOS plist
    Web CSS
    

    View Slide

66. Dark mode
    

    View Slide

67. We’re still
    at the beginning
    

    View Slide

68. THANK YOU
    Maria Neumayer - @marianeum
    We’re hiring - deliveroo.co.uk/careers
    

    View Slide