One App To Rule Them All (Tablets)

Music has been such an important part of my life since I was in middle school. I could still remember the first time watching Guns N Roses music video, the first time listening to Master of Puppets, and the first time seeing Korn’s Got the Life for 90 secs on MTV.

During college years, I built a website to promote undersground rock bands, organized concerts, and even released an album. So when I got an offer to join Amazon Music as a senior ux designer, I immediately jumped on board.

BACK STORY

I joined Amazon on Jun 01, 2014 to lead the design of Amazon Music app experience inside our very own Fire Tablets. Fire tablets were first introduced in 2011 and its second generation 7” tablets were very popular among tablet market. It quickly became a competitor of iPad. Fire tablet users are also Amazon’s most loyal customers and Amazon Music’s pressence on this platform is really important to the organization.

Two weeks in on June 12 2014, we launched Prime Music and it was made available on all major platforms. 

MY ROLE

I led the design of Amazon Music on Fire OS tablets. This included listening experience inside Library, Prime Music, and purchasing experience inside Music Store. I worked together with 1 PM, 2 technical project managers, web development team for the purchasing experience, native android development team for the listening and browsing experience, and 2 other designers to sync the experience across mobile platforms. 

THE CHALLENGES

Wasn’t Built To Scale

Even though the launch of Prime Music was a success and a big win for our customers, the fixed and tight deadline made us chose the quicker route which was to build on top of our existing web store. The UX of Prime Music on all Amazon Music apps were not up to industrial standard and it was the worst for Fire tablets since the platform is not back supported to the devices most of our customers were using. The app wasn’t designed to scale across 4 different screen sizes and densities. So the engineering team was making tweaks and releasing 4 builds every time we need to back support a feature.

Design Structure

The navigation structure of the app was very confusing for our users to navigate around the app and even if they understood, it was still hard for users to browse Prime Music and listen.

Hardware Support

Starting from 2014, Amazon slashed the price of Fire tablets dramatically since it is a huge win for our loyal customers. But this comes with a price and it is the stability of the modern software architecture on a less powerful hardware. A lot of the things Music design team has decided to do were hard to acheive on new Fire tablets. 

New Features

Starting from 2014, Fire tablets have two major updates. A completely new Home Launcher to give users a better experience and a SD card expansion to provide better storage. These are major wins for our customers but at the same time come with big challenges for us.

Design Solution

REBUILDING THE APP STRUCTURE

The first thing I did was to sit down and talk to the engineering team to fully understand how we have previously built the app, and what are the changes needed to fully back-support all of our previous generations. During these meetings I found out that
1. Our Android app was not built in DP (device pixel) but in normal pixel values, which made it impossible to scale the view properly across different screen sizes and device densities
2. Previous designer and PM made some device specific design decisions which made the development team to build a few different builds to support all the device.

My first action based on the those findings was to review every single screen inside the app and try to narrow them down into 4 views. This made the development to be much simpler and easier to plan the development process.

I wanted to make sure we build our app the right way by using DP instead of PX. So the next step was to go through all the Fire tablets released in the past 3 years, plus this coming year to get all the detail information like PPI values, physical sizes, pixel values, the soft key bar placement, and what type of home screen the devices will have depending on the OS version. I needed these information to calculate the devices in DP value and finally found out that all the devices actually fell into 4 screen sizes with 2 of them share the same width. This was the key to successfully create one app

As I have stated above, the Fire tablet devices were designed to be using low-end capability and capacity to meet with the price point we want to set. This means the memory won’t be able to handle the type of experience we want to deliver to our customers. So at every step of the user flow, I have to think about how the images would load, whether different sizes of the same image could be used (we couldn’t), and whether the device’s memory could handle those loads.

Another problem to solve was n order to be able to scale across different devices without losing the design structure, I have to come up with how to display text and images so that the visual rhythm of the design will still be in place. This is where I started to use multiples of 4 for font sizes and line height values, and multiples of 8 for all other areas like image sizes and paddings. In some cases I have to create a content area value that would be divisible by 8 and center align the view. This helped the design to display at a pixel perfect level even on devices with decimal values. 

One final thing I did was to create redlines for small modules that the development team can build to construct pages. It was important for me to do since FireOS platform at that time didn’t have a proper design structure like material design. My design redlines were the first ones made by second party team and was adopted by OS design team directly. They were later added into design library of FireOS.

THE NEW NAVIGATION

When Prime Music was launched, the navigation structure looked like the screen on the right. All sub category level items are shown inside the hamburger menu, which made the whole navigation to e bloated with a lot of options.

After putting Prime Music section above Library and Store, this interface has a lot of usability issues like switching between different sub categories inside Prime Music would require opening and closing the hamburger menu. And the same for every sub category inside Library and Store. 

As it is shown below, the new navigation structure cleaned up the hamburger menu and put all sub categories on tab view which makes it easier to browse.

Another data driven decision made in this navigation design was putting the collections front and centered. Streaming service made users to enjoy a whole lot of music but users don’t have time to go through everything. Creating something like curated Prime Playlists became our users’ favorite content type in Prime Music. That’s when we started Prime Stations and introduced them on Fire tablets to get initial results and the responses were overwhelming. So in our upcoming Fire tablet release, we made Stations and Playlists the first two tabs on Prime Music and Playlists to be the first inside Library.

Here are some of the mockups from the app.

MUSIC MAGAZINE HOME

With 2015 model, Fire tablets made a dramatic change for the FireOS home launcher. We’ve always had a carousel launcher that highlights the recently consumed content with some room for recommendations, to the structure where we will have content divided into three parts. Resume, Consume, and Explore. This is a significant change with opportunities to reach better to new customers. I worked directly with the designer from the OS team to come up with the requirements from our Music team’s goals. 

Resume part will have currently playing content ready to be played. Consume part will have our content from our Recent Activity section. This includes recently played, added to library from Prime Music, downloaded to the device, and purchased music from the store. And for the last explore part, I have to align with our team’s goal of pushing Prime Music as the main product. All Prime members will see relevant recommendations from Prime catalog inside the explore  part. Non-prime members will have recommendations from Store catalog but the store itself will have Prime trial which will help us in converting non-Prime members to members. 

SD CARD EXPANSION

With 2015 model, Fire tablets started to have SD card slots. This is a huge win for our customers since the maximum space we have on the device is 8GB. But it comes with a lot of challenges for us since there will be one more extra way for customers to save / load content. I have to think about:

1. first time downloading to SD card
2. moving all the content between internal storage and SD card
3. failed scenarios and success scanarios
4. switching the download location between internal storage and SD card 
5. SD card taken out while music is playing
6. how playlists will handle when songs in a playlist can be on cloud, device, and SD card 
7. when the SD card with DRM protected content are added onto another device that might not have the right to play those DRM content.

Since most devices in US don’t have SD card feature, I ordered a phone from China that supports SD card and started doing research on all the cases mentioned above. Plus, I also started testing around with other apps that support SD card and I wrote the below document to solve every scenarios I mentioned above.

The Results

The scaling process went really well and for that, we successfully brought back all the new features we planned for newer devices all the way to our older generation devices. It also brough down a lot of work load for the development team to back support all the device. 

The redesign of navigation has dramatically improved the usage of the music app on all platforms. More prime content were consumed which helped us learned a lot more about our users’ behaviors which led us to even expand more on the streaming music business with Music Unlimited.

Music app’s home launcher screen logic worked really well in generating new Prime sign ups. In fact, Amazon Music on Fire tablets became the highest reason for our tablet customers to sign up for Prime. 

The SD card support for our music app also help the music team not just with the Fire tablets but also with our Android app. Now that Amazon Music has been launched in India, the SD card support is helping a lot of our customers to enjoy their favorite music.

Conclusion

I was with the Amazon Music team for only a little bit over a year but I get to work on two generations worth of designs and it was such a thrilling experience for me. Prime Music has taken on the streaming music by surprise and the new & improved UX just made everything better. But I do believe that It is still day one just like Jeff Bezo has said. 

For confidentiality reasons, I have taken out the actual numbers from all the companies I have worked for and have put percentage. These are all just my views on the project I worked on and does not represent the views on the organizations.

© www.yairpike.com 2011-2021