Let your design evolve adopt a Design System Jean-Baptiste VINCEY @jbvincey

No content

Deezer ecosystem Mobile Desktop TV Car Wearables Speakers

Deezer ecosystem deezer 360 by deezer Radio by deezer

Design consistency, evolution, reuse?

Implementing a new feature

Where to look for existing components?

Where to look for existing components?

What if existing components are different?

Let’s build a Design System!

Style Guide

Component library Style Guide

Component library Style Guide Guidelines

Atomic Design a methodology 
 by Brad Frost 
 to build robust 
 Design Systems “Atomic Design is out now!” by Brad Frost used under CC BY

The 5 stages of atomic design - Atomic Design, chapter 2, Brad Frost

No content

No content

No content

No content

No content

Design System in practice

Choose our own vocabulary: Lego!

Setup a component library: the UIKit Design library Android library

Setup a Style Guide

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

styles.xml <item name="android:textSize">20sp</item> <item name="android:textStyle">bold</item> brick__card.xml … … Atom style

Molecule brick CardBrick.kt class CardBrick( val id: String, val title: String, val pictureUrl: String ) : BaseBrick() { override fun getLayout() = R.layout.brick_card override fun bind(binding: BrickCardBinding) { binding.brick = this } }

brick_card.xml Molecule layout

Organism brick CarouselBrick.kt class CarouselBrick( @StringRes val titleRes: Int, val contentBricks: List ) : BaseBrick() { override fun getLayout() = R.layout.brick_carousel override fun bind(binding: BrickCarouselBinding) { binding.brick = this } }

MVVM Lego architecture

Page transformer ArtistPageBrickTransformer.kt class ArtistPageBrickTransformer( private val albumTransformer: AlbumBrickTransformer, private val artistTransformer: ArtistBrickTransformer ) { fun toPageBrick(artist: Artist): List = albumTransformer.toCarousel( R.string.discography, artist.discography ) + artistTransformer.toCarousel( R.string.similar_artists, artist.similarArtists ) }

Brick transformer ArtistBrickTransformer.kt class ArtistBrickTransformer() { fun toCarousel(@StringRes titleRes: Int, artists: List) = CarouselBrick( title, artists.map { toBrick(it) } ) fun toBrick(artist: Artist) = CardBrick( artist.id, artist.title, artist.pictureUrl ) }

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)

Many benefits • Ensure consistency • Ready to use in new apps • Easy to maintain and extend • Support design evolution • Strengthen collaboration with designers

UI projects Design Update Right-to-Left Dark mode

To sum up

Component library Style Guide Guidelines What is a Design System:

Atomic Design methodology:

• 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:

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:

Questions ? Jean-Baptiste VINCEY @jbvincey

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