$30 off During Our Annual Pro Sale. View Details »

Mobile Design System at scale

Avatar for Kajornsak Peerapathananont Kajornsak Peerapathananont
December 20, 2020
Technology
0
87

Mobile Design System at scale

Android Bangkok Conference 2020

Avatar for Kajornsak Peerapathananont

Kajornsak Peerapathananont

December 20, 2020
Tweet

More Decks by Kajornsak Peerapathananont

See All by Kajornsak Peerapathananont
Understanding your Android build
Avatar for Kajornsak Peerapathananont kajornsakp
0
41
iOSDevTH #21
Avatar for Kajornsak Peerapathananont kajornsakp
0
45
What's new in Flutter (Google I/O Extended Bangkok 22)
Avatar for Kajornsak Peerapathananont kajornsakp
0
71
What's new in Flutter 2020
Avatar for Kajornsak Peerapathananont kajornsakp
0
64
Mobile Machine Learning for All Skill Levels
Avatar for Kajornsak Peerapathananont kajornsakp
0
34
What's new in Flutter 1.9
Avatar for Kajornsak Peerapathananont kajornsakp
0
53
Kotlin meets Web
Avatar for Kajornsak Peerapathananont kajornsakp
0
22
From design to develop with Material Components
Avatar for Kajornsak Peerapathananont kajornsakp
0
150
ML Kit : Face contour detection
Avatar for Kajornsak Peerapathananont kajornsakp
0
41

Other Decks in Technology

See All in Technology
なぜフロントエンド技術を追うのか？なぜカンファレンスに参加するのか？
Avatar for sakito sakito
9
2k
事業部のプロジェクト進行と開発チームの改善の “時間軸" のすり合わせ
Avatar for konifar konifar
9
3.2k
21st ACRi Webinar - Univ of Tokyo Presentation Slide (Ayumi Ohno)
Avatar for Nao Sumikawa nao_sumikawa
0
120
Agentic AI Patterns and Anti-Patterns
Avatar for Guillaume Laforge glaforge
1
140
生成AI時代の自動E2Eテスト運用とPlaywright実践知_引持力哉
Avatar for LegalOn Technologies, Inc legalontechnologies
PRO
0
170
AI時代の開発フローとともに気を付けたいこと
Avatar for KAMEGAWA Kazushi kkamegawa
0
920
Security Diaries of an Open Source IAM
Avatar for Alexander Schwartz ahus1
0
120
AI活用によるPRレビュー改善の歩み ― 社内全体に広がる学びと実践
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
1
140
Contract One Engineering Unit 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
9.9k
Docker, Infraestructuras seguras y Hardening
Avatar for José Juan Sánchez Hernández josejuansanchez
0
150
シンプルを極める。アンチパターンなDB設計の本質
Avatar for Facilo Inc. facilo_inc
2
1.6k
グレートファイアウォールを自宅に建てよう
Avatar for 綿糸てせ ctes091x
0
130

Featured

See All Featured
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
1
86
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
127
17k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
162
23k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
231
22k
Designing for Performance
Avatar for Lara Hogan lara
610
69k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
333
24k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
97
6.4k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
303
21k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
791
250k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
9.8k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
246
12k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
1.8k

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