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
21
How to build native-experience with cross-platform
Avatar for Kajornsak Peerapathananont kajornsakp
0
23
Understanding your Android build
Avatar for Kajornsak Peerapathananont kajornsakp
0
51
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
85
Mobile Machine Learning for All Skill Levels
Avatar for Kajornsak Peerapathananont kajornsakp
0
50
What's new in Flutter 1.9
Avatar for Kajornsak Peerapathananont kajornsakp
0
66
Kotlin meets Web
Avatar for Kajornsak Peerapathananont kajornsakp
0
37

Other Decks in Technology

See All in Technology
【FinOps】データドリブンな意思決定を目指して
Avatar for kaita z63d
0
330
徹底討論！ECS vs EKS！
Avatar for 高棹大樹 daitak
3
1.7k
新しいUbuntu/GNOMEが使いたいからXからWaylandへ移行頑張ってるの巻 2026-06-20
Avatar for Nobuto Murata nobutomurata
0
160
LayerX コーポレートエンジニアリング室におけるサプライチェーンセキュリティへの取り組み / Supply Chain Security at LayerX Corporate Engineering
Avatar for Yuya Takeyama yuyatakeyama
3
840
【Snowflake Summit 2026 Recap!!】Snowflake Summit Deep Dive: Security & Governance
Avatar for Civitaspo civitaspo
1
310
気軽に使える"情報のハブ"としてのNotion活用　〜フロー情報の集積点 と、 Claude Code × Notion AI〜
Avatar for Ryo Okubo syucream
1
200
「勝手に広まる」人気 AI エージェントを爆速で作ろう！（AWS Summit Japan 2026講演資料）
Avatar for みのるん minorun365
PRO
10
2.5k
BPaaSで進むAIオペレーションの現在地 AI実装が効く領域とスケーラビリティの選定と実装
Avatar for KentaroFujii kentarofujii
0
180
IaC コードを資産へ：AWS CDK 社内ライブラリと横断展開 / aws-summit-japan-2026
Avatar for k.goto gotok365
10
1.6k
2026年6月23日 Syncable Tech + Start Python Club にて
Avatar for Kimikazu Kato hamukazu
0
150
5分でわかるDuckDB Quack
Avatar for chanyou0311 chanyou0311
3
250
フィジカル版Github Onshapeの紹介
Avatar for shiba_8ro shiba_8ro
0
320

Featured

See All Featured
Exploring anti-patterns in Rails
Avatar for Elle Meredith aemeredith
3
420
Leveraging Curiosity to Care for An Aging Population
Avatar for Cassini Nazir cassininazir
1
270
Evolving SEO for Evolving Search Engines
Avatar for Ryan Jones ryanjones
0
220
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
500
Exploring the relationship between traditional SERPs and Gen AI search
Avatar for Ray Grieselhuber raygrieselhuber
PRO
2
4k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
18k
Jess Joyce - The Pitfalls of Following Frameworks
Avatar for Tech SEO Connect techseoconnect
PRO
1
170
The B2B funnel & how to create a winning content strategy
Avatar for Katarina Dahlin katarinadahlin
PRO
1
400
Avoiding the “Bad Training, Faster” Trap in the Age of AI
Avatar for Mike Taylor tmiket
0
180
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
400
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
230
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
340

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