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

Mobile Design System at scale

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
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
16
How to build native-experience with cross-platform
Avatar for Kajornsak Peerapathananont kajornsakp
0
18
Understanding your Android build
Avatar for Kajornsak Peerapathananont kajornsakp
0
49
iOSDevTH #21
Avatar for Kajornsak Peerapathananont kajornsakp
0
60
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
82
Mobile Machine Learning for All Skill Levels
Avatar for Kajornsak Peerapathananont kajornsakp
0
48
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
社内RAGの導入で気を付けたポイント
Avatar for やくも yakumo
1
120
20260515 ⾃分のアカウントとプライバシーを守る認証と認可の話〜利⽤者向け〜
Avatar for OpenID Foundation Japan oidfj
0
670
Fラン学生が考える、AI時代のデザインに執着した突破口
Avatar for husensan husengs7
1
200
【2026年版】プロジェクトマネジメント実践論｜現役エンジニアが語る！～チームでモノづくりをする時のコツとは？～
Avatar for MIXI ENGINEERS mixi_engineers
PRO
1
110
開発サイクルのボーダーレス化に伴う組織変革から学んだこと / Organizational Transformation Amid the Borderless Development Cycle
Avatar for miisan mii3king
0
200
みんなの考えた最強のデータ基盤アーキテクチャ'26前期〜前夜祭〜ルーキーズ_資料_遠藤な
Avatar for Naoya Endo endonanana
0
440
写真で見るAWS Summit Singapore 2026
Avatar for Kazuki Adachi k_adachi_01
0
110
Terragrunt x Snowflake + dbt で作るマルチテナントなデータ基盤構築プラットフォーム
Avatar for Gaku TASHIRO gak_t12
0
270
データモデリング通り #5オンライン勉強会： AIに『ビジネスの文脈』を教え込むデータモデリング
Avatar for データ横丁 datayokocho
0
290
生成AI時代に信頼性をどう保ち続けるか - Policy as Code の実践
Avatar for akitok akitok_
1
470
サンプリングは「作る」のか「使う」のか？ 分散トレースのコストと運用を両立する実践的戦略 / Why you need the tail sampling and why you don't want it
Avatar for ymotongpoo ymotongpoo
4
190
AWS WAFの運用を地道に改善し、自社で運用可能にするプラクティス
Avatar for ANDPAD inc andpad
1
370

Featured

See All Featured
Applied NLP in the Age of Generative AI
Avatar for Ines Montani inesmontani
PRO
4
2.2k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
9k
Discover your Explorer Soul
Avatar for Emna emna__ayadi
2
1.1k
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
300
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
1
250
How to Align SEO within the Product Triangle To Get 
Buy-In & Support - #RIMC
Avatar for Aleyda Solis aleyda
2
1.5k
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
7.6k
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
Avatar for Aleyda Solis aleyda
2
10k
KATA
Avatar for Megan Lloyd mclloyd
PRO
35
15k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
41
2.5k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
55
12k
Building a A Zero-Code AI SEO Workflow
Avatar for Ian Lurie portentint
PRO
0
520

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