$30 off During Our Annual Pro Sale. View Details »

Mobile Design System at scale

Avatar for Kajornsak Peerapathananont Kajornsak Peerapathananont
December 20, 2020
Technology
0
130

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
Full-Stack Development with FlutterFire
Avatar for Kajornsak Peerapathananont kajornsakp
0
1
How to build native-experience with cross-platform
Avatar for Kajornsak Peerapathananont kajornsakp
0
5
Understanding your Android build
Avatar for Kajornsak Peerapathananont kajornsakp
0
42
iOSDevTH #21
Avatar for Kajornsak Peerapathananont kajornsakp
0
47
What's new in Flutter (Google I/O Extended Bangkok 22)
Avatar for Kajornsak Peerapathananont kajornsakp
0
73
What's new in Flutter 2020
Avatar for Kajornsak Peerapathananont kajornsakp
0
66
Mobile Machine Learning for All Skill Levels
Avatar for Kajornsak Peerapathananont kajornsakp
0
35
What's new in Flutter 1.9
Avatar for Kajornsak Peerapathananont kajornsakp
0
56
Kotlin meets Web
Avatar for Kajornsak Peerapathananont kajornsakp
0
24

Other Decks in Technology

See All in Technology
生成AI活用の型ハンズオン〜顧客課題起点で設計する7つのステップ
Avatar for Nakao Yushin yushin_n
0
240
Amazon Bedrock Knowledge Bases × メタデータ活用で実現する検証可能な RAG 設計
Avatar for Tomoaki tomoaki25
4
400
品質のための共通認識
Avatar for KAKEHASHI kakehashi
PRO
4
370
Bedrock AgentCore Memoryの新機能 (Episode) を試してみた / try Bedrock AgentCore Memory Episodic functionarity
Avatar for hoshi7_n hoshi7_n
0
280
IAMユーザーゼロの運用は果たして可能なのか
Avatar for Yuuki Yamashita yama3133
2
490
MariaDB Connector/C のcaching_sha2_passwordプラグインの仕様について
Avatar for kubo ayumu boro1234
0
910
20251219 OpenIDファウンデーション・ジャパン紹介 / OpenID Foundation Japan Intro
Avatar for OpenID Foundation Japan oidfj
0
170
マイクロサービスへの5年間 ぶっちゃけ何をしてどうなったか
Avatar for Tomohiro Hashidate joker1007
16
6.6k
ハッカソンから社内プロダクトへ AIエージェント「ko☆shi」開発で学んだ4つの重要要素
Avatar for そのだ sonoda_mj
4
310
S3を正しく理解するための内部構造の読解
Avatar for NRI Netcom nrinetcom
PRO
3
170
ExpoのインダストリーブースでみたAWSが見せる製造業の未来
Avatar for 濱田孝治 hamadakoji
0
150
re:Invent2025 コンテナ系アップデート振り返り(+CloudWatchログのアップデート紹介)
Avatar for 枡川健太郎 masukawa
0
390

Featured

See All Featured
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.5k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
515
110k
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
2.9k
Done Done
Avatar for chrislema chrislema
186
16k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
54k
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
310
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
62k
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
63
WCS-LA-2024
Avatar for Leonardo Collado-Torres lcolladotor
0
380
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
56
14k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k

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