Design an Audio Playlist

Introduce playlisting into The Economist UK & World News app

The Brief

Create an audio playlist that is more subtle than the current implementation but more intuitive in its use.

Requirements:

Complete wireframes for both playlist creation and tracklist browsing. You must show the following content at a minimum. Think of anything else that a user may require.

1. Tracklist comprising of sections and individual tracks within these

2. Create / Edit / Remove playlist

• The component will need to be responsive between 320px and 375px wide (mobile).
• This feature will exist inside The Economist UK & World News app.
• The user needs to be able to easily navigate the tracklist of the selected issue’s audio tracks.
• The user should be intuitively able to understand how to create a playlist without a tutorial.
• how/what I choose to focus on in the playlist creation/browsing experience is up to me.

Researching the Problem

As user research, I decided to collect real voices by going through the user reviews (the latest 350 reviews with less than 3 stars) of the app at Google Play to find out the pain-points about their current experience and how it could be improved. I also researched The Economist’s target audience to decide if my ideas would work.

From this I defined the problem to be:

1. The speed control should be implemented as a default function as the users want to control how it plays.
2. Bookmark function does not work properly, so users need to find out where they were listening to from scratch.
3. Only titles and general topics are shown, so it is difficult to choose the tracks to listen to.
4. The app crashes often. It gives users some issues especially while they are driving a car and listening to the audio.

I discovered:

Reference:

There's a reason why at The Economist we don't chase the millennial generation

https://digiday.com/media/economists-subscriber-base-70-percent-male-trying-change/

https://www.economist.com/help/about-us#About_Economistcom

Defining the User

I compiled all the data I had to create two personas — Camelia and Adama. This would help me to focus my design on fulfilling specific needs and goals.

Mapping the Journey

To kick-start the planning phase I needed to determine the audio playlist features/functions and how my personas would use them to fulfil their needs.

First, I created the current site map to define how users currently journey through the app to reach their goal and what pages I would need to design to allow them to do this— to create an intuitive and simple audio playlist.

I then created a site map and user journey for both personas which reflected my ideas.

Sitemap V2

Use cases for persona Adama & Camelia: V2

Designing the Wireframes

As you can imagine, my mind was full of ideas and I was really excited to get these down on paper.

I decided the best approach would be to follow a “Draw, Debate, Draw, Collate” process. This presented me with multiple design solutions from which I could make an informed decision on which screens I would use.

Low-fi Wireframes

I created a paper-prototype in 320px to do some basic usability testing. From this it emerged that:

1. It would be more intuitive if users can directly add/remove the article they are listening to/from My Playlist by using the page menu.
2. It would be more convenient for users if the global nav bar is static on all pages. It contains a hamburger menu, audio and search. (e.g., An user can quickly restart the audio and go to the playlist when the app crashes even while they are commuting.)

I took steps to correct these flaws and iterations were made to my low-fidelity wireframes in Sketch. The crucial steps taken were:

1. Decide on margins & design universal elements together to establish uniformity in layout
2. Making the pop-ups almost full screen to ease usability and improve overall look & feel
3. Recently Checked and Editor’s Choice was added to the Track List — Many users are having very hectic lives, so these categories would help them to browse and put tracks quickly into the playlist. For more details, I would like to explain why I thought these ideas were good in a presentation.
4. I picked similar typefaces to Econ Sans and Milo Serif to create the UI. (Ubuntu and Playfair Display) Basically, I followed the real app for the layout.

However, as I created a low-fi interactive prototype, I started to find some contradictions. I would like to leave it for now because it would be interesting topics to discuss if I get called in to present my ideas. (I keep making amendments when another idea comes up because I want to make my work as refined as possible.)

• Haven’t I created something that satisfies only specific users? — I decided to target the most hectic readers for this task. I will explain why I think like this in a presentation.
• I put “the global hamburger menu” and “My Playlist” is included in the 1st draft. After I downloaded a few digital issues, I checked how the Playlist and Track List in the real app look like. Each issue has its own playlist and Track List. It means users cannot create “My Playlist and Track List” as they want. — I removed “My Playlist” from it.
• Is it appropriate as a digital version of The Economist if “My Playlist” is in the global hamburger menu? Because this app is NOT a podcast. — Removed.
• I need to think about a better idea for “Add to My Playlist” in a page menu.
  There is no point to have it there. Maybe direct access to Playlist from a page menu is better. — I decided to change it to “My Playlist”.
• User flow was messed up — I needed to simplify them by sorting screens neatly in InVision and issues still exist. — Use cases revised.
• 2 Bookmarks? — Let’s remove one from the global menu. — Removed.
• I want to make the audio as a pop-up since there is no point in having access to My Playlist from the audio page. — Made it a pop-up.
• Maybe, to avoid railroading the customers, I would remove a headset icon from the top nav bar. — Removed. I want to change the name of an item from My Playlist to Audio in the page menu.

What I have learnt:

1. That’s why collaboration is important! — My head was full of idea and I was so excited about it. However, when I created my prototype, I started to feel that I messed things up. What if there is(are) collaborator(s)? It probably could be avoided.
2. Dealing with a problem individually was still great because it was easier to experiment freely with my own ideas than when I was in a team. This experiment might end up with failure most of the time, but perhaps, once in a while, it might be a golden solution.
3. After I read the user reviews, my focus tended to go mainly on pleasing those who left the reviews. I of course, always kept the task requirements in my mind, but I focused on small trees too much, not a forest.
4. Sometimes, a real pain-point is hidden. I realised that UX designers need to dig into that level to provide a proper solution.
5. I’ve also learnt that my own personal/technical knowledge, skills, and experiences are very transferable to UX and I should confidently apply them to my work. I will do anything to improve it/to gain new skills. For now, I enrolled in a Gestalt Psychology and web design course at IDF.
6. I again realised that I love this job.

Thank you so much for this opportunity and reading this journal till the end. If you liked my journal, please leave 50 claps to me, thanks! :))