Week 4: UI Adding a Feature to Audible
This weeks task was it to add a Feature — in my case the famous audio book platform audible — but what feature?
My task was it to add a Reading Section especially for graphs, studies and drawings.
As you listen to Non-Fiction Books mentioning some Graphs that are used to read in the physical Books, in the Listening Version you have no Idea what they currently talking about.
So it was my task to find a solution for that Problem.
But first Research!
To find out more about Audio Book Consumers, Audible Users and a possible Solution I did a Research through Survey which i spread in different Facebook groups with related topics such as book or audio book recommendations.
I found out that 26% consume Audio Books daily, 45% consume them sometimes and even 50% are using the famous Platform Audible for that Hobby. I also asked them on their Behavior while Listening to Audio Books and 62% mentioned that they do something beside — for example cooking, cleaning or trying to fall asleep.
Would they use a Reading Section?
I also asked them if they would use a reading section — 28% said No, 31% maybe — only if it was convenient and 40% said yes.
I also asked them for what they would use the Reading section and it turned out it would be usable for Graphs and Pictures but also Work Sheets or Studies (probably not really surprising but i wanted to hear it from my Users).
When there would be a Reading Section in the Audible App i found out that 62% would use it via their Smartphone instead of a Desktop Device. So it was obvious to focus on the App adding my Feature.
As i collected my Findings for an Affinity Map to get Ideas i was also considering some Questions:
- How does the assigned scenario fit into their day?
- What’s the hypothesis about how the new functionality will change their behaviors?
1st Idea was to ask every time they open an Audio Book from the Library whether they are interested in Graph content to be shown or not
2nd Idea was to show the Graphs when mentioned instead of showing the Book Cover you’re listening to
3rd Idea was to add a Graph Overview as soon that there is already a Chapter Overview in which you could easily implement it.
4th as a really tiny Implementing was the Idea of an Icon for those Books which provide Graphs. Because there are several Books which whether have Graphs nor Pictures.
Once more i opened the App to see if my Ideas would work but then I realized that this Feature kind of exists already!
But as you can see coming from the Chapter Overview on the left side there is this PDF: When you open it you’re handed over to a typical PDF View on your Smartphone. So i decided this is not Problem-Solving to my Users as they listen to an Audio Book where they mention “Graph Nr. 2” there is no Time searching a specific Graph.
So i decided to add this Feature in a user-friendly way!
So i created a User Flow showing the Happy Path of a User opening an Audio Book from the Library — is being asked whether he is interested in the Reading Section or not — then listens to the Audio Book and once they mention a Graph it’s been shown instead of the Book Cover. You could also Pause the Audio Book then close the Book and see the Chapter Overview to get also an Image and Graph Overview.
So i created a Paper Prototype and tested it.
But i found out that the Pop-Up Window for the Confirmation would be very disturbing every time you open a Book — especially when i think back of my research where not everyone would be interested in using this feature.
REDEFINING THE USER FLOW
How’s the brand communicating with its users?
I copied the Design of Audible and therefore developed the Atomic Design. I discovered that the design of the Icons are not consistent. Anyhow i tried to implement this design to my new Feature. The Icons in the orange boxes are added by me to navigate users through the Pictures. Because the Icons need to be seen on every Picture or Graph i decided to choose a background for them.
Also i decided to add the Feature to skip between the Pictures so you would also jump into the Part where they talk about it.
And of course you can expand the pictures but still pause or play the audio book. And if you want you could turn around your phone to see it even bigger and without the Play Bar.
As i mentioned before i wanted to add a Graph Overview: here you can see how it was before and after. I added an Icon which stands for Graphs — clicking on this would lead you to a Graph-Overview for every Chapter. Once there you can expand the Graph and also jump directly into the Audio Book where they talk about it.
Does it meet my Users?
When i tested my Hi-Fi Prototype I found out that some of my Users felt the Icons are pretty small. But before i tested a Version with bigger Icons for the new Feature. As you can have bigger reaction areas I decided I leave them as they are because as a lot of my users wouldn’t be interested in this Feature I wanted it really to be not disturbing and overtaking. Also i don’t want to forget about the Main function of Audible: You want to listen to an Audio Book!
Learnings and Future Decisions
I found out that the UI of Audible was not well organized as there were some Icons black, some of them in a dark grey without reason. Also the Icons seemed not be out of one Hand as there are some thiner and some thicker Icons. But on the other Hand I found it very interesting that even Audible is a well known app it seems UI is not the most important part for Launching a great Product which actually works quite well and is very common. But I think Audible could need a new UI designer ;)
But what i wanted to add: As i presented my final Work for this week i found out that there is a big Difference between the Android and the IOS App — also using an iPhone means having a Difference in the Look whether you choose the Dark or the Light Mode of your Phone.
Also a great Learning again was that Testing is just awesome — you get Feedback so fast if something is understood or needs to be done new.
As Affinity Maps are to Empathize with your Users it helped me a lot to get Ideas for adding that Feature and at the same time to empathize with the Product.
In addition i found out there was no Possibility in Invision and Invision Studio to show a horizontal Screen as a Prototype. Probably you need to switch the Video in the End and just build for this one second a new Prototype.
And last but not least Survey Findings taught me that probably more important for Audible would be to change their Algorithm of Book Recommendations as they see a lot of Books they’ve already listened to. Also it seemed that Recommendations were not based on what they’ve been listened to.
