JOOX — How I redesign the apps for easier content discovery

This is a concept that I created for easier content discovery and seamless User Experience

Introduction

I love music, let’s be honest. Who doesn’t? I basically use JOOX almost every day, in par with Spotify. I even set up my phone to wake me up with JOOX as my music alarm. It has been a pleasant experience so far. However, JOOX has always frustrated me. There are lots and lots of content inside JOOX. Start from Music, Videos, Radio, Live Music and tons of other things. Because of this, JOOX tends to look so overwhelming with contents for first time user who expect to listen to music as their objective. And I believe I could make JOOX even better.

So I took a challenge to redesign their apps. I spent 4 days to take things apart, understand how it works and why it’s there, and try to improve the user experience. This practice is purely based on my own research and my personal usage.

First question, why Redesign?

For me, JOOX has this problem where the content can be overwhelmed with lots of different things. While their main use is still a music streaming app, but then they started adding more and more things to the app — like Live Music, Music Video — and it lost the main core function to work as a music streaming app.

Content doesn’t mean anything if nobody who uses the app actually watched it.

While I personally don’t have any problem with the content they have provided for us, it can be a problem when the content get cluttered all over the apps and make a user confused on what they should do first.

Check out how many guidance apps are the on how to use JOOX.

The fact that they show up right after I search JOOX gave me an answer that JOOX needs some kinds of redesign to tidy up their content and creating a new experience for the user while they are discovering content on apps.

Also, check out how long their discovery tabs.

Now I understand why people need guidance apps to use JOOX

After looking around on their apps and dismantled the apps tab by tab, I get why people need to use guide apps to use JOOX. And also, their visual identity was the culprit of many headaches that people have when using the apps.

So in this case, I approached my redesign in three steps, while conducting research throughout:

  • User Research and their goal
  • Information Architecture
  • Redesigned UI

And in this JOOX redesign I tried to achieve 3 main goals:

  1. Design something that’ll perfectly fit my needs as a user.
  2. Revisited Information Architecture to fit JOOX core function as Music Player
  3. Create a new realistic redesign and make a new in-app experience that would actually be useful for the user.

User Research

A little bit background about myself — as the user.

  • Age: 20–25
  • Device: 90% Mobile Phone 10% Desktop
  • Songs of collection: >2,000 songs
  • Frequency of use: >5 hours everyday ( I like to listen to music while I work)
  • Needs: Access to all the music I like, discover new music and share music with friends and while I’m here, I probably want to check out if the artist have the MV for their song.
I like listening to music, and JOOX has gave me a free access to their huge music library. Now I just need two things, One spot for my favorite songs and another spot for music and content discovery.

User Goals

  1. Listen to and save their favorite music
  • Quick and easy way to search for a song
  • Build a personal music library or playlist to listen repeatedly

2. Discover new music and other contents

  • FRESH HITS — listen to recommended songs
  • Radio — listen to songs that are similar to certain songs, albums, artists or playlists
  • Editor’s Picks — songs that recommended by JOOX curator based on what’s trending
  • Live — Music and Live contents provided by JOOX

3. Socialize with friends

  • Share songs or playlists
  • See friends activities
  • Lyrics Card — JOOX will created a sharable content based on song lyrics.
So, what can we do to help user achieve their goals?

The simplest answer is to provide them with an awesome user experience to make them love using the app. Let’s start from the backbone of a digital product — Information Architecture(IA).

Information Architecture on JOOX

Most of the people that I interviewed have the same question when I asked them to do some certain task — can you save the song? And their answer is always — how do I do that? They all get confused by the navigation that JOOX has. So what I do here is to visualize the current Information Architecture, let’s see what is going on.

I was actually surprised by the many types of contents that JOOX has. How many of them actually being is a duplicate section and how little content that I am actually using. Seriously, what’s with the JOOX Radio? What so different between that and the Radio?

Main issues

  1. Too many contents
  • Duplicated sections or similar functions
  • Only a few parts of content are frequently used by the user

2. Lack of priority

  • JOOX need to prioritize the apps top user flows
  • Need to create visual hierarchy

User Journey Map

User journey maps allow you to find user main pain point and strategize for key moments to make their experience better. I’ve mapped out top three user flows with user goals and pain point at each in order to define the key opportunities.

Main User Pain Points

  1. Listen to saved songs — ‘My Music’
  • Hard to differentiate between user-created playlists and all subscribed playlist
  • Too many duplicate sections

2. Search a song and save it — ‘Search’

  • Hard to find the right song because the result is not based on user listening habit
  • No audio preview
  • The result is mix between artist name and song name

