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
   

   View Slide

2. View Slide

3. Deezer ecosystem
   Mobile
   Desktop TV Car Wearables Speakers
   

   View Slide

4. Deezer ecosystem
   deezer
   360 by deezer Radio by deezer
   

   View Slide

5. Design consistency, evolution, reuse?
   

   View Slide

6. Implementing a new feature
   

   View Slide

7. Where to look for existing components?
   

   View Slide

8. Where to look for existing components?
   

   View Slide

9. What if existing components are different?
   

   View Slide

10. Let’s build a Design System!
    

    View Slide

11. Style Guide
    

    View Slide

12. Component library
    Style Guide
    

    View Slide

13. Component library
    Style Guide Guidelines
    

    View Slide

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
    

    View Slide

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

    View Slide

16. View Slide

17. View Slide

18. View Slide

19. View Slide

20. View Slide

21. Design System in practice
    

    View Slide

22. Choose our own vocabulary: Lego!
    

    View Slide

23. Setup a component library: the UIKit
    Design library Android library
    

    View Slide

24. Setup a Style Guide
    

    View Slide

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
    

    View Slide

26. styles.xml
    <br/><item name="android:textSize">20sp</item><br/><item name="android:textStyle">bold</item><br/>
    brick__card.xml
    …
    style="@style/h3"
    android:text="@{brick.title}" />
    …
    Atom style
    

    View Slide

27. 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
    }
    }
    

    View Slide

28. brick_card.xml
    
    
    name="brick"
    type="com.myproject.bricks.CardBrick" />
    
    
    style="@style/h3"
    android:text="@{brick.title}" />
    style="@style/Picture"
    app:pictureUrl="@{brick.pictureUrl}" />
    
    
    Molecule layout
    

    View Slide

29. 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
    }
    }
    

    View Slide

30. MVVM Lego architecture
    

    View Slide

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

    View Slide

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

    View Slide

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)
    

    View Slide

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

    View Slide

35. UI projects
    Design Update
    Right-to-Left Dark mode
    

    View Slide

36. To sum up
    

    View Slide

37. Component library
    Style Guide Guidelines
    What is a Design System:
    

    View Slide

38. Atomic Design methodology:
    

    View Slide

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:
    

    View Slide

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:
    

    View Slide

41. Questions ?
    Jean-Baptiste VINCEY
    @jbvincey
    

    View Slide

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
    

    View Slide