One channel for Little and Big Kids

iHeartRadio wanted to be the first in the market to launch a family-based radio and audio-content streaming app through over-the-top (OTT) services.  

The challenge was to make an app for little and not-so-little children, with a look-and-feel as clean and intuitive as Spotify's - which I consider the best music app these days for children to have fun with their music, listen to their favourite stories and sing in front of the TV.

‍ We followed all the Research + Design + Prototype steps and the Scrum methodology to make the project perfect for iHeartRadio clients and users. The project was a huge success for TribalScale and the people involved in it.

Redesigning TV Experiences: Family-Friendly and Accessible UI for Apple TV, Roku and Amazon Fire TV

A new experience for Apple TV, Roku and Amazon Fire TV focuses on delivering a user-friendly and engaging interface tailored for TV screens. In the UX/UI design, the emphasis is on creating a visually appealing and intuitive layout that caters to users of all ages, including families. This involves designing large, easy-to-navigate menus and interactive elements optimized for remote control use. The interface features vibrant visuals and simple navigation to make discovering and enjoying music, radio stations, stories, and podcasts a seamless experience. By integrating family-friendly design principles and ensuring accessibility, the app provides a cohesive and enjoyable experience for everyone, whether using Apple TV, Roku andAmazon Fire TV.

Analyzing Competitors: A Deeper Dive into Deezer vs. Spotify

This analysis delves into how Deezer and Spotify design their TV apps, focusing on UX/UI elements that contribute to their user experiences. Deezer’s approach emphasizes clean, visually engaging interfaces with intuitive navigation, while Spotify is known for its streamlined, user-centric design and effective use of large screen real estate. By understanding these design strategies, iHeartRadio can identify key opportunities to enhance its own TV app. The goal is to incorporate best practices from both competitors, ensuring that iHeartRadio delivers a visually appealing and easy-to-navigate experience tailored for TV users, optimizing content discovery and overall user satisfaction.

‍

Wireframe Development for iHeartRadio Family

As part of the iHeartRadio project, I developed initial wireframes to outline key screens and functionalities after the project kickoff. These wireframes served as a blueprint for the user interface, emphasizing intuitive navigation and user-centric design. By collaborating with stakeholders, I ensured that the wireframes accurately reflected the project goals and user needs, laying a solid foundation for the subsequent design phases. This iterative process allowed for early feedback and refinement, ultimately contributing to a more engaging and cohesive experience within the app.

‍

Navigation menu is easily accessible

Navigation menu is easily accessible on TV by using large, clearly labeled buttons, optimizing for remote control navigation, and providing a straightforward layout that allows users to navigate easily using arrow keys and select buttons.

‍

Music Selection Made Easy

The Select Music/Stories feature in the iHeartRadio Family app offers an intuitive interface for users to browse and choose their favorite songs, albums, and playlists. With a simple and engaging layout, children and parents can easily navigate through categories and search for specific content. The feature includes filtering options to find age-appropriate music and recommendations based on listening preferences. Designed with accessibility in mind, it ensures that all users can effortlessly select and enjoy their music, making it a key part of a personalized and enjoyable listening experience.

‍

Interactive Music Player

A user-friendly music player designed to provide a seamless and enjoyable listening experience for all ages. The player includes intuitive controls for play, pause, skip, and volume, all designed with large, easily recognizable icons and high-contrast colors to ensure accessibility. The player also supports features such as track progress visualization, album artwork display, and the option to view synchronized lyrics, making it easy for users to interact with their favorite music. With responsive design and thoughtful touch targets, the player accommodates both young users and parents, offering a smooth and engaging way to enjoy music together.

‍

Interactive Lyrics Integration

The iHeartRadio Family app enriches the listening experience by providing synchronized lyrics for a wide range of songs. This feature allows children and families to follow along with the music, enhancing engagement and facilitating sing-alongs. Lyrics are displayed in an easy-to-read format with adjustable text size and high-contrast colors to ensure readability for users with varying visual abilities. By integrating this functionality, we aim to make music education and enjoyment more interactive and accessible for all users, fostering a deeper connection with the songs they love.

