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
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
AWS Security Agent といっしょに脅威モデリングをやってみよう
Avatar for amarelo_n24 amarelo_n24
1
210
FPC(フレキシブル)基板にZephyr実装してみた。
Avatar for misoji engineer iotengineer22
0
170
不要なレビューをAIにまかせて AIコーディングの環境改善を加速した
Avatar for shoota shoota
1
260
飲食店もAIで。レジ締めやハンディシステムをつくってる話 / Using AI for restaurant management
Avatar for VTRyo vtryo
0
160
AI Agentをシステムに組み込む前にゆるく向き合ってみる
Avatar for hayama hayama17
0
130
【FinOps】データドリブンな意思決定を目指して
Avatar for kaita z63d
0
300
AIが自律的に回る開発ループを設計してチーム開発に組み込む
Avatar for Mitsuhiro Komuro (nekorush14) nekorush14
0
120
Comment regagner la souveraineté de vos données tout en étant payé grâce à Nostr !
Avatar for Renaud Lifchitz rlifchitz
0
190
Kiro Ambassador を目指す話
Avatar for Kazuki Adachi k_adachi_01
0
130
水を運ぶ人としてのリーダーシップ
Avatar for izumii19 izumii19
4
990
元銀行員がAIだけでアプリを量産！「バイブコーディング実演セミナー 」
Avatar for tatsuya1970 tatsuya1970
0
110
「ビジネスがわかるエンジニア」とは何か？
Avatar for ryooob ryooob
0
290

Featured

See All Featured
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
1
360
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
432
67k
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
150k
The untapped power of vector embeddings
Avatar for Frank van Dijk frankvandijk
2
1.8k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
281
24k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
6k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
Building a A Zero-Code AI SEO Workflow
Avatar for Ian Lurie portentint
PRO
0
610
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
800
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.9k
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
Avatar for Ines Montani inesmontani
PRO
3
3.5k
Designing for Timeless Needs
Avatar for Cassini Nazir cassininazir
1
260

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