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
26
How to build native-experience with cross-platform
Avatar for Kajornsak Peerapathananont kajornsakp
0
27
Understanding your Android build
Avatar for Kajornsak Peerapathananont kajornsakp
0
55
iOSDevTH #21
Avatar for Kajornsak Peerapathananont kajornsakp
0
64
What's new in Flutter (Google I/O Extended Bangkok 22)
Avatar for Kajornsak Peerapathananont kajornsakp
0
94
What's new in Flutter 2020
Avatar for Kajornsak Peerapathananont kajornsakp
0
86
Mobile Machine Learning for All Skill Levels
Avatar for Kajornsak Peerapathananont kajornsakp
0
51
What's new in Flutter 1.9
Avatar for Kajornsak Peerapathananont kajornsakp
0
67
Kotlin meets Web
Avatar for Kajornsak Peerapathananont kajornsakp
0
38

Other Decks in Technology

See All in Technology
DatabricksにおけるMCPソリューション
Avatar for Takaaki Yayoi taka_aki
1
280
Oracle Exadata Database Service on Cloud@Customer X11M (ExaDB-C@C) サービス概要
Avatar for oracle4engineer oracle4engineer
PRO
2
8.4k
AIが実装を自走する時代の認知負債との戦い
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
1
390
Making sense of Google’s agentic dev tools
Avatar for Guillaume Laforge glaforge
1
290
GoでCコンパイラを作った話
Avatar for repunit11 repunit
0
120
SoccerMaster: A Vision Foundation Model for Soccer Understanding
Avatar for Kazuyuki Miyazawa kzykmyzw
0
150
AIコード生成×サプライチェーン攻撃 — PHPが直面する“二重の信頼問題
Avatar for Shinya Saita shinyasaita
0
220
Webアプリ認証の全体像 / The Big Picture of Web App Authentication
Avatar for Kitano Yuichi kitano_yuichi
0
200
AI x 開発生産性を取り巻く予算戦略と投資対効果
Avatar for Masato Ishigaki / 石垣雅人 i35_267
1
150
AIレビューはどこまで任せられるのか？自動化と人が背負うレビューの境界
Avatar for SansanTech sansantech
PRO
3
1.1k
Genie Ontologyは銀の弾丸かを考える / Is Genie Ontology a Silver Bullet?
Avatar for NTT docomo Business nttcom
0
410
kaonavi Tech Night＃1
Avatar for 株式会社カオナビ kaonavi
0
110

Featured

See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
Unlocking the hidden potential of vector embeddings in international SEO
Avatar for Frank van Dijk frankvandijk
0
870
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
378
71k
Fireside Chat
Avatar for paigeccino paigeccino
42
4k
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
20k
Impact Scores and Hybrid Strategies: The future of link building
Avatar for Tamara Novitovic tamaranovitovic
0
340
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
1
320
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
75
12k
Sam Torres - BigQuery for SEOs
Avatar for Tech SEO Connect techseoconnect
PRO
0
310
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
510
Groundhog Day: Seeking Process in Gaming for Health
Avatar for Sebastian Deterding codingconduct
0
250
How to Align SEO within the Product Triangle To Get 
Buy-In & Support - #RIMC
Avatar for Aleyda Solis aleyda
2
1.7k

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