Revitalising NOVA: Website Revamp Across Four Iconic Brands
Encourage more listening to live and on-demand content
The revamped websites for NOVA Entertainment’s four brands—Nova FM, Smooth FM, FIVEAA, and Star—enhance audio discovery and listening, providing seamless access to live radio, podcasts, and entertainment content. This redesign strengthens the company’s All-of-Audio strategy, driving a 20% increase in website listening hours and 54% boost in genre station plays.
Time
2022 Q3- 2023 Q1
2022 Q3- 2023 Q1
My Role
Product designer
Responsibilities
Research
Product design
User testing
Research
Product design
User testing
Team
1 Product manager
1 Project manager
5 Developers
2 Designers
1 Product manager
1 Project manager
5 Developers
2 Designers
01. IT'S BEEN A WHILE
Project Overview
NOVA Entertainment (NE) is Australia's most listened to Radio network. It owns the Nova Network (Nova 96.9 Sydney, Nova 100 Melbourne, Nova 106.9 Brisbane, Nova 93.7 Perth, and Nova 919 Adelaide), the Smooth FM Network nationwide, FIVEAA in Adelaide, and Star 104.5 in Central Coast. Beyond FM radio, NE offers streaming through its websites and apps.
The design of Nova, Smooth, Star and FIVEAA websites were more than 4 years old and did not incorporate the evolved business goal.
Problem 01
Business Goal Misalignment
The old websites relied on a declining display impression-based revenue model.
The future success of our digital revenue depends on growing an online audience.
Problem 02
Outdated UI and UX
Key features were hard to find, while underperforming ones were cluttered. Additionally, the UI felt outdated and failed to effectively showcase the brands' identities.
Problem 01
Business Goal Misalignment
The old websites relied on a declining display impression-based revenue model.
The future success of our digital revenue depends on growing an online audience.
Problem 02
Outdated UI and UX
Key features were hard to find, while underperforming ones were cluttered. Additionally, the UI felt outdated and failed to effectively showcase the brands' identities.
02. FROM THE VERY BEGINNING
Current State Audit
This was my first project in the broadcasting industry. Although I had domain and product knowledge to catch up on, a UX discovery pack helped me quickly understand and identify key website issues at the project kickoff. My site analysis covered heuristics, information architecture, and content, while also highlighting future improvement opportunities. Here are some key findings, using the Nova site as an example:
Lack of Listening Prompt
Station pages, main navigation and homepages intended as hubs for brand and station-related content, were cluttered with entertainment articles and outdated posts, failing to amplify the brand identity and encourage listening.
Limited Station Discoverability
Brands like Nova and Smooth each have 8–9 stations across different genres and metro areas. However, the website’s structure made it difficult for users to explore and listen beyond their locally assigned station (IP address).
Chunky Web Player
The web player overlapped with dropdown menus and doubled as a content discovery tool, making it feel cluttered and heavy.
03. CATCH UP WITH BENCHMARK
Stakeholder Interviews
I regrouped with the stakeholders to present my initial findings and gathered additional input from them, including internal user pain points.
In general, the expectation for this project from business is to catch up with the market benchmark and build a listening-first experience for the streaming audience.
More Listening to More Stations
“We don’t make listeners on our platforms aware of what stations we now have. So they don't switch station when bored, feel like a change or don’t like the song playing, they just leave.”
API-Driven Website
“Need a back-end uplift to free up the engineering team from manually updating content.”
Better Content to Improve SEO
“Google "Nova 90s" and we’re not the top result. And our top result doesn’t even mention the station being searched for. ”
Not Enough Station Showcasing
“Can only see a few recently played songs for the station."
"Very plain introduction about the station."
Error-ridden Show Schedule
"Outdated show schedules, with incorrect show names or times. Updates should be made more efficiently and promptly."
Streamline and Focus Content
“Articles take up promotional space on the site, take time and resource to produce and give us very little in return.”
04. WHAT DOES BENCHMARK LOOK LIKE?
Competitor Analysis
So, what defines our benchmark? In the local market, there are no direct commercial radio competitors of our scale to provide a clear reference. Instead, I explored major radio brands in both Australia and the UK from a user’s perspective, identifying key insights and best practices that could inform my approach.
Insight 01: Ensuring Listening Access on Landing Page
Homepage highlights a range of radio stations and currently playing shows, with ample CTAs and play buttons to guide users toward listening.
Insight 02: Dynamic Station Page
Each station has its own page, featuring the now playing info, show schedule, recently played songs, and other station-related information.
Insight 03: Pop-up vs. Embedded Persistent Player?
The pop-up player supports multi-tab listening with easy implementation, but the embedded player offers a seamless, lightweight experience across devices—better suited for our situation.
Key Challenges
More Listening to More Stations
Encourage content discovery and make live and on-demand audio more accessible across the site.
Four Sets of UI for Four Brands
Ensuring consistency of components across brands while amplifying individual brand identities.
05. THE APPROACH
4 Distinct Brands 1 Framework
In favor of speed to market, I was tasked to design one framework that suits four brands. So the dev team can leverage the codebase of first accomplished website to get to market sooner and cheaper.
The Smooth and Nova websites host 8–9 stations across different metro areas, resulting in a more complex architecture than single-station sites like FIVEAA and Star 104.5. Therefore, I started my design with Smooth to establish the skeleton and components, making it easier to design the rest.
Each phase of the project was serialised, starting with the design and development for the reference website - Smooth. Once each page was designed and approved, the engineering team began the implementation.
The Framework
Collaborating with the PM, I created an information architecture that accommodates all four brands.
Structuring both global and brand-specific components.
Identifying opportunities to enhance content discovery.
Defining entry points for live and on-demand audio playback.
05. THE APPROACH
1 Framework 4 Distinct Brands
In favour of speed to market, I was tasked to design one framework that suits four brands. So the dev team can leverage the codebase of first accomplished website to get to market sooner and cheaper.
The Smooth and Nova websites host 8–9 stations across different metro areas, resulting in a more complex architecture than single-station sites like FIVEAA and Star 104.5. Therefore, I started my design with Smooth to establish the skeleton and components, making it easier to design the rest.
Each phase of the project was serialised, starting with the design and development for the reference website - Smooth. Once each page was designed and approved, the engineering team began the implementation.
Key Challenges
More Listening to More Stations
Encourage content discovery and make live and on-demand audio more accessible across the site.
Four Sets of UI for Four Brands
Ensuring consistency of components across brands while amplifying individual brand identities.
The Framework
Collaborating with the PM, I created an information architecture that accommodates all four brands.
Structuring both global and brand-specific components/features.
Identifying opportunities to enhance content discovery.
Defining entry points for live and on-demand audio playback.
05. FINAL DESIGN
More Listening to More Stations
novafm.com.au as an example
The new websites have evolved beyond the old model of a single-station site that changed based on a user’s IP address. Each brand’s homepage serves as the hub of its network—bringing together all available audio, competitions, and editorial content in one dynamic destination.
5 Metro Cities, 5 Local Stations, 5 Hero Banners
The predominant hero banner is preselected based on the user's geolocation, showcasing the favourite local breakfast show host image with a CTA button to instant stream the local market station.
A Hub for All On-brand Stations
The navigation dropdown and carousel work hand in hand to spotlight every station within the network, making it easy for listeners to tune in. Just like our apps, our brand websites work together to guide audiences across sister brands, sparking discovery, and keeping them engaged within our entire ecosystem.
Persistent Web Player for Radio and Podcast
A sleek and intuitive web player for radio and podcasts, designed for effortless listening as users explore the site.
Seamless Playback – Uninterrupted audio while navitagtion.
Smart Start – First-time users automatically tune in to their local metro station.
Stay in Sync – Keeps the queue, podcast position, and last played station right where you left off.
Other Pages Before vs. After
05. FINAL DESIGN
Four Sets of UI for Four Brands
Working within the same IA, I designed four distinct UIs to capture each brand’s unique identity.
Defined Universal vs. Brand-Specific Elements – Core components like navigation remain consistent, while colors, typography, and patterns reflect each brand’s personality.
Consistent User Experience – Navigation, play audio, and interactions stay uniform across all sites, reducing cognitive load for users switching between brands.
Accessibility First – Maintained contrast ratios, font sizes, and keyboard navigation matching with the WCAG 2.1 AA standards across all UI variations.
Scalable Design System – Built a flexible yet cohesive system that adapts to each brand while maintaining structural harmony.
06. RESULTS
What did We Achieve?
All four brand website are now live and running. We had a clear idea of how success would look like before we started the work on the redesign and some of the numbers exceeded our expectations.
ENGAGEMENT
+20%
After the redesign, the 30 days average website listening hours increased by 25%, showing that the new design is more engaging, and users are spending more time-consuming content.
DISCOVERY
+54%
The average web session counts (click play) grew 54% across Smooth and Nova’s genre stations within 60 days post-redesign, proving the success of driving exploration beyond local stations.
Designing NOVA Player Apps on Google TV
Australia’s Only Commercial Radio Apps on Google TV
The revamped websites for NOVA Entertainment’s four brands—Nova FM, Smooth FM, FIVEAA, and Star—enhance audio discovery and listening, providing seamless access to live radio, podcasts, and entertainment content. This redesign strengthens the company’s All-of-Audio strategy, driving a XX% increase in desktop listening hours and xx% retention rate.
Time
2023 Q4
Responsibilities
UX research
Product design
User testing
Team
1 Product manager
1 Project manager
5 Developers
2 Designers
My Role
Product designer
02. CURRENT STATE AUDIT
From the Very Beginning
I workshopped with our UX lead, information architect and content writer to discuss initial UX proposals for this project. We studied the existing pages on our website and quickly pin-pointed features and contents that we thought was either valuable or detrimental to the user experience.
Cluttered Web Player
The web player overlapped with the navigation bar and contained excessive content that should be displayed on the webpage, making it feel cluttered and heavy.
Lack of Listening Promotion
Station pages and homepages intended as hubs for brand and station-related content, were cluttered with entertainment articles and outdated posts, failing to amplify the brand identity and encourage listening.
Limited Station Discoverability
Brands like Nova and Smooth each have 8–9 stations across different genres and metro areas. However, the website’s structure made it difficult for users to explore and listen beyond their locally assigned station (based on geo-location).
03. STAKEHOLDER INTERVIEW
Catch Up with the Benchmark
I workshopped with our UX lead, information architect and content writer to discuss initial UX proposals for this project. We studied the existing pages on our website and quickly pin-pointed features and contents that we thought was either valuable or detrimental to the user experience.
More Listening to More Stations
“We don’t make listeners on our platforms aware of what stations we now have. So they don't switch station when bored, feel like a change or don’t like the song playing, they just leave.”
API-Driven Website
“Need a back-end uplift to free up the engineering team from manually updating content.”
Better Content to Improve SEO
“ Google "Nova 90s" and we’re not the top result. And our top result doesn’t even mention the station being searched for. ”
Not Enough Recently Played Songs
“Can only see a few recently played songs. Would be good to see more."
Error-ridden Show Schedule
"Outdated show schedules, with incorrect show names or times. Updates should be made more efficiently and promptly."
Streamline and Focus Content
“Articles take up promotional space on the site, take time and resource to produce and give us very little in return”
03. COMPETITOR ANALYSIS
What Does Benmark Look Like？
So, what defines our benchmark? In the local market, there are no direct commercial radio competitors of our scale to provide a clear reference. Instead, I explored major radio brands in both Australia and the UK from a user’s perspective, identifying key insights and best practices that could inform my approach.
Insight 01: Ensuring Listening Access on Landing Page
Homepage highlights a range of radio stations and currently playing shows, with ample CTAs and play buttons to guide users toward listening.
Insight 02: Dynamic Station Page
Each station has its own page, featuring the show schedule, recently played songs, and station-related information.
Insight 03: Pop-up vs. Embedded Persistent Player?
The pop-up player supports multi-tab listening with easy implementation, but the embedded player offers a seamless, lightweight experience across devices—better suited for our situation.
Key Challenges
Key Challenges
More Listening to More Stations
Encourage content discovery and make live and on-demand audio more accessible across the site.
Four Sets of UI for Four Brands
Ensuring consistency of components across brands while amplifying individual brand identities.
Previous Project: Drive Increased Listener Engagement with New App Homepages
Next Project: Revitalising NOVA: Web Revamp Across Four Iconic Brands
05. THE APPROACH
4 Distinct Brands 1 Framework
In favor of speed to market, I was tasked to design one framework that suits four brands. So the dev team can leverage the codebase of first accomplished website to get to market sooner and cheaper.
The Smooth and Nova websites host 8–9 stations across different metro areas, resulting in a more complex architecture than single-station sites like FIVEAA and Star 104.5. Therefore, I started my design with Smooth to establish the skeleton and components, making it easier to design the rest.
Each phase of the project was serialised, starting with the design and development for the reference website - Smooth. Once each page was designed and approved, the engineering team began the implementation.
Key Challenges
Simplify Content Discovery
Make live and on-demand content more accessible throughout the site.
Four Sets of UI for Four Brands
Ensuring consistency while amplifling individual brand identities.
05. THE APPROACH
4 Distinct Brands 1 Framework
In favor of speed to market, I was tasked to design one framework that suits four brands. So the dev team can leverage the codebase of first accomplished website to get to market sooner and cheaper.
The Smooth and Nova websites host 8–9 stations across different metro areas, resulting in a more complex architecture than single-station sites like FIVEAA and Star 104.5. Therefore, I started my design with Smooth to establish the skeleton and components, making it easier to design the rest.
Each phase of the project was serialised, starting with the design and development for the reference website - Smooth. Once each page was designed and approved, the engineering team began the implementation.
Key Challenges
Simplify Content Discovery
Make live and on-demand content more accessible throughout the site.
Four Sets of UI for Four Brands
Ensuring consistency while amplifling individual brand identities.
05. THE APPROACH
1 Framework 4 Distinct Brands
In favor of speed to market, I was tasked to design one framework that suits four brands. So the dev team can leverage the codebase of first accomplished website to get to market sooner and cheaper.
The Smooth and Nova websites host 8–9 stations across different metro areas, resulting in a more complex architecture than single-station sites like FIVEAA and Star 104.5. Therefore, I started my design with Smooth to establish the skeleton and components, making it easier to design the rest.
Each phase of the project was serialised, starting with the design and development for the reference website - Smooth. Once each page was designed and approved, the engineering team began the implementation.
The Framework
Collaborating with the PM, I created an information architecture that accommodates all four brands.
Structuring both global and brand-specific components.
Identifying opportunities to enhance content discovery.
Defining entry points for live and on-demand audio playback.
05. EXECUTION
Simplify Content Discovery
Hero + CTA, 5 cities, geo-location
Some of the key features were difficult to find whereas the underperforming features were cluttered. The UI also looked visually dated and out of touch with modern website design.
Navigation + play button
Some of the key features were difficult to find whereas the underperforming features were cluttered. The UI also looked visually dated and out of touch with modern website design.
05. FINAL DESIGN
Four Sets of UI for Four Brands
Working within the same IA, I designed four distinct UIs to capture each brand’s unique identity.
Defined Universal vs. Brand-Specific Elements – Core components like navigation remain consistent, while colors, typography, and patterns reflect each brand’s personality.
Consistent User Experience – Navigation, play audio, and interactions stay uniform across all sites, reducing cognitive load for users switching between brands.
Accessibility First – Maintained contrast ratios, font sizes, and keyboard navigation matching with the WCAG 2.1 AA standards across all UI variations.
Scalable Design System – Built a flexible yet cohesive system that adapts to each brand while maintaining structural harmony.
05. FINAL DESIGN
Four Sets of UI for Four Brands
Working within the same IA, I designed four distinct UIs to capture each brand’s unique identity.
Defined Universal vs. Brand-Specific Elements – Core components like navigation remain consistent, while colors, typography, and patterns reflect each brand’s personality.
Consistent User Experience – Navigation, play audio, and interactions stay uniform across all sites, reducing cognitive load for users switching between brands.
Accessibility First – Maintained contrast ratios, font sizes, and keyboard navigation matching with the WCAG 2.1 AA standards across all UI variations.
Scalable Design System – Built a flexible yet cohesive system that adapts to each brand while maintaining structural harmony.
05. FINAL DESIGN
More Listening to More Stations
novafm.com.au as an example
The new websites have evolved beyond the old model of a single-station site that changed based on a user’s IP address. Each brand’s homepage serves as the hub of its network—bringing together all available audio, competitions, and editorial content in one dynamic destination.
5 Metro Cities, 5 Local Stations, 5 Hero Banners
The predominant hero banner is preselected based on the user's geolocation, showcasing the favourite local breakfast show host image with a CTA button to instant stream the local market station.
A Hub for All On-brand Stations
The navigation dropdown and carousel work hand in hand to spotlight every station within the network, making it easy for listeners to tune in. Just like our apps, our brand websites work together to guide audiences across sister brands, sparking discovery, and keeping them engaged within our entire ecosystem.
Persistent Web Player for Radio and Podcast
A sleek and intuitive web player for radio and podcasts, designed for effortless listening as users explore the site.
Seamless Playback – Uninterrupted audio while navitagtion.
Smart Start – First-time users automatically tune in to their local metro station.
Stay in Sync – Keeps the queue, podcast position, and last played station right where you left off.
Other Pages Before vs. After
05. FINAL DESIGN
Four Sets of UI for Four Brands
Working within the same IA, I designed four distinct UIs to capture each brand’s unique identity.
Defined Universal vs. Brand-Specific Elements – Core components like navigation remain consistent, while colors, typography, and patterns reflect each brand’s personality.
Consistent User Experience – Navigation, play audio, and interactions stay uniform across all sites, reducing cognitive load for users switching between brands.
Accessibility First – Maintained contrast ratios, font sizes, and keyboard navigation matching with the WCAG 2.1 AA standards across all UI variations.
Scalable Design System – Built a flexible yet cohesive system that adapts to each brand while maintaining structural harmony.
06. RUSLTS
What did We Achieve?
All four brand website are now live and running. We had a clear idea of how success would look like before we started the work on the redesign and some of the numbers exceeded our expectations.
ENGAGEMENT
ENGAGEMENT
+20%
After the redesign, the 30 days average website listening hours increased by 25%, showing that the new design is more engaging, and users are spending more time-consuming content.
DISCOVERY
+54%
The average web session counts (click play) grew 54% across Smooth and Nova’s genre stations within 60 days post-redesign, proving the success of driving exploration beyond local stations.
05. FINAL DESIGN
Four Sets of UI for Four Brands
Working within the same IA, I designed four distinct UIs to capture each brand’s unique identity.
Defined Universal vs. Brand-Specific Elements – Core components like navigation remain consistent, while colors, typography, and patterns reflect each brand’s personality.
Consistent User Experience – Navigation, play audio, and interactions stay uniform across all sites, reducing cognitive load for users switching between brands.
Accessibility First – Maintained contrast ratios, font sizes, and keyboard navigation matching with the WCAG 2.1 AA standards across all UI variations.
Scalable Design System – Built a flexible yet cohesive system that adapts to each brand while maintaining structural harmony.
06. RUSLTS
What did We Achieve?
All four brand website are now live and running. We had a clear idea of how success would look like before we started the work on the redesign and some of the numbers exceeded our expectations.
ENGAGEMENT
+20%
After the redesign, the 30 days average website listening hours increased by 25%, showing that the new design is more engaging, and users are spending more time-consuming content.
DISCOVERY
+54%
The average web session counts (click play) grew 54% across Smooth and Nova’s genre stations within 60 days post-redesign, proving the success of driving exploration beyond local stations.
05. FINAL DESIGN
More Listening to More Stations
novafm.com.au as an example
The new websites have evolved beyond the old model of a single-station site that changed based on a user’s IP address. Each brand’s homepage serves as the hub of its network—bringing together all available audio, competitions, and editorial content in one dynamic destination.
5 Metro Cities, 5 Local Stations, 5 Hero Banners
The predominant hero banner is preselected based on the user's geolocation, showcasing the favourite local breakfast show host image with a CTA button to instant stream the local market station.
A Hub for All On-brand Stations
The navigation dropdown and carousel work hand in hand to spotlight every station within the network, making it easy for listeners to tune in. Just like our apps, our brand websites work together to guide audiences across sister brands, sparking discovery, and keeping them engaged within our entire ecosystem.
Persistent Web Player for Radio and Podcast
A sleek and intuitive web player for radio and podcasts, designed for effortless listening as users explore the site.
Seamless Playback – Uninterrupted audio while navitagtion.
Smart Start – First-time users automatically tune in to their local metro station.
Stay in Sync – Keeps the queue, podcast position, and last played station right where you left off.
Other Pages Before vs. After