Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Deezer design system

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?

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).

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.

Jean-Baptiste VINCEY

July 02, 2019

More Decks by Jean-Baptiste VINCEY

Other Decks in Programming


  1. Atomic Design a methodology 
 by Brad Frost 

    build robust 
 Design Systems “Atomic Design is out now!” by Brad Frost used under CC BY
  2. 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
  3. 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 } }
  4. 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
  5. 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 } }
  6. 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 ) }
  7. 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 ) }
  8. 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)
  9. Many benefits • Ensure consistency • Ready to use in

    new apps • Easy to maintain and extend • Support design evolution • Strengthen collaboration with designers
  10. • 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:
  11. 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:
  12. 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