A UX/UI Mobile Podcast App Project by Jeremy Nigel Blassan
DISCOVER
Understanding the problem
Scoping Framework Motivation:
Designing a podcasting mobile app that is highly personal, interactive & with the ability to bring more utility to the user than a book could ever could. Scoping Framework Project: Audio book/podcasting mobile app design
Motivation: Designing an audio book/podcasting mobile app that is highly personal, interactive and with the ability to bring more utility to the user than a book could ever could.
Participants Stakeholders
Goals
Users
Activities & Deliverables
Assumptions
Jeremy Blassan UX/UI Designer
• To create an audiobook mobile app which appeals to traditional, audio, e-readers and non readers • Offers a “human touch” to their overall digital reading experience • Cultivate “reading” habits for those who does not enjoy reading and are looking for alternative ways to start
• Existing audiobook users • Tech curious • Non reader but want to cultivate reading habit
Discover • 1:1 interviews Research, Surveys, Competitor analysis, Heuristic analysis
• The idea to utilise audiobook or the first time is da ntin or first time ser • Limited customisable/ personalised experience • Interaction with like minded readers has not been explored • Lack of ”human touch to the audiobook experience i.e note taking, page tagging and etc.
Internal • CEO • Developers • UX/ID Designer • Marketing Specialist External • End Users • Tech curious • Readers
ser enefits • Seamless reading transition from traditional book to audiobook • Interactive features that allows users to personalised their reading habits and patterns • Connecting to like minded readers • Cultivate new reading habits
efine • a nit mappin emphath mapping, personas, Customer journey Develop • Crazy 8’s, storyboard, MVP in ser o s ire ramin prototyping Deliver • Usability Testing, learning card
Risks
Milestones
Constraints
Scope
• Over saturated market • Market leaders - Amazon’s Audible, Spotify, Google Play Books, Apple Books have resources and capabilities to develop this space further
• Identifying issues and potential • Shortlisting desirable reading/user experiences which will inform the app’s goals and direction • Testing
• Limited budget • Limited team resources • Tight timeline • Online interview, meetings, research approach
To deliver a fully working prototype of a highly personalised interactive audiobook mobile app to the end user through foundational research, synthesis, UX development, ideation and usability testing
The Scoping Framework exercise gives me a bird eye view on the lay of the land for this project before I dive deep into research.
Problem Statements “Existing and new users who feels frustated with the lack of personalisation capabilities of the current podcast app and want to be able to engage with it in the same manner they could traditionally but is limited to the current available technology.”
By placing myself in a user’s position, I managed to hypothesised a Problem Statement based on their frustration with the current app.
Research Plan 1. COMPETITOR ANALYSIS Apple podcast and Spotify
2. SURVEYS 9 questions via Survey Monkey 38 Responses received
3. ONE ON ONE INTERVIEWS
Interview questions (Qualitative research)
Hi asey, thank you for accepting this interview session. he procedure we’re going to follow today goes like this. I’m going to ask you a few questions about yourself, and then we’re going to explore your thoughts on podcast consumption and how we could improve the service to the app itself . We aim to measure your opinion around your usage habits, your likes and dislikes and wishlist . The session will not last longer than 20 mins.
1. Describe your average day interaction with technology. phone/computer/tv/radio? 2. Which technology device do you often use? l li e t fin an p cast.
t
re ab
t
3. Have you listened to podcast before? 4. How long have you been listening to podcast?
2 Over the phone 2 Face to face
5. How was the adoption process from signing up to navigating the app? Easy or was it difficult an you describe the experience? 6. Which platform do you normally use? 7. How did you decide on which platform to use?
ti e
li e t t in ab t t e last listene t a p cast.
10. What podcast were you listening to? 11. Were you able to achieve what you wanted while using the app? 12. In the scale of 1-10, how would you rate your experience with the platform and why? 13. Is it easy to search for podcast or podcast channels? 14. What can be done better app navigation? 15. Do you want to have interaction with likeminded podcast listeners? why and how? 16. Do you read other listeners comments?
8. When do you normally listen to podcast? why?
17. If technology is not a limitation, what feature would you like to add to your existing app and why? What is your wish list?
9. What do you want from a podcast app? Understand their need, motivations, behaviours and activities.
18. Would you like to personalised/customised your podcast app? Is it a nice to have, important feature or you don’t mind? 19. If yes, do you mind sharing what kind of personalisation would it be and why?
onfirmation •
You think… because…
•
As I get it, you think that…
•
If I’m hearing you correctly…
•
What I hear you saying is…
•
So, from where you sit…
•
It seems as if…
And follow up with •
Is that how it is?
•
Is that right?
•
Does that make sense to you at all?
•
Is that how it sounds to you?
The Tell-Me-More Probe •
Interesting, tell me more about...
•
Why is that?
The echo probe •
Repeat their statement and highlight the area you want to know more... then what happened?
The uh-huh probe •
Yes I see’, ‘Right, uh huh’ ‘Mmm hmm
Casey Eigner Designer
Yogeeta Accountant
Michael Chan Businessman
Ai Mee Tax consultant
Research Findings 1. COMPETITOR ANALYSIS Apple podcast and Spotify
2. SURVEYS 9 questions via Survey Monkey 38 Responses received
3. ONE ON ONE INTERVIEWS 2 Over the phone 2 Face to face
Apple Podcast • Clean white interface • Queueing system, how to remove items unclear • Lacks customisable features i.e variable playback speeds, & reordering queues • app’s navigation simply confusing
• • • • • • •
• • • • • • •
Spotify Dark/night mode interface • Categories are colour coded • Navigation bar at the bottom • Settings notification is confusing • See all Podcast feature hidden right at the bottom
63% listen via the Spotify platform 43% listen while in transit or driving 59% finds personalisation of content and categories are important 43% listening method (both livestreaming & download to listen later) 89% listen to podcast on their mobile phone 57% subscribe to podcast channels 54% listen for entertainment Learnings Majority listens while multitasking and they only want to Lacks of relevant categorisation (category & content) be recommended relevant I just want to see items that i need podcast based on the Deleting old podcast is annoying selected categories. Sharing Need to be able to share podcast easily their podcast to social Queuing system is handy media platform easily Speed up feature is good when i’m time poor is highly desired. Want to be able to share easily to social media
DEFINE
efinin the pro em
nit
ap
Now that I have points from my research, I managed to ro p m findin s into several clusters based on themes such as User Behaviour, Personalisation, Navigation, Limitation & Interactivity. his process he p define the problems and develop potential ideas for solutions.
Empathy Map Empathy Map Project: Audio book/podcasting mobile app design
• Ability to share what I’m listening to at the moment with my friends.
• Commuters who takes public transport or drive to work and want to be productive during the trip.
• Need to be able to navigate and search for podcast easily within the app. • People who Work From Home as a result of COVID-19 Lockdown who now have the freedom to listen to music or podcast while they work.
• We will know it is successful if we can search for the intended podcast easily.
• Home makers who wants to listen to entertainment or learning new things while doing their chores at home.
• Recommendatiion will be given based on my current interest. How? Spot on recommendation given
• Multiple podcast platform offering platform exclusive contents.
• Able to queue podcast easily.
• Unhelpful reviews that are nasty by trolls. This is part of the reason why I don’t read/want to interact with other listeners.
• QUOTE: “Only listen to podcast when friends recommend.”
• Lacks relevant categorisation
• Friends/colleagues recommendation about Podcast channels that they should listen to.
• No alerts for new episode
• QUOTE: “Podcast is short and on point.” Better than Audiobook due to the shorter nature of the audio.
• Deleting old podcast is annoying
• Use platform which can recommend channels/ titles based on your history list.
• Too many recommendations that i didn’t ask for. Lost in the proposed contents.
• Some platforms are Not Ad free.
• Share same familiar interface. • Better search function. • Good Content is very important. • Speed up function is good when i have limited time. • Ratings important. A quick glimpse helps decide on what i want to listen. • Easy share to social media on what i'm listening to. • All podcast in one place • Listen to Personal Development topics
• Search algorithm needs to be smarter and understand users preference • Recommendation by the app platform are based on listening history list. • Content is very important.
• Podcast airing annoying adverts in the content. How can i skip • Podcast platform charges podcasters for uploading their podcast except for Soundcloud. • Visible search function/button is important
• My Search starts from news articles which leads to podcast. • QUOTE: As a podcaster, I want to interaction with listeners. • Personalisation of content. Very important. Remember your preference • Would it be good if i get top10 recommendations on my most visited topics that i like automatically. This is the personalisation that i need. • QUOTE: “Podcast is short & on point.”
• I pause when i need to concentrate on my work. Would be good to recap when i resume.
• An alert system to tell me when a new episodes is available and add them automatically into my queueing list.
• I just want to see items/features that i need. To be able to turn off sections that i don’t need would be amazing!
• Only read review for unfamiliar/new podcast.
Through emphatising with the ser i find that being in the pandemic in ence ho the interact with podcast. Majority listen while working from home and the need to connect leads to a higher desire to share what they are listening to. There’s also a higher desire in self improvement.
Meet our Persona Persona
“I love to be productive and constantly challenge myself mentally and the key secret to this is by getting more done in less time. Podcast make this possible.”
Abigail Lee
Thoughts/Feelings
Age: 36 cc pation Business analyst Location: Melbourne
•
he ee s r strated hen she s itch rom one podcast app to another in order to isten to the podcast that she ants.
•
he o d i e to e a erted hen the podcast that she i ed a ert her on an pcomin episode.
•
he ants a ic indication o pop arit star ratin or recommended o the podcast e ore commit to it.
•
he doesn t i e to scro thro h sections that doesn t interest her e ore reachin to her intended section.
Bio Abigail is a full time business analyst who currently works from home for 3 days and does the remaining da s rom the o ce. hes an ind strio s and dri en young professional who constantly looking for ways to etter herse in her persona ro th and career. he is er acti e o es ein prod cti e e en d rin her do n time. n the ee end she en o s socia interactions ith her riends o er r nch or dinner in the cit .
Motivations
• •
he ant to e i en recommendation ased on the podcast she istens to.
•
he o d i e to pa se her podcast hen she need to concerntrate on or t et a ic recap hen she ets ac to it. is i es ad erts hich she finds disr ptin the o o the podcast shes istenin to.
•
hen she find an on ine artic e that interest her she i research on podcast that re ates to it.
•
hare her findin s ith her riends and recommend to them podcast that she o es.
•
•
he o es to e prod cti e and e prepared to do somethin hen shes has ree time.
•
Goals Need to be engage mentally Climb the career ladder Want to be in the know of current social and economic topics
he does not i e irre e ant eneric cate ories proposed to her. he o d i e to see on cate ories that interest her.
After understanding my users, I created a persona to best represent them. • o es the speed p nction is ood hen i ha e imited time. Introducing Abigail, a driven business analyst who has Personality been working from home and Driven | Extrovert | Analytical | Busy | Organised | Team player she believe the best time to upskill is during the pandemic. •
e etin o d podcast rom her ist is anno in .
he o d i e to e a e to share hat shes istenin to a tomatica to her riends ia socia media. he ee s doin so she is indirect i in her riends podcast recommendation and it a so he p to oost her p ic profi e to potentia emp o er.
Customer Journey Abigail constantly looking for ways to better herself in her personal growth and career. She loves being productive even during her down time and she finds podcast caters to her need.
Awareness
Doing
User was recommended about an article by her friend. She then read the article online before clicking on the link and it brings her to the site to listen to the podcast.
Thinking/Feeling
• •
Customer Journey Map
Need to be engage mentally Climb the career ladder Want to be in the know of current social and economic topics
Project: Audio book/podcasting mobile app design
Consideration Since its a “work from the office day” tomorrow, the user decided to prepare for her long commute to the city.
Oh this is interesting. I would like to know more. Hey, there’s a podcast link in the article. Great!
Opportunities
Goals •
She turn on her podcast app and start downloading podcast for her long commute. Delete old downloaded podcast to make space for new ones.
Engagement She also add the podcast from the article she read recently to her download queue and decide to listen to that podcast first.
I’m going to see what i can add to my list.
As she entered the train, the user decided to put on her headphone and plays the podcast that she saved.
She also wanted to tell her friends what she’s listening to but find it difficult to do so. So she decided against it.
A search
On her way back from work, she continue to listen to her podcast but she could not remember what the podcast was about.
She reached her destination but her podcast was not over. So she paused it for later.
I’ll download the podcast from the article i read recently, add them to my queue list.
Great! Let’s listen to this podcast i saved yesterday.
Oh, I better let James know that i’m listening to this podcast from his recommendation.
Arghh, running out out space. Let’s delete the old podcast.
•
Filter categories that you are interested in.
•
View only recommendations from pre-selected categories.
•
“Staff recommendation” or any indication of must listen to Podcast within the selected category. A quick glimpse into the popularity of the podcast.
•
Search function within the category highly visible and clear with filtering capabilities.
•
Ability to delete old downloaded podcast to clear space on her mobile phone. Filter function to categorised based on podcast size, date, or even star rating
Her podcast ended. She then look for the podcast link, copied it and then share it on Facebook and LinkedIn and tagged her friends.
Loved it! Oh how do it rate this episode?
Forget it, too many steps! Only if the app will share what i’m listening to automatically.
I need to prepare for tomorrow’s commute to the city. I better prepare for it.
Sharing
Only if there’s a way to recap what i listened to earlier on this morning.
Ok, I’ll just share this podcast manually. I wonder whether there’s any other episode or similar podcast.
Wow, this is a long podcast. I better pause it now that i’m already at work.
Recap capabilities - Timeline (every 10 minutes) with snippets heading - Auto rewind option - a minute recap (2 times the speed) before resumes to the session Auto sharing option to social media - A preset option where one can share “live status“ of what they are listening to on their preffered Social Media channels.
Ability to share, rate or comment on the podcast easily once the user done listening to it.
I proceed with mapping Abigail’s journey to explore how she feels throughout every stage while engaging with the app. It’s an eye opener to be able to identify when & what makes her ticked which then informs me about the opportunities to solve their frustration & pain.
Customer Journey Opportunities View only recommendations from pre-selected categories. “Staff recommendation” or any indication of must listen to Podcast within the selected category. A quick glimpse into the popularity of the podcast. Ability to share, rate or comment on the podcast easily once the user done listening to it.
Filter function to categorised based on podcast size, date, or even star rating Ability to delete old downloaded podcast to clear space on her mobile phone. Search function within the category highly visible and clear with filtering capabilities. • Recap capabilities - Timeline (every 10 minutes) with snippets heading
Auto rewind option - a minute recap (2 times the speed) before resumes to the session Auto sharing option to social media - A preset option where one can share “live status“ of what they are listening to on their preffered Social Media channels. Filter categories that you are interested in.
From the Customer Journey, fi ter cate ories eas sharing & rating, podcast recommendation are some of the opportunities to solve the users frustration.
How Might We How Might We enhance personalisation experience for podcast listeners so that they can achieve their needs easily.
Based on the identified opportunities, I explored 4 suitable HMW. I then created an umbrella question that captures all of them. How Might We enhance personalisation experience for podcast listeners so that they can achieve their needs
DEVELOP
Developing possible solutions
Crazy 8’s
Referring to the HMW questions, I explored rough layout of the various page of my app through the Crazy 8’s exercise. I realised that for every iteration that i’ve done, I have thought of more ideas/possibilities than I consciously would have.
Storyboard
By keeping Abigail’s customer journey in mind, I further explore my idea and context through storyboarding. It helps me to visualised and assist me in understanding her journey while using the app.
DELIVER
Choosing and developing the solution
ra
s in
ence
There are a few ideas that stands out from the Crazy 8’s exercise which have good potential and I will further explore and plot them into my Minimum Viable Product (MVP) chart.
Minimum Viable Product (MVP)
After plotting all of the features that I wanted to build in this podcast app, I have a better clarity on what I should and sho d not inc de in the first instance. The ones circled are the feature I would like to include in my app.
User Flow
nce ha e identified which feature I want to build, I proceed with the User Flow which helps to shape how the user navigate through the app.
Information Architecture & Intuitive Design
Building on from the User Flow, I use it as the base of my information architecture. It is during this process that I consider a few inituitive updates to the IA as listed above.
Wireframes
Sketches to explore ideas
Digitised version once a direction has been selected
CASTAWAY PODCAST APP BRANDING
Castaway branding
Logo mark & Favicon
SIGN UP SIGN UP SIGN UP Background
Colours
C0 M24 Y100 K0 R255 G915 B0 HEX #FFC300
Typography
C75 M68 Y67 K90 R0 G0 B0 HEX #000000
C64 M56 Y56 K32 R83 G83 B83 HEX #535353
C0 M0 Y0 K0 R255 G255 B255 HEX #FFFFFF
ABCDEFG abcdefg123
ABCDEFG abcdefg123
ABCDEFG abcdefg123
Logo font Helvetica Bold
Body copy Roboto regular
Heading Roboto Bold
The brand is a clever play on the word “castaway” where cast represent podcast and away represent the simplicity of using the app. Simply click on the app and you are ready to go. I wanted to have a warm and energetic feel to this podcast app as podcast exist to inspire, inform and energise their users. Hence why the Yellow will represent energy this app will emit, Black will represent the authority and certainty of the podcast source. Helvetica is the san serif font used for the logo as i want a clean and modern font to represent this podcast app.
Prototype 01(High Fidelity) & Usability Test
I have done Usability Test with a total of 8 candidates and encountered several note worthy challenges and issues which will be re ected in m iteration of the prototype.
Iiterate, iterate, iterate 1
• Setup page and Register page can be combined to reduce the amount of steps in onboarding.
2
• Separate the Currently Playing and Next Episode sections & include scroll bars. • Increase font size for podcast description. • Make the play buttons clearer and add play next episode button.
Iiterate, iterate, iterate 3
• Remove hovering feature as this does not work on mobile and reconsider layout for Categories Selection as category titles are not readable.
4
• Remove Share, Delete Podcast and Play Next Episode button from the menu feature as these should be placed next to the individual podcast instead. • a so add rofi e tton so that ser can amend their profi e easi .
Iiterate, iterate, iterate 5
6
• Add Delete Podcast button on every podcast in the Download List page
• Add a pop up page that prompt user to like or dislike the podcast. • Followed by 2 podcast recommendation based on the previous played podcast.
Updated Prototype (High Fidelity)
www.figma.com proto
ti
W m cw
yy
P Podcast App node id
A
scaling scale down page id
A
Summary, Learnings & Next Steps Summary
Learnings
e ectin on the ro em tatement and HMW’s after iterating the prototype, I believe we managed to answer and solve most of the persona isation iss es that e identified earlier in the research stage. However, there are still areas of the app that requires further research and development and this can be re ected in the ne t eat res iteration.
pon re ection o d ha e done a more extensive wireframe to avoid more iterations in the prototype usability testing stage. I would also like to conduct a retrospective session to discuss what happened during the research and development process, with the goal of improving things in the future based on those learnings and conversations.
Next steps • Look into integrating the recap function of the app when a user decided to continue listening to a paused podcast. •
p ore notification eat re or ne episodes and ho or here it i
• Rating for all podcast feature should also be considered.
e p aced in the app.
Thank you