UAMP

Sample music app for Android media developers by Google.

Universal Android Music Player image

About

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.

Platform

Android

Time

Nov - Dec 2017

Role

  • Visual Design
  • Interaction Design
  • Prototyping

User stories

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.

Requirements

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.

Wireframes

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.

Wireframe

Interaction design

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.

Click here to view large image.

Interaction design

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.

Low fidelity prototype gif

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.

Typography

High fidelity mockups

The high fidelity mockup was delivered to the engineering team, so they could start implementation.

Click here to download the Sketch file of the high fidelity mockup.

High fidelity mockups

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.

High fidelity prototype gif

Featured projects

Abbey Road Studios

Abbey Road Studios
Open project