Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Mobile Design System at scale

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

Mobile Design System at scale

Android Bangkok Conference 2020

Avatar for Kajornsak Peerapathananont

Kajornsak Peerapathananont

December 20, 2020

More Decks by Kajornsak Peerapathananont

See All by Kajornsak Peerapathananont
Full-Stack Development with FlutterFire
Avatar for Kajornsak Peerapathananont kajornsakp
0
18
How to build native-experience with cross-platform
Avatar for Kajornsak Peerapathananont kajornsakp
0
22
Understanding your Android build
Avatar for Kajornsak Peerapathananont kajornsakp
0
49
iOSDevTH #21
Avatar for Kajornsak Peerapathananont kajornsakp
0
62
What's new in Flutter (Google I/O Extended Bangkok 22)
Avatar for Kajornsak Peerapathananont kajornsakp
0
92
What's new in Flutter 2020
Avatar for Kajornsak Peerapathananont kajornsakp
0
84
Mobile Machine Learning for All Skill Levels
Avatar for Kajornsak Peerapathananont kajornsakp
0
49
What's new in Flutter 1.9
Avatar for Kajornsak Peerapathananont kajornsakp
0
65
Kotlin meets Web
Avatar for Kajornsak Peerapathananont kajornsakp
0
35

Other Decks in Technology

See All in Technology
Sony_KMP_Journey_KotlinConf2026
Avatar for ソニー株式会社 sony
2
210
Oracle AI Database@Google Cloud：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
6
1.5k
Claude Codeを組織で使いこなす— サーバサイドAIエージェント運用の実践知
Avatar for PERSOL CAREER Dev | techtekt techtekt
PRO
0
190
美味しいスイスチーズを作ろう🧀🐭
Avatar for Taiga Mikami taigamikami
1
230
Mastering Ruby Box
Avatar for Satoshi Tagomori tagomoris
3
140
MIERUNE JCT 発表資料「宇宙から伊能忠敬ごっこ」
Avatar for じゃらしまる syuchimu
0
140
AIを「創る」と「使う」の循環 — HRテックが実践するリアルなAI組織実装
Avatar for Taketo Sasaki taketo957
0
1.1k
AI-DLCを活用した高品質・安全なAI駆動開発実践 / AI Driven Development with AI-DLC
Avatar for 吉田真吾 yoshidashingo
0
110
個人最適 から 全体最適 へ　AI情報共有会・AIギルド・AI-DLC で進める カンリーの組織展開
Avatar for ふくだ（fukuda ryu） rfdnxbro
0
1.1k
PHP と TypeScript の型システム比較：AI 時代の「型」は誰のためにあるのか？ #frontend_phpcon_do / frontend_phpcon_do_2026
Avatar for shogogg shogogg
1
240
ポケモンの型をTypeScriptの型システムで表現してみた
Avatar for subroh_0508 subroh0508
0
160
AI活用を推進するために ファインディが下した、一つの小さな決断
Avatar for starfish719 starfish719
0
220

Featured

See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
49
10k
Agile Actions for Facilitating Distributed Teams - ADO2019
Avatar for Mark Kilby mkilby
0
200
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
183
10k
Leveraging Curiosity to Care for An Aging Population
Avatar for Cassini Nazir cassininazir
1
260
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
0
310
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
41
2.5k
Google's AI Overviews - The New Search
Avatar for Barry Adams badams
0
1k
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
7.5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
141
35k
A better future with KSS
Avatar for Kyle Neath kneath
240
18k
Leadership Guide Workshop - DevTernity 2021
Avatar for David Neal reverentgeek
1
300

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