Deezer design system

As Deezer team expanded over the last years, making changes and maintaining design in the mobile app became a major concern:
- How to keep the different screens of the app(s) consistent and let the design evolve?
- How to ensure consistency across platforms / applications?
- How to fill knowledge gaps between designers and developers?

ATOMIC DESIGN
To tackle these issues, we decided to build a strong design system. Brad Frost developed a methodology called Atomic Design to create and maintain robust design systems, defining UI components in a bottom up organized hierarchy: from the tinier bricks (atoms and molecules) to the bigger ones (organisms).

UIKIT: AN ANDROID IMPLEMENTATION OF OUR DESIGN SYSTEM
To build our design system, we established with designers an UIKit, a pattern library -inspired from Atomic design- defining every UI component of the app. During the presentation, we will dive in the UIKit to see how UI components are defined and organized, integrated in the app with the global architecture, and the implications on the design and development process in our teams.

Transcript

1. Let your design evolve adopt a Design System Jean-Baptiste VINCEY @jbvincey
3. Deezer ecosystem Mobile Desktop TV Car Wearables Speakers
4. Deezer ecosystem deezer 360 by deezer Radio by deezer
5. Design consistency, evolution, reuse?
6. Implementing a new feature
7. Where to look for existing components?
8. Where to look for existing components?
9. What if existing components are different?
10. Let’s build a Design System!
11. Style Guide
12. Component library Style Guide
13. Component library Style Guide Guidelines
14. Atomic Design a methodology 
 by Brad Frost 
 to build robust 
 Design Systems “Atomic Design is out now!” by Brad Frost used under CC BY
15. The 5 stages of atomic design - Atomic Design, chapter 2, Brad Frost
21. Design System in practice
22. Choose our own vocabulary: Lego!
23. Setup a component library: the UIKit Design library Android library
24. Setup a Style Guide
25. UIKit implementation • Every page has a RecyclerView • Every UI component is a brick • The LegoAdapter is a RecyclerView.Adapter handling: - bricks display (any combination) - views update - recycling - animation
26. styles.xml <style name="h3"> <item name="android:textSize">20sp</item> <item name="android:textStyle">bold</item> </style> brick__card.xml … <TextView … style="@style/h3" android:text="@{brick.title}" /> … Atom style
27. Molecule brick CardBrick.kt class CardBrick( val id: String, val title: String, val pictureUrl: String ) : BaseBrick<BrickCardBinding>() { override fun getLayout() = R.layout.brick_card override fun bind(binding: BrickCardBinding) { binding.brick = this } }
28. brick_card.xml <layout …> <data> <variable name="brick" type="com.myproject.bricks.CardBrick" /> </data> <androidx…ConstraintLayout …> <TextView … style="@style/h3" android:text="@{brick.title}" /> <ImageView … style="@style/Picture" app:pictureUrl="@{brick.pictureUrl}" /> </androidx…ConstraintLayout> </layout> Molecule layout
29. Organism brick CarouselBrick.kt class CarouselBrick( @StringRes val titleRes: Int, val contentBricks: List<BaseBrick> ) : BaseBrick<BrickCarouselBinding>() { override fun getLayout() = R.layout.brick_carousel override fun bind(binding: BrickCarouselBinding) { binding.brick = this } }
30. MVVM Lego architecture
31. Page transformer ArtistPageBrickTransformer.kt class ArtistPageBrickTransformer( private val albumTransformer: AlbumBrickTransformer, private val artistTransformer: ArtistBrickTransformer ) { fun toPageBrick(artist: Artist): List<BaseBrick> = albumTransformer.toCarousel( R.string.discography, artist.discography ) + artistTransformer.toCarousel( R.string.similar_artists, artist.similarArtists ) }
32. Brick transformer ArtistBrickTransformer.kt class ArtistBrickTransformer() { fun toCarousel(@StringRes titleRes: Int, artists: List<Artist>) = CarouselBrick( title, artists.map { toBrick(it) } ) fun toBrick(artist: Artist) = CardBrick( artist.id, artist.title, artist.pictureUrl ) }
33. Remaining challenges • Setup the Design System everywhere in the app • Keep design and implementation on every platform aligned • Decide when we should put UI components in the Design System • Onboard everyone in the team (new comers)
34. Many benefits • Ensure consistency • Ready to use in new apps • Easy to maintain and extend • Support design evolution • Strengthen collaboration with designers
35. UI projects Design Update Right-to-Left Dark mode
36. To sum up
37. Component library Style Guide Guidelines What is a Design System:
38. Atomic Design methodology:
39. • A vocabulary • A style guide • A component library (design and Android) • An implementation based on RecyclerView and lego bricks How to setup a Design System:
40. Atomic Design (Brad Frost): http://atomicdesign.bradfrost.com/ A journey towards Atomic Design at Deezer (Jean-Baptiste Vincey): https://deezer.io/a-journey-towards-atomic-design-on-android-at-deezer- f384928bb04e Everything you need to know about Design Systems (Audrey Hacq): https://uxdesign.cc/atomic-design-how-to-design-systems-of-components- ab41f24f260e Stop designing interfaces, Start designing experiences (Nicolas Duval): https://medium.com/blablacar-design/stop-designing-interfaces-start- designing-experiences-d82def0b802c To go further:
41. Questions ? Jean-Baptiste VINCEY @jbvincey
42. This presentation will soon be available on the droidcon London website at the following link: https://skillsmatter.com/conferences/11785- droidcon-london-2019#skillscasts Jean-Baptiste VINCEY @jbvincey