Mobile Design System at scale

Android Bangkok Conference 2020

Transcript

1. © 2020 Agoda. All rights reserved. Mobile Design System at scale Kajornsak Peerapathananont Mobile Developer
2. Agenda © 2020 Agoda. All rights reserved. • Problem s • What is design syste m • Agoda Design Syste m • How did we achieve i t • Summary 2
3. © 2020 Agoda. All rights reserved. 3 Meet Agoda app
4. © 2020 Agoda. All rights reserved. Problems
5. © 2020 Agoda. All rights reserved. 5 UI Inconsistency
6. © 2020 Agoda. All rights reserved. 6 Duplicated resources
7. © 2020 Agoda. All rights reserved. 7 Duplicated code • res/values/dimens.xm l • Duplicated padding, margi n • res/ values/colors.xm l • Duplicated color s • Multiple shades of colors
8. © 2020 Agoda. All rights reserved. Design Systems
9. © 2020 Agoda. All rights reserved. 9 What is design system? https://bradfrost.com/blog/post/atomic-web-design
10. © 2020 Agoda. All rights reserved. 10 Android Design System
11. © 2020 Agoda. All rights reserved. Material Guidelines
12. © 2020 Agoda. All rights reserved.
13. © 2020 Agoda. All rights reserved. 13 Android Material Theming Google I/O 2019 App
14. © 2020 Agoda. All rights reserved. Agoda Design System
15. © 2020 Agoda. All rights reserved. 15 Da Vinci
16. © 2020 Agoda. All rights reserved. 16 Agoda Design System
17. © 2020 Agoda. All rights reserved. 17 Reusability & Consistency
18. © 2020 Agoda. All rights reserved. Android Frameworks
19. © 2020 Agoda. All rights reserved. 19 Requirements • Reusability & Consistenc y • No XM L • No Android-coupled syste m • Declarative U I • Domain Specific Language (DSL ) • Testing (Kakao), Network stack, Bootstrapping, etc . • Aligned with other platforms
20. © 2020 Agoda. All rights reserved. 20 Introducing DaVinci for Android
21. © 2020 Agoda. All rights reserved. 21 Problems solved • Reusability ✅ • Consistency ✅ • Easier way to create custom view ✅ • No XML ✅ • No boilerplate code ✅ • Flexibility ✅ • Aligned with iOS ✅ ✅
22. © 2020 Agoda. All rights reserved.
23. © 2020 Agoda. All rights reserved. Workflow Design specs Badge Component Reusable component
24. © 2020 Agoda. All rights reserved. 24 DaVinci App
25. © 2020 Agoda. All rights reserved. 25 Snapshot Testing • Screenshot Tests for Androi d • facebook/screenshot-tests-for-android
26. © 2020 Agoda. All rights reserved. 26 Why not Jetpack Compose? • Launched at Google I/O 201 9 • Not suitable to our usecase s • More abstraction with our DSL
27. © 2020 Agoda. All rights reserved. Summary
28. © 2020 Agoda. All rights reserved. 28 Everybody is happy Designer Developer
29. © 2020 Agoda. All rights reserved. Interested now? • https://material.io • https://agoda.design • https://designsystemsforfigma.com • https://bradfrost.com/blog/post/atomic-web-design • https://speakerdeck.com/line_devday2019/line-design-system-making-line- product- faster-without-losing-consistency
30. © 2020 Agoda. All rights reserved. 30 Join us!
31. Thank you