Introducing a design system in Dailymotion Android application

Michel Gauzins
Sep 24, 2019 · 6 min read
Image for post
Image for post

After some interesting introductions to Atomic Design and design system, we decided to jump in and launch our own design system implementation starting with our Android app. The purpose of this article is to share the very first steps, from an Android developer’s perspective.

Why introduce a design system?

“We’re not designing pages, we’re designing systems of components”, Stephen Hay

Our goal is to have only one source of truth, no matter when the screen has been designed; a week or a year ago. For this to work we need good communication and clear component naming. A design system allows the style guide of an application to evolve easily with minimum additional effort from designers and developers.

Context

The Dailymotion Android app is:
→ 10 modules (3 for apps, then others for tracking, design and helpers)
→ 90% Kotlin code
Coroutines started on October 2018
→ Android App bundle

Basic rules

To keep the module consistent, we apply some basic rules:

→ Logic and data must be completely separate from the design part. If the job is already done in most cases, some classes could require a lot of effort, but it’s for the best.

→ All design elements should remain in the design module.
We prefixed our classes with “DM” to help developers figure out what’s currently integrated or not. With design classes, we drain color resources, drawables and dimensions. We aggregate elements while working on features or refactoring, leaving the main module even more understandable.

→ The purpose here is to ensure that the design module is the single source of truth. When we follow this rule, views hosted in layouts should never specify directly design attributes. TextView uses styles referenced in the design module. Other views with design configuration must use custom classes and custom attributes if needed.
This way, layouts become simpler, easier to read with only one job: organize and place design elements.

XML vs Kotlin

The main issue with styles is that everything could be styled. There is neither a naming convention, nor a specific place to reference them.
At some point that we haven’t reached yet, we could think about how to deal with all these elements, to keep things clear and easily evolvable. We decided to allow the use of direct styles reference for TextView, hosted in a dedicated textview_styles.xml. The future will tell us if it’s enough.

Attributes vs Classes

Design Show: the demo app

Image for post
Image for post

Why a demo app?

Even more modules

Dark mode

Image for post
Image for post

Legacy code challenges

In addition, legacy code set up some years ago is of limited interest in a design system if not upgrade to reflect the current style guide.
Worse, it can pollute it with a lot of new useless styles and classes. The goal is having something evolvable, not to have it all.

This doesn’t mean we should wait for a fully functional design system.
At Dailymotion, we believe change is easier to apply in small steps. With this in mind, our solution allows developers to start using the design system for a new screen at the same time as the discussion for uniformizing older screens is going on. The demo app is an efficient tool to discuss about legacy code and upgrades with the designers.

With patience, step by step, we can prepare the app to be fully functional for a more wider team collaboration and plug it to a design vision. We are at the very early stage, and only the future will tell us if we are right. However, what we can already say is that is better involves developers in design quality and generates a stronger cohesion between teams. Working with a design system points out the design quality and allows us to focus on users expectations.

Dailymotion

The home for videos that matter

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store