Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Mobile Design System at scale

Avatar for Kajornsak Peerapathananont Kajornsak Peerapathananont
December 20, 2020
Technology
160
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
38
How to build native-experience with cross-platform
Avatar for Kajornsak Peerapathananont kajornsakp
0
46
Understanding your Android build
Avatar for Kajornsak Peerapathananont kajornsakp
0
68
iOSDevTH #21
Avatar for Kajornsak Peerapathananont kajornsakp
0
65
What's new in Flutter (Google I/O Extended Bangkok 22)
Avatar for Kajornsak Peerapathananont kajornsakp
0
100
What's new in Flutter 2020
Avatar for Kajornsak Peerapathananont kajornsakp
0
94
Mobile Machine Learning for All Skill Levels
Avatar for Kajornsak Peerapathananont kajornsakp
0
54
What's new in Flutter 1.9
Avatar for Kajornsak Peerapathananont kajornsakp
0
72
Kotlin meets Web
Avatar for Kajornsak Peerapathananont kajornsakp
0
45

Other Decks in Technology

See All in Technology
Loop Engineering これくらいでいい
Avatar for mikan mikanichinose
0
150
LocalStack を使ったサーバーレスアプリケーション開発 / Serverless Development with LocalStack
Avatar for Yoshiaki Yoshida kakakakakku
1
340
V8のArray.prototype.flatを最大約20倍速くするまでと、巨大OSSへの大規模コミットの道のり
Avatar for Riya Amemiya riyaamemiya
0
110
More Freedom on the Same Shared GPU Cluster: A Small Team’s Experience with vCluster
Avatar for NTT docomo Business nttcom
0
140
実践！ SRE × AI - ABEMA における AIOps -
Avatar for tetsuya28 tetsuya28
7
2.5k
二歩目のフロントエンド・ウェブアクセシビリティ
Avatar for KAMIHARA Takumi camiha
2
250
Essential architectural thinking (revised edition)
Avatar for Uwe Friedrichsen ufried
0
110
あなたの知らないAmazon VPC Route Server／Amazon VPC Route Server you don't know about
Avatar for モブエンジニア（Masaki Okuda） masakiokuda
2
250
OSC2026on_the-world-is-waiting-for-your-voice.pdf
Avatar for Naruhiko Ogasawara naruoga
0
360
カンファレンスに参加した後の浮遊感とセルフケア
Avatar for Pauli pauli
0
320
検証フェーズはAIの回答を判断するための学習機会
Avatar for Toru_Kubota toru_kubota
2
550
今こそ知りたいAmplifyGen2
Avatar for k.masachika mkdev10
2
160

Featured

See All Featured
How to build an LLM SEO readiness audit: a practical framework
Avatar for Nick Samuel nmsamuel
2
940
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
Avatar for Tech SEO Connect techseoconnect
PRO
0
450
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
Avatar for David Carrasco davidcarrasco
3
280
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
22k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
3.2k
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
390
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
211
25k
Navigating Team Friction
Avatar for Lara Hogan lara
192
16k
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
4
54k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
35
2.9k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
203
77k

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