Tag Archives: Multi-form factor designs

Deezer increased its monthly active users 4X after improving multi-device support

Posted by the Android team

Deezer is a global music streaming platform that provides users access to over 110 million tracks. Deezer aims to make its application easily accessible, letting users listen to their audio when, where, and how they want. With the growing popularity of Wear OS devices and large screens and foldables, the Deezer team saw an opportunity to give its users more ways to stream by enhancing its multi-device support.

We’re focused on delivering a consistently great UX on as many devices as possible.” — Hugo Vignaux, senior product manager at Deezer

Increasing smart watch support

Over the past few years, users increasingly requested Deezer to make its app available on Wear OS. During this time, the Deezer team had also seen rapid growth in the wearable market.

“The Wear OS market was growing thanks to the Fitbit acquisition by Google, the Pixel watch announcement, and the switch to Wear OS on Galaxy watches,” said Hugo Vignaux, a senior product manager at Deezer. “It was perfect timing because Google raised the opportunity with us to invest in Wear OS by joining the Media Experience Program in 2022.”

Deezer’s developers initially focused on providing instant, easy access to users’ personalized playlists from the application. To do this, engineers streamlined the app’s Wear OS UI, making it easier for users to control the app from their wrist. They also implemented a feature that allowed users to download their favorite Deezer playlists straight to their smartwatches, making offline playback possible without requiring a phone or an internet connection.

The Deezer team relied on Google’s Horologist and its Media Toolkit during development. Horologist and its libraries guided the team and ensured updates to the UI adhered to Wear best practices. It also made rolling out features like audio and bluetooth management much easier.

“The player view offered by the Media Toolkit was a source of inspiration and guaranteed that the app’s code quality was up to par,” said Hugo. “It also allowed us to focus on unit testing and resiliency rather than developing new features from scratch.”

More support for large screens and foldables

Before updating the app, Deezer’s UX wasn’t fully optimized for large screens and foldables. With this latest update, Deezer developers created special layouts for multitasking on large screens, like tablets and laptops, and used resizable emulators to optimize the app’s resizing capabilities for each screen on foldables.

“Supporting large screens means we can better fit multiple windows on a screen,” said Geoffrey Métais, engineering manager at Deezer. “This allows users to easily switch between apps, which is good because Deezer doesn’t require a user's full attention for them to make use of its UI.”

On tablets, Deezer developers split pages that were displayed vertically to be displayed horizontally. Developers also implemented a navigation rail and turned some lists into grids. These simple quality-of-life updates improved UX by giving users an easier way to click through the app.

Making these changes was easy for developers thanks to the Jetpack WindowManager library. “The WindowManager library made it simple to adapt our UI to different screen sizes,” said Geoffrey. “It leverages Jetpack Compose’s modularity to adapt to any screen size. And Compose code stays simple and consistent despite addressing a variety of different configurations.”

Updates to large screens and foldables and Wear OS were all created using Jetpack Compose and Compose for Wear OS, respectively. With Jetpack Compose, Deezer developers were able to efficiently create and implement a design system that focused on technical issues within the new app. The Deezer team attributes their increased productivity with Compose to Composable functions, which lets developers reuse code segments, and Android Studio, which helps developers iterate on features faster.

“The combination of a proper Design System with Jetpack Compose’s modularity and reactive paradigms is a very smart and efficient solution to improve usability without losing development productivity,” said Geoffrey.

'With the new capabilities of Wear OS 3, we’ve optimized the Deezer experience for the next generation of smartwatches, letting our users listen to their music anywhere, anytime.' — Hugo Vignaux, senior product manager at Deezer

The impact of increased multi-device support

Increasing multi-device support was easy for Deezer developers thanks to the tools and resources offered by Google. The updates the Deezer team made across screens improved the app’s UI, making it easier for users to navigate the app and listen to audio on their own terms.

Since updating for Wear OS and other Android devices, the Deezer team saw a 4X increase in user engagement and received positive feedback from its community.

“Developing for WearOS and across devices was great thanks to the help of the Google team and the availability of libraries and APIs that helped us deliver some great features, such as Horologist and its Media Toolkit. All those technical assets were very well documented and the Google team’s dedication was tremendous,” said Hugo.

Get started

Learn how you can start developing for Wear OS and other Android devices today.

Introducing the Android Design Hub: The ultimate resource for building exceptional user interfaces across all form factors

Posted by Adhithya Ramakumar, Design Lead, Android Developer Experience and Rebecca Gutteridge, Senior Developer Relations Engineer, Android

Cross posted from Android Medium

We’re introducing the Android Design Hub to make it easier to build compelling UI across form factors.

What is the Android UI design hub?

The design hub is a comprehensive resource with opinionated guidance designed to empower designers and developers like you to create stunning and user-friendly interfaces for Android apps. It's all about sharing takeaways, examples and do’s and don’ts, starter Figma kits, UI samples and inspiring galleries. This is the beginning of a journey we'd love for you to join us on.

Why the Android UI design hub?

A well-designed UI is crucial to the success of an app, and that's why we created a one-stop shop designed to help create outstanding user interfaces across all Android form factors:

The design hub goes into depth about what it means to design for Android, at the same time complementing and extending our Material Design open-source design system. As the Android ecosystem adds an increasing variety of devices, it's more important than ever to create seamless and adaptable experiences for your users. The Android UI Design Hub is your comprehensive resource for mastering the art of designing and implementing UI on a diverse range of devices, from smartphones and tablets to foldables to wearables and TV.

Here’s a sneak peek of what you'll find in the design hub:

Resources organized by form factors

Gain access to a library tailored for each form factor, including guidance, design templates, and sample projects. With these resources at your fingertips, you're well equipped to create exceptional UI experiences for every device category.

moving image of various form factors

Galleries with UI inspiration across form factors

Spark your creativity by exploring our collection of Android app designs for a variety of popular categories of apps such as Social, Productivity, Health & Fitness, Shopping, and more. Get inspired by thoughtfully curated examples and discover design patterns to tackle common design challenges across form factors for

moving image of various Android aopp designs

Design guidelines

Dive into the nitty gritty of Android design principles, learning how to implement high-quality Android designs and understanding app layout with Android system bars, navigation modes, theming, and more. Our comprehensive documentation helps ensure that your app's design adheres to the highest standard and directs you to the latest Material Design guidelines.

Guidelines:

Design tools and resources

image of a 6 x 3 grid of illustrated designs

Equip yourself with an extensive selection of design tools, templates, and resources, specially tailored for Android development. Streamline your workflow and bring your app ideas to life more efficiently:

Check out the code samples with their corresponding Figma Kits:

Whether you're an experienced designer or a developer looking to enhance your design skills, the Android Design Hub is here to support and guide you throughout your journey.

So what are you waiting for? Visit the Android UI design hub today, and start creating exceptional user interfaces that captivate your audience and leave a lasting impression. Happy designing! 🚀