Sample music app for Android media developers by Google.
UAMP stands for Universal Android Music Player. I worked with members of Google’s Android Developer Relations team to design a canonical sample media app, which is intended to serve as a starter project for developers wanting to create media experiences on Android.
Developers can use different components from the sample app and customize them for their specific needs if needed.
Nov - Dec 2017
- Visual Design
- Interaction Design
UAMP only has one type of user: Android Media Developer. They are tasked with building an Android media app for work. They can build this app from scratch, but it would take a long time. They are looking for open source code components to reduce the development time of their music app.
The sample app had to include all the common features that a standard music app would have such as playlist management, media controls (play, pause etc), scrubber etc.
The goal of the visual design was to build an elegant, easy to follow and visually appealing app using Google’s Material Design guidelines.
The team used 3” x 5” sticky notes to create multiple versions of screen layouts and then chose the most suitable options to create user flows. Sticky notes are great because they are small and it’s fast to generate many iterations. Also, they stick on the wall for everyone to see, which is great for fast iterative collaboration.
I created this interaction flow to allow the engineering team to determine what it would take for them to build it. It includes notes about interactions of how components of the app behave when interacted with.
Low fidelity prototype
A low fidelity prototype was created in order to test that the user flow felt right and made sense. It was delivered to the engineers with the interaction flow diagram.
Typography & colour theme
The goal for the visual design was to use Google’s Material Design guidelines but change them enough to give UAMP its own unique outstanding look and feel. We wanted to communicate that even though it’s a sample app, it doesn’t have to be just the common orange and white combination that media sample apps often use.
High fidelity mockups
The high fidelity mockup was delivered to the engineering team, so they could start implementation.
High fidelity prototype
High fidelity prototype was created in InVision and delivered with the mockups to the engineers. This was to facilitate the communication of most of the interactions to the engineering team.