Challenge:
Podcasts have become an important method of delivering audio content to people allowing them to listen to these contents while they are on the move, working out or in their free time. Persian podcasts are gaining popularity among Persian-speaking users but the podcast management applications like Castbox, Apple Podcasts, or Spotify do not meet the needs of this user segment.
This project was designed as my Bsc. Computer Engineering final project and recieved a full mark from the professors at Shiraz Univeristy of Technology.
Solution:
Design a podcast Application that puts the needs of Persian podcast users front and center.
Role:
UI/UX Designer
Tools:
Figma
Empathize
Conducting a survey
We conducted a survey containing questions about the behavior, needs, emotions, context, and actions of podcast users. We also incorporated the issues we found in our competitive audit in our survey questions to test them against the real users' needs.
The survey questions were categorized into:
General Questions
User Experience level
User context while listening to podcasts
Payment Activity
Accessibility
Containing questions about vision, hearing, motor and cognitive disabilities and user preferences about using light and dark themes
Demographic info
The charts below showcase the results of the survey analysis:
Gender
Age
Podcast use history
Podcast listening context
Podcast app used
Payment prefrences
Vision Disabilities
Hearing Disabilities
Motor Disabilities
Cognitive Disabilities
Creating Personas
After analysing the survey results and comparing the them to the competetive analysis results, we extracted four main user-groups for Cassete app. The personas below each showcase one of the user-groups for our application.
User Story
As a driver, I want to be able to listen to podcasts on my rides so that I hear stories about travel and learn new languages.
User Story
As a University student who works part-time, I want to be able to listen to podcasts on my long commutes between university and work and going home so that I learn new things about science on my drives
User Story
As a runner and influencer I want to be able to listen to podcasts on long runs so that I learn new things about sports and social-media influencing
User Story
As a work-from-home pastry cook I want to be able to listen to podcasts while I bake so that I learn about different food cultures, classic literature and learn new languages.
Define
Problem Statements
Arian Rezaie is a travel enthusiast Snapp driver who needs to be able to listen to and control podcasts while driving because he spends most of his time driving people to different locations.
Esmaiel Nabavi is a tech-savvy university student and part-time worker who needs to be able to listen to podcasts on his long commutes because he wants to make use of this otherwise lost time.
Shaghayegh Zobeidi is an athlete who needs to be able to listen to and control podcasts while she exercises because she wants to learn more about her fitness and influencer goals.
Mohadese Saffarzadeh is a work-from-home business owner who needs to be able to listen to podcasts while she bakes because she wants to make use of the time her hands are tied with baking and learning new things.
Hypothesis Statements
If Arian Rezaie downloads the Cassette app, then he can listen to podcasts and control them easily and without distractions while he drives.
If Esmaiel Nabavi downloads the Cassette app, then he can listen to scientific podcasts on his long commutes.
If Shaghayegh Zobeidi downloads the Cassette app, then she can listen to and easily control fitness and influencing podcasts on her runs.
If Mohadese Saffarzadeh downloads the Cassette app, then she can listen to podcasts while she cooks, using this time to learn about classic literature and new languages.
Value Proposition
Our Cassette app allows Persian Speakers to listen to Persian podcasts in a more effective and easy way. The app allows people to :
Use simple mode in different situations like running or driving to avoid getting distracted from their activities when they want to manage and control the podcasts they're listening to.
Discover new podcasts and search for new podcasts or topics easily
See other users' feedback and ratings while looking at podcasts
Support and purchase Persian podcasts
Use the application even if they have disabilities due to the accessibility measurements considered in the app design process
Ideate
Competitive Audit
To conduct a competitive audit, we analyzed Shenoto, Avano, Castbox, Podcast App, Apple Podcast, Telegram and Spotify which are applications that deliver podcast content to Persian users.
The main issues of these apps include:
Difficulty working with the app while driving
No comment sections to give feedback in Persian podcast applications and usability issues in Persian language comment features in global apps.
The lack of good similar or new Persian podcast suggestions to users in the global apps.
Payment issues when supporting or purchasing Persian podcasts in global apps
Inadequate categorization for podcasts in Persian Apps
The lack of Accessible design, especially regarding theme colors resulting in issues for people with vision disabilities.
Goal Statement
Our Cassette App will let users listen to and manage Persian podcasts easily and effectively which will affect Persian podcast users by allowing them to use effective and accessible discovery, search and easy playback functions We will measure effectiveness by the number of episodes listened to every month.
User Flow
Paper Wireframes
Wireframes
Sitemap
Design
Brand Identity
Logo Design
In the process of designing our logo, we aimed to create a distinctive brand identity that is both unique and simple, leaving a lasting impression on users. Our logo incorporates the product name "Cassette," the letter "ت" from the Persian alphabet , and the shape of old cassette tapes. We sought to ensure the logo's independence from color, allowing flexibility for potential changes in the product color scheme without necessitating a redesign.
Through iterations, we simplified the design further by removing details such as notches and cuts in the cassette tape shape. Additionally, we introduced a brand statement to enhance brand identity. The final logo is a refined representation that resonates simplicity while maintaining a strong connection with the product, reinforcing recall and recognition in the minds of the audience.
Color Pallete
Choosing suitable colors for applications goes beyond aesthetic appeal; it significantly impacts text readability. Thoughtful color choices not only attract users' attention to key areas but also prevent eye strain during prolonged app usage. Inappropriately used colors can lead to visual fatigue, poor visibility in different lighting conditions, and user confusion (for instance, the consistent association of green with "confirmation" and red with "danger and errors").
Beyond these considerations, selecting appropriate colors is crucial for the accessibility of applications, especially for users with visual impairments. In the case of Cassette, the chosen color codes were designed to ensure optimal contrast, with most text presented in black against a white background and a purple hue that meets the AAA standard of the W3 institution for all text sizes, providing the highest level of accessibility.
A contrast ratio of 7:1 or higher ensures compliance with accessibility standards, promoting inclusivity and a positive user experience for a diverse audience.
Typography
Given the limited screen size of mobile phones, choosing an appropriate font is crucial for the readability of text data in applications. Text data in applications is divided into various types such as titles, body text, subtitles, etc. For each text type, we defined "text styles" aiming for consistency in size and font across different sections, as visible in Image 3-1. Each of these styles includes the font, text size, and its thickness (Image 3-2), making them reusable in different parts of the application. There's no need to redefine size, font, and thickness for new text; we simply use the defined style name throughout the application.
The chosen font is IranYekan 3, with its license purchased for non-commercial use. IranYekan is one of the most widely used Persian fonts in web and application design. Many prominent brands and companies such as Digikala, Sheypoor, and Rubika have designed their websites or applications using this font.
Components
In the design of the Cassette application, we employed components for icons, informational cards, buttons, banners, input fields, charts, and menus. This approach ensures not only their consistency throughout the application but also facilitates ease of modification without the need for extensive changes to the entire app. Using components enhances efficiency and maintainability, allowing for seamless updates and modifications to various elements, such as icons, informational cards, buttons, banners, input fields, charts, and menus, without impacting the overall design integrity of the entire application.
Main Functionality high-fi design screen-shots
Login/Sign up
The initial screen in our app is the login page, requiring users to identify themselves with email and password. User data, such as listening history and transactions, is linked to unique email-based accounts. New users sign up with personal details, and password recovery is available for returning users.
Home
After logging into the app, users are directed to the Home page where they can view notifications for new episodes of followed podcasts and listen to them. The Home page also provides access to downloaded episodes, favorite episodes, and user playlists.
To explore new podcasts or topics, users can either use the search option on the Home page or navigate to the Discover page through the bottom menu.
Discover
If the user navigates to the Discovery page, they encounter app-selected categories, including personalized recommendations based on their listening history, suggestions based on overall user preferences, thematic categorizations, and editorially curated selections. To search for specific podcasts, episodes, or topics, users can utilize the search bar at the top of the page.
Podcast
Upon selecting a podcast, users access its page featuring cover image, name, creator, and follower count. They can follow, explore episodes, view descriptions, social links, and comments with ratings. Comments include user details, brief comments, ratings, and timestamps.
On the episode pop-up , clicking play plays the full episode, while clicking elsewhere opens a section with details and options like download, favorite, share, and comments. Users can also play the episode directly from this section.
Players
In the player screen, users control the episode with features like play/pause, rewind, fast forward, and a timer. They can add the episode to playlists, share it, and access descriptions and comments.
For hands-free activities like driving or exercising, a simplified player screen offers larger controls and easy access to essential functions, enhancing user experience. Users can switch between the simple and detailed playback screens for convenience.
Setting
The Setting option in the bottom menu provides users access to app settings and user profile information. Here, users can edit their account details, view donation transaction history, find FAQs, and access educational articles. Additionally, users can manage app settings, and if needed, log out from their account without losing profile or podcast subscription data.
Figma Files
you can view all of the components and design pages for cassete app in Cassette Figma link
Interactive Prototype
Figma Prototype
you can view the interactive prototype for cassete app in Cassette Prototype link
Test
Quality Assurance Testing (QA):
During this test we examined the product and user flow for any unwanted errors and made sure that everything worked as intended.
A/B Testing:
To choose whether our application's default color theme should be "Light" or "Dark we conducted an A/B test and then asked the participants to take part in a survey. The majority of participants noted that having a "Light" theme was easier on their eyes and allowed them to read the texts of the app more easily.
Usability Testing:
After finishing the first version of the product, we conducted a moderated usability test to make sure the product did what it was intended to do. While choosing our inclusive test dempgraphic, we made sure to include people with disabilities in our test sample to make sure that the design measures we took to make the app more accessible worked. We used the information we gathered from this phase to iteratively make the design work better.