Now in Android: a Material 3 case study
Learn how we designed the Now in Android app with Material 3
Manda Edling (UX designer) and Paris Hsu (Product Manager) on the Android Developer Experience team wrote the following post
Now in Android is a fully functional Android app built entirely with Kotlin, Jetpack Compose, and designed with Material 3. Its source code and supporting material is intended to be a useful reference for developers.
For end users, it provides regular news updates from the blog series of the same name, helping you keep up-to-date with the world of Android development.
This article describes how we applied Material 3 concepts to the app and explores the accompanying design file which has just been released.
Design file release
We’ve published the Now in Android design file so you can get insight into app design at scale. You can duplicate the Figma file from the Material Library or get the pdf version from our Github repository. The design file contains the styles and components created for the Now in Android app; it serves as a guide for designers creating Material 3 components and Android app designs.
The journey
Design challenge
At I/O ’21, Google unveiled Material 3 — the latest evolution of Material Design that embraces emotion, expressiveness, and personalization.
This personalized experience presented an interesting design challenge for us:
“How might we design the Now in Android app with the new personalized Material 3 design system such that it also reflects the Android developer brand?”
Together with design agency Instrument from Portland, Oregon, our design team spent two months working through the details of the spec with this question in mind.
Color experiments
Experiment #1: We first tried the most obvious idea: seeding the Android brand’s primary, secondary, and tertiary colors into the Material Theme Builder:
Result #1: The color combination created a sleek serious palette that produced a cool technical vibe but the blue text wasn’t ideal for an app showcasing articles and news.
Experiment #2: We realized a related but simplified palette might work better so we tried limiting the palette to just the primary brand colors:
Result #2: This worked better for readability and created a warmer, relaxed look and feel, but we found ourselves asking the question “could we apply the android theme more directly?”.
Experiment #3: For this experiment, we handpicked color from the Android color palette into the color slots, instead of using the direct output from the theme builder.
Result #3: Android’s primary green color is on the cusp of dark and light luminance,
so it can’t be used with white text without accessibility contrast problems. Trying to hand pick colors this way was time consuming and created accessibility issues. It didn’t let us take advantage of Material 3’s built-in ability to automatically generate accessible palettes.
The pivot
After these experiments, we had a variety of palettes to choose from built from original brand colors, which helped us understand using Material 3 theming with an existing brand, but we also wanted to fully embrace the personalization aspect of Material 3. The design team thought, “Instead of using slight variations of the Android Green and Blue, why don’t we try to express Android in a completely different way?”
That is:
Focus the design direction more on the energy we want to showcase with Now in Android: Fun, Bold and Lively
This is how the Now in Android brand was born. The design team made use of bright colors and bold shapes to express the app’s identity.
These design decisions were especially important when used in conjunction with Dynamic Color. This is an Android 12 feature which chooses a color palette for the app based on the user’s wallpaper, allowing apps to provide a personalized experience.
Even when using a personalized color palette, the app’s bold shapes and typography maintain the defining characteristics of the Android brand: Fun, Bold and Lively.
The last tweak …
There was one aspect of the color palette our stakeholders took issue with. They didn’t like our neutral tones. For our final palette, the generated neutral tones were redder and warmer than they liked. We had several options: try to sell them on the warmer tones, continue to explore palettes, or cool down just the neutral tones. We took this as a real world challenge, one that many designers and developers face every day. We decided to explore what it means to customize the automatically generated Material 3 styles.
This type of customization is not advised unless you are prepared to manually check contrast and guarantee that the customized colors will still be accessible. Material 3 automatically generates accessible color palettes that when used in the correct combination — for example primary with on-primary, surface with on-surface — will maintain accessible color contrast. This extra customization provided an opportunity to show developers and designers a path to further customize color palettes should it be required. For most cases, we recommend using the automatically generated palette.
Learnings
Creating the Now in Android brand using Material 3 made us think of color and brand identity in new and different ways. In the end, we based our brand not on a hex code but instead a mood produced by color, shapes, types, and overall brand as emotion. These types of explorations were made possible by using the figma Material Theme Builder plugin and the Material Design kit.
Creating a design file
File structure
Once we’d found our visual design system, we started constructing mockups and experimenting with layouts. To assist with this, we built a Figma design file containing color styles, font styles, components, and screen layouts. The structure of the file resembles similar file structures of Material 3 codelabs and kits in the Material 3 Figma library.
Pages:
Cover
Introduction
Styles
Components
Layout Examples
Print
The Styles and Components sections make it easier for you to see, examine, and apply the app colors, fonts, and components. The Layout Examples show how these components are applied together for different sized screens. And the Print section lets you easily save the styles, fonts and components as a PDF if needed.
Components
The components used in this app were created using the Material 3 Design Kit. Building components based on this kit alleviates a lot of the difficulties designers run into by letting you build a component first then adapting it to Material 3. It’s easy to apply a theme to these components and then adjust them to meet design needs if required.
Within the Figma design file some components that were customized beyond the Material 3 kit and Theme Builder plugin are visually tagged so designers can see where changes were made. These changes to components were made after testing with users and reviewing with stakeholders.
What’s next?
As work on the Now in Android app continues and its design evolves, look for updates to both the design file and to future Now in Android blogs. Not only do we hope both designers and developers will learn from the Now in Android app, we are also learning as we go and we hope to bring these learnings to you.
If you would like to comment or ask questions about the Now in Android Design file you can leave a comment or create an issue in our GitHub repo.