‍

iHeartRadio Family Design System: Technical Foundation and UI Kit for Accessible and Engaging User Experiences

The iHeartRadio Family design system is underpinned by a robust technical foundation, ensuring both high usability and adherence to accessibility standards. The system employs a well-defined color palette with specific HEX and RGB values to achieve optimal contrast ratios, meeting WCAG AA and AAA guidelines. Typography is managed through a set of web-safe fonts and defined font sizes to maintain readability across devices, with CSS variables controlling responsive scaling. The UI kit comprises a library of reusable components including buttons, form fields, navigation bars, and icons, all designed with consistent spacing, padding, and interactive states. Each component is built using modular, accessible code that adheres to ARIA standards, ensuring a seamless experience for users with assistive technologies. This structured approach not only streamlines development but also guarantees a cohesive and inclusive user experience.

‍

Clear and Intuitive User-Friendly Interface Design

Ensure the navigation menu is easily accessible on TV by using large, clearly labeled buttons, optimizing for remote control navigation, and providing a straightforward layout that allows users to navigate easily using arrow keys and select button

• Logo and Visual Identity: Ensure the iHeartRadio logo is prominently displayed with sufficient size and contrast to stand out on a TV screen. The heart icon and text should be easily recognizable from a distance.
• Design: Family and kids focuses on creating engaging, intuitive, and age-appropriate experiences that are enjoyable and accessible for all ages.

• Icons: Custom icons were created for the iHeartRadio app to enhance its visual identity and improve user navigation. These icons were designed to be intuitive and visually aligned with the app's branding, making it easier for users to identify and interact with key features. Each icon was crafted with attention to clarity and simplicity, ensuring that they are easily recognizable and functional on TV screens. The new icons aim to provide a more cohesive and engaging user experience by seamlessly integrating with the app's overall design and helping users navigate content effortlessly.

• Branding: Creating a harmonious design background for iHeartRadio tailored to kids involves blending vibrant, playful elements with the brand's core identity to foster an engaging and age-appropriate environment. This design should feature colorful, dynamic visuals that appeal to children, such as fun animations or illustrations of musical themes. Incorporate large, easy-to-read typography and intuitive navigation elements to ensure ease of use. The background can include cheerful patterns or images related to music and singing, creating a joyful atmosphere that encourages kids to interact and enjoy singing along to their favorite songs. By aligning these elements with iHeartRadio's existing branding, the design will maintain brand recognition while providing a captivating and safe space for young users.

‍

‍

Tools and Technologies Used

I used Figma for designing the interface and creating interactive prototypes. Collaborate with developers for testing and refinement on both Apple TV and Roku platforms.

Utilizing the Stark plugin, we rigorously evaluate our design elements to ensure optimal accessibility, verifying color contrast and visual clarity to create an inclusive user experience for all iHeartRadio Family app users.

‍

‍

User Testing for the iHeartRadio TV App

For user testing the iHeartRadio TV app in New York, we will conduct a series of structured sessions to gather valuable feedback on its usability and functionality. Participants will be guided through a set of tasks, including launching the app, navigating its features, and discovering content such as radio stations and playlists. Each session will start with a brief introduction to explain the purpose of the test, which is to identify user pain points and gather insights for improvement. We will observe how users interact with the app, noting any difficulties they encounter and their overall experience. Feedback will be collected through direct questioning and observation to ensure that the app is intuitive and enjoyable for users. This process aims to refine the app’s design and enhance its usability for a better user experience.

‍

Final Reflections on the Project

Reflecting on the iHeartRadio project, I am proud of the collaborative efforts that led to the successful development of a user-friendly and engaging platform. The process of creating wireframes, design systems, and prototypes allowed for continuous feedback and iteration, ensuring that we met the diverse needs of our users. Integrating accessibility features and family-friendly design principles enhanced the overall experience, making music and entertainment easily accessible for all ages. This project reinforced the importance of a user-centered approach and highlighted the impact of thoughtful design in creating meaningful digital experiences.

‍

IHeartRadio is available by clicking here

‍