3. Discovery songs and Live

  • Hard to choose from too many recommendation sections
  • Some of the section is not related to user habit
  • Music video is not based on what user listen to

Here’s come the fun part, redesign!

On this section, I will restructure the Information Architecture and redesign some User Interface based. I’m going to propose a couple of suggestion that resolves the pain point found on the user journeys.

Old IA vs New IA

In every popular product, it has always been started from MVP (Minimum Viable Product) with the main core function and it becomes more and more cluttered when we added new features as it grows to suit the needs of the users. It’s good to take a step back and focus on what actually matters to the user and how do we present that.

In order to create more organized content and focus to the main function, I reorganized the information architecture, combined the duplicated section, removed a section that user never actually uses — such as user playlist and JOOX Updates. And give a new name to the old section.

Wireframe

As I take a look back at the new information Architecture, the are now five section in the revised IA which are ‘Feeds’, ‘Discover’, ‘Search’, ‘Live’, ‘My Library’. I separated ‘Discover’ tabs into ‘Feeds’ and ‘Discover’ as they now served a different purposed on showing the contents. ‘Feeds’ is where you can see all the latest update on artist your user has followed and listened and ‘Discover’ is for the user to discover new kinds of music and contents.

Since the tabs are out the range for sweet touch spot, I changed the navigation tabs from the top right to bottom navigation tabs so that user can easily navigate between screen without them stretching their finger. And I redesign this whole app based on the principles of Complexion Reduction.

Redesigned Wireframe

UX Suggestion and User Interface Redesign

After analyzing top three user main pain points, I will summarize the new UX suggestions by section.

  1. Feeds
  • Daily Picks — I’ve added a new section on the main banner, and it’s called Daily Picks. Daily Picks a is a song collection playlist based on user listening habit and curated by JOOX team every day.
  • Location and Time-based playlist — I’ve also added a time and location based playlist for the user. Because these days, people don’t look for songs anymore, they’re looking for mood and ask when is it a good time to listen this kind of songs.

2. Discover

  • Label name — I suggest to change a label like FRESH HITS to New Released because the apps should be clear on what is new and what is not.
  • Recommended Playlist — Playlist that suggested by JOOX based on all JOOX user listening habit.
  • Live Music — This content is pretty important for user who looks for a new artist, and love listening to live performance.
Current Discovery Tabs vs Redesign Discovery Tabs

3. Search

This section is pretty straight forward, this section will be use by the user to find anything they wanted, the range starts from the playlist, MV, Songs, Artist, and user also can see what’s trending on the search right now. And also, sort the search results by popularity — Most of the time user didn’t really know the name of the artist when they tried to find a song. So this could be helpful for the user to see which song they searched is the popular one.

Music video section also will be shown when user search for something to promote video content that JOOX has.

Search tabs

4. Live •

JOOX have this amazing feature where the user can watch Live Chat with the Artist, Artist Live Performance, Artist Interview — all in one place. The only problem that the current UX is the content is so cluttered and all over the place. So I rearrange the content placement, renaming the label and create a UX that focus on what’s user actually look for when they want to see video contents.

Current Live Tabs vs Redesign Live Tabs

5. My Music

  • On The Go — This feature is special to JOOX since the user can actually download the song on wifi and listen to it while they are on the way to go somewhere.
  • Karaoke — User can also download karaoke songs to sing while JOOX shows the video and the lyrics.
  • Name labeling and breakdown — Instead of having a different section to listen to an offline song and all songs, I’ve decided to combine those two and change the name to songs. Let’s say user already downloaded the song, they will see a little icon that shows that this song has already downloaded and saved to the devices. And, give the music library the update they needed — different section for a different purpose. If let’s say the user wanted to listen to a song from Taylor Swift, the user can go to Artist and find all Taylor Swift song that the user has saved to their library.
Current My Music tabs vs Redesign My Music Tabs

Final Thoughts and Reflection

To me, JOOX is one of the best music streaming apps in Asia, with tons of amazing feature like Card Lyrics, Karaoke, and many others. But as many other digital products, sometimes the UX inside the apps make the user confused and needed a guide. UX design is all about happiness. As a user, it is the exciting and memorable moment of using a product, and as a designer, I love the design thinking process of understanding why things work and why not. So I wanted to improve JOOX User Experience and User Interface because of the problem they have.

“It is not enough that we build products that function, that are understandable and usable, we also need to build products that bring joy and excitement, pleasure and fun, and, yes, beauty to people’s lives.” –Don Norman

I hope you like the idea and the concepts and thank you for reading until the end! Feel free to follow me on Medium or on Twitter for more awesome stuff.

Ciao!