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
140

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
5
How to build native-experience with cross-platform
Avatar for Kajornsak Peerapathananont kajornsakp
0
9
Understanding your Android build
Avatar for Kajornsak Peerapathananont kajornsakp
0
42
iOSDevTH #21
Avatar for Kajornsak Peerapathananont kajornsakp
0
50
What's new in Flutter (Google I/O Extended Bangkok 22)
Avatar for Kajornsak Peerapathananont kajornsakp
0
76
What's new in Flutter 2020
Avatar for Kajornsak Peerapathananont kajornsakp
0
70
Mobile Machine Learning for All Skill Levels
Avatar for Kajornsak Peerapathananont kajornsakp
0
39
What's new in Flutter 1.9
Avatar for Kajornsak Peerapathananont kajornsakp
0
58
Kotlin meets Web
Avatar for Kajornsak Peerapathananont kajornsakp
0
25

Other Decks in Technology

See All in Technology
国井さんにPurview の話を聞く会
Avatar for Kunii, Suguru sophiakunii
1
400
The Engineer with a Three-Year Cycle
Avatar for YAMADA Nobuko e99h2121
0
140
AI時代のアジャイルチームを目指して ー スクラムというコンフォートゾーンからの脱却 ー / Toward Agile Teams in the Age of AI
Avatar for TAKAKING22 takaking22
11
6.8k
これまでのネットワーク運用を変えるかもしれないアプデをおさらい
Avatar for da-hatakeyama hatahata021
3
190
複雑さを受け入れるか、拒むか？ - 事業成長とともに育ったモノリスを前に私が考えたこと #RSGT2026
Avatar for bayashi murabayashi
1
2k
フルカイテン株式会社 エンジニア向け採用資料
Avatar for FULL KAITEN fullkaiten
0
10k
【Oracle Cloud ウェビナー】ランサムウェアが突く「侵入の隙」とバックアップの「死角」 ～ 過去の教訓に学ぶ — 侵入前提の防御とデータ保護 ～
Avatar for oracle4engineer oracle4engineer
PRO
0
120
RALGO : AIを組織に組み込む方法 -アルゴリズム中心組織設計- #RSGT2026 / RALGO: How to Integrate AI into an Organization – Algorithm-Centric Organizational Design
Avatar for kyonmm kyonmm
PRO
3
1.4k
Databricks Free Edition講座 データエンジニアリング編
Avatar for Takaaki Yayoi taka_aki
0
2.7k
Eight Engineering Unit 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
6.3k
Databricks Free Editionで始めるLakeflow SDP
Avatar for Takaaki Yayoi taka_aki
0
120
「リリースファースト」の実感を届けるには 〜停滞するチームに変化を起こすアプローチ〜 #RSGT2026
Avatar for KintoTech_Dev kintotechdev
0
1k

Featured

See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
9
1.1k
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
Avatar for Aleyda Solis aleyda
2
9.3k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
7.9k
How to Grow Your eCommerce with AI & Automation
Avatar for Katarina Dahlin katarinadahlin
PRO
0
89
What’s in a name? Adding method to the madness
Avatar for The Alliance productmarketing
PRO
24
3.9k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
246
13k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
65
8.4k
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
380
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
3.1k
The Mindset for Success: Future Career Progression
Avatar for Greg Gifford greggifford
PRO
0
210
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k

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