Final Design
Avid
Enhancing the Experience of Listening to Podcasts & Audiobooks | Mobile App Design
My Key Contributions
Product Market Fit
Moodboard & UI Conceptualization
UX Design
UI & Interaction Design
User Testing
Tools
Figma, Figjam, Adobe Photoshop, Microsoft Office
Team
4 Product Designers
Timeline
5 weeks
Background
For my Interaction Design course, my team and I decided to design an app to enhance the experience of listening to podcasts & audiobooks. We focused on creating a memorable & sleek UI for the app, simplifying user tasks, brainstorming novel features and incorporating fun interactions.
Goal
-
Features that support the behavior of the target audience.
-
Better information retention.
-
Strong brand identity for Avid.
The Problem Space
![Showreel-Grid-Mobile-[remix] (1).gif](https://static.wixstatic.com/media/356d37_a852a24315e8402fa6c8dc22673445d0~mv2.gif/v1/fill/w_962,h_720,al_c,pstr/Showreel-Grid-Mobile-%5Bremix%5D%20(1)_gif.gif)
Competitive Analysis
Spotify
Strengths
-
Personalized Recommendations: Advanced algorithms offer highly personalized content ie., curated playlists and podcast recommendations.
-
Easy Navigation with well integrated features.
-
Visual Appeal: High-quality graphics and album art enhance visual appeal.
Weakness
-
Content Overload: The vast amount of content makes discovery overwhelming.
-
Music First Approach: The app's features primarily focus on music, with podcasts & audiobooks as add-ons.
-
Supporting Visual Content is Inaccessible: Video content or visual artefacts to support audio content are linked to a different platform ie., youtube or personal website.
Audible
Strengths
-
Feature-Rich: Advanced features like bookmarks, speed adjustments, and sleep timers.
-
Offline Access: Ability to download content for offline listening.
-
Consistent Layout: Consistent and predictable layout makes it easy to use.
Weakness
-
Limited Podcast Features: Podcast features are less developed compared to audiobooks.
-
Plain UI: The UI can feel a little sterile which does not promote user engagement.
Apple Podcasts
Strengths
-
Seamless Apple Integration: Excellent integration with the Apple ecosystem.
-
Voice Control: Siri integration allows for hands-free control.
-
Consistent Aesthetics: Consistent with other Apple apps, providing a familiar look and feel.
Weakness
-
Limited Customization: Fewer options for personalization.
-
Weak Content Discovery: Limited recommendation features make content discovery harder.
-
Lower Visibility for Content Creators: Limited to iOS users.
Pocket Casts
Strengths
-
Advanced Features: Features like trim silence, volume boost, and variable speed.
-
Cross-Platform Syncing: Seamless syncing across multiple devices.
-
Customization: Allows significant customization of the UI to match user preferences.
Weakness
-
Limited Podcast Features: Podcast features are less developed compared to audiobooks.
-
Plain UI: The UI can feel a little sterile which does not promote user engagement.
Market Research
Source: Backlinko, Wordsrated
Understanding the Target Demographic
-
Teenagers and young adults are the main consumers of podcasts. Audiobooks are consumed by a wider age range.
-
Podcasts and Audiobooks are popular all around the world which creates a need for wide range of languages and accents to be accessible.
-
Video podcasts are on the rise, offering a new dimension to audio storytelling.
Understanding User Behavior Trends
-
Majority of the people multitask while consuming audio content.
-
Majority of the users explore for new content within the app, followed by talking to friends & family.
-
Most users consume audio content on their mobile devices with headphones, followed by tablets and voice activated speakers.
The Solution
Competitive Analysis
Gap In The Market
Pain points & Opportunity
Based on our user research and competitive analysis, we concluded to focus on the following challenges that would elevate Avid's user experience compared to what is currently available in the market.
Notes
Enhance info retention by taking down notes while/ after listening to content.
Video View
Video view for video content, graphs or other visual content to support podcasts.
Handsfree Mode
Multitask & safely listen to content without looking at/ touching the screen.
Personalization While Onboarding
Provide personalized content to new users.
Features that enhance the experience of listening to podcasts & audiobooks.
Without the distraction of music, Avid will integrate
Option paralysis due to content overload.
A widely noted painpoint that users face with content based platforms is
Opportunity
Pain points
Dice Roll
Overcome option overload with personalized content recommendations.
Engaging Feed
Large content feeds are presented in an engaging format to reduce cognitive load.
Multitasking while listening to podcasts & audiobooks.
Features that enable a commonly noticed user behavior of
Lack of video or visual content that creators use to support their information in podcasts.
A common deficiency studied in our competitive analysis is
Novel Features Introduced
While we enhanced the UX of our app in many ways, these are the main novel features we integrated to address the user pain points.
Personalization While Onboarding
Highlighted Feature 1
-
Most audio based apps in the market do not have personalization in their onboarding process which leads to new users entering an app with no relevant recommendations.
-
We have designed a short onboarding which allows the user to decide the level of personalized recommendations they would like to receive from the app.
-
The user can stop swiping at any point and hit "continue" to enter the app.
.png)
Log In
Select Interested Genres
Avid seeks to get a deeper understanding of what the user likes.
A fun way to make onboarding less cumbersome while allowing Avid to learn the user's preferences.
Engaging Feed
Highlighted Feature 2
Fun Fact!
The "Discover Indie/Local Artists" feature was born out of user testing.
.png)
Making large content screens with long scrolls easier to consume by -
-
Using horizontal carousels.
-
Establishing repeated patterns to format content.
-
Sprinkling video content to provide a break from browsing through static thumbnails.
When most users thought the graphical books were interactive, I decided to make them so!
Video cards
Short snap-shot videos autoplay while scrolling. They are muted until the video card is opened.
Bookshelf
Bento grid with graphics of books & vinyls injected in between - Designed to create a feeling of browsing through a bookshelf.
Indie Finds
Opening the bookshelf graphics will provide visibility to independent or local artists that would otherwise get lost in the crowd.
Dice Roll
Highlighted Feature 3
Within "Search", we have introduced the Dice Roll feature where the user answers 2 questions and receives only 4-5 recommendations based on their listening history and their current mood.
This aims to resolve the pain point of being overwhelmed with too many options and being unable to make a choice.
.png)
Podcast Detail View
Highlighted Feature 4
While designing the Podcast Album Detail View, we prioritized presenting all the options upfront and providing all the necessary information to help the user make a choice easily.
Add to Collection
Filter & Sort
More
.png)
Side bar that presents all options upfront
Episode List
Video View
Highlighted Feature 5
Many podcasts utilize visual artifacts like graphs, pictures etc to support their content. Video format podcasts have also become increasingly popular which forces users to switch to Youtube.
Avid has created a one stop platform for all things Podcast - Enabling video content and time stamped viewing of visual artifacts.
.png)
.png)
.png)
Option to Switch to Video Mode
Option to Switch to Audio Mode
Fullscreen Mode
Transcripts & Notes
Highlighted Feature 6
.png)
Episode Detail View
Transcripts with Current Sentence Highlighted
Transcripts
In our product discovery interviews, all users mentioned that having transcripts would very helpful to either mentally focus on the content better or sometimes, to understand accents.
Notes
Some users also mentioned that they write down summaries of podcasts or facts/quotes that stood out to them in their Notes app.
We decided to incorporate that feature so all the corresponding podcast & audiobook notes are available and well organized on Avid.
.png)
Option to Switch to Notes
Notes
.png)
Audio Player Remains Accessible to Use while Taking Down Notes
.png)
Option to Highlight Text
Handsfree Mode
Highlighted Feature 7
We noticed a common user behavior of multitasking while consuming audio content, with driving & cooking being the most common activities.
We introduced Handsfree mode to address 2 issues that arise while multitasking:
- Navigate without needing visual attention on the screen
- Navigate when the users' hands are not free/ clean to use the screen
.png)
.png)
.png)
.png)
Adding Escape Routes
After
Before
"How do I exit this screen if I don't like any of the recommendations?"
- Heading made bigger in accordance with the design system.
- Added an exit button.
Design Change
User Feedback
.png)
%20(1).png)
Search
After
Before
"Is the Search screen suggesting 1 podcast in each genre? What's the difference between the Search screen and Dice Roll? "
Search Screen: Thumbnail of each genre card is made into a collage of multiple podcasts to make it clear that it will lead to more content in that genre.
Design Change
User Feedback
%20(1).png)
.png)
Color Contrast & Icons
After
Before
"I like the mood thing… how are you feeling today. But there should be more moods"
"Can we make the text bigger?"
- Addition of more moods.
- Default state of mood pills made white to increase legibility.
Design Change
User Feedback
Homescreen
After
Before
"Easy to find the podcast, but I would like to have a big playcard on the homepage to be minimized to get a better view of everything on the page"
Reduced the card size of "Recently Listened To"
Design Change
User Feedback
User Testing
.png)
We tested our designs with 12 participants ranging from the ages of 16 - 45.
We synthesized our user findings and insights on Figjam before making some changes that enhanced the usability of our app.
.png)
Some Quotes from User Testing
.png)
Next Steps:
-
Inclusive Design:
We have added a lot of features like transcripts, handsfree mode, playback speed which would be helpful to the disabled community. I would work on refining these features in accordance with WCAG to be accessible to a wider range of users. -
Monetization Plan:
Strategize monetization for the app such that it serves both the user and the business needs. -
Refine & Pitch the Design to Spotify:
We have put our hearts into this design and I believe Avid would be a wonderful resource for podcast & audiobook listeners.
To Know More About Avid
User Testing for Avid
Logo Iterations
Selected Logo
Moodboard
The starting point for our UI inspiration was the sleek design of the Apple Airpods Pro.
We abstracted the anodized-aluminum matte finish and played around with the colors till we landed on a sweet spot.
We have also attempted to make scrolling feel reminiscent of browsing through a bookshelf.