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
0
81

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
36
iOSDevTH #21
Avatar for Kajornsak Peerapathananont kajornsakp
0
43
What's new in Flutter (Google I/O Extended Bangkok 22)
Avatar for Kajornsak Peerapathananont kajornsakp
0
58
What's new in Flutter 2020
Avatar for Kajornsak Peerapathananont kajornsakp
0
60
Mobile Machine Learning for All Skill Levels
Avatar for Kajornsak Peerapathananont kajornsakp
0
30
What's new in Flutter 1.9
Avatar for Kajornsak Peerapathananont kajornsakp
0
51
Kotlin meets Web
Avatar for Kajornsak Peerapathananont kajornsakp
0
20
From design to develop with Material Components
Avatar for Kajornsak Peerapathananont kajornsakp
0
140
ML Kit : Face contour detection
Avatar for Kajornsak Peerapathananont kajornsakp
0
35

Other Decks in Technology

See All in Technology
SEQUENCE object comparison - db tech showcase 2025 LT2
Avatar for Noriyoshi Shinoda nori_shinoda
0
290
SREのためのeBPF活用ステップアップガイド
Avatar for Sohei Iwahori egmc
2
940
Delegating the chores of authenticating users to Keycloak
Avatar for Alexander Schwartz ahus1
0
180
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
Avatar for soudai sone soudai
PRO
55
22k
〜『世界中の家族のこころのインフラ』を目指して”次の10年”へ〜 SREが導いたグローバルサービスの信頼性向上戦略とその舞台裏 / Towards the Next Decade: Enhancing Global Service Reliability
Avatar for kohbis kohbis
3
1.1k
Sansanのデータプロダクトマネジメントのアプローチ
Avatar for SansanTech sansantech
PRO
0
230
SREの次のキャリアの道しるべ 〜SREがマネジメントレイヤーに挑戦して、 気づいたこととTips〜
Avatar for coconala_engineer coconala_engineer
1
1.9k
Four Keysから始める信頼性の改善 - SRE NEXT 2025
Avatar for ozaki-kota ozakikota
0
220
[SRE NEXT] ARR150億円_エンジニア140名_27チーム_17プロダクトから始めるSLO.pdf
Avatar for sato-s satos
5
2.3k
Contributing to Rails? Start with the Gems You Already Use
Avatar for Yasuo Honda yahonda
2
120
Reach American Airlines®️ Instantly: 19 Calling Methods for Fast Support in the USA
Avatar for Bdsdigi@1234 flyamerican
1
180
20250708オープンエンドな探索と知識発見
Avatar for Sakana AI sakana_ai
PRO
4
890

Featured

See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
47
9.6k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
31
1.3k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
1.9k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
7
510
Navigating Team Friction
Avatar for Lara Hogan lara
187
15k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
189
11k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
37
2.8k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
18
980
Fireside Chat
Avatar for paigeccino paigeccino
37
3.5k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
32
2.4k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
96
6.1k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
138
34k

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