About the client
CKUA is a one of the strongest independent, donor-funded radio network in Canada, which uses musical discovery to share culture, connect people on-air, online, and in person—wherever its community is. CKUA broadcasts out of Edmonton and Calgary to 16 frequencies across Alberta, and online to listeners around the world.


ROLE
Design Lead at Punchcard
CONTRIBUTOR CREDITS
N/A (Sole designer)
PLATFORMS
Web app
TECH USED
Figma
scroll down
Project overview

CKUA has some of the most dedicated listeners of any radio station in Alberta—largely because of their big roster of show hosts and their wide breadth of music genres. Listeners often become long term fans, but if they move out of Alberta (which many have over the last several decades), they might not be able to listen to their favourite show, since online streaming is only available live and in real-time. CKUA wanted to solve this problem by creating an On-Demand listening platform for their users.
Project overview

CKUA has some of the most dedicated listeners of any radio station in Alberta—largely because of their big roster of show hosts and their wide breadth of music genres. Listeners often become long term fans, but if they move out of Alberta (which many have over the last several decades), they might not be able to listen to their favourite show, since online streaming is only available live and in real-time. CKUA wanted to solve this problem by creating an On-Demand listening platform for their users.


Problem Statement
As a radio listener, I am trying to discover new music and artists, but I can only listen to certain content on CKUA radio because the programme segments are available live only at a specific time. This makes me feel left-out and not in control.
Problem Statement
As a radio listener, I am trying to discover new music and artists, but I can only listen to certain content on CKUA radio because the programme segments are available live only at a specific time. This makes me feel left-out and not in control.
Proposed Solution
An on-demand platform where users could access any show from the past seven days on any device. The app should be built to minimize staff workload, with automated content removal after seven days, with clear availability indicators due to legal restrictions. As well as have an admin feature that allows the CKUA staff to make copy and content changes without needing a developer.
Problem Statement
As a radio listener, I am trying to discover new music and artists, but I can only listen to certain content on CKUA radio because the programme segments are available live only at a specific time. This makes me feel left-out and not in control.
Research

For this project, we started with a Discovery sprint, where we conducted user interviews and client interviews in order to determine the problem and the technical solution.
Research

For this project, we started with a Discovery sprint, where we conducted user interviews and client interviews in order to determine the problem and the technical solution.
User interviews
Empathy maps
User flows
Wireframes

I then translated the user flows into wireframes for both mobile and desktop. The wireframes reflected the outlined screens and were designed to be simple and unbranded, allowing for quick iterations based on client feedback
Wireframes

I then translated the user flows into wireframes for both mobile and desktop. The wireframes reflected the outlined screens and were designed to be simple and unbranded, allowing for quick iterations based on client feedback




Mockups

For this project, the client had a well-documented and cohesive brand identity. I applied the existing branding according to the guidelines and created new patterns for areas not yet covered.
Mockups

For this project, the client had a well-documented and cohesive brand identity. I applied the existing branding according to the guidelines and created new patterns for areas not yet covered.
Explore tab
The interface was designed to be clean and intuitive, ensuring users could quickly find what they needed. Expired tags emphasized urgency, highlighting limited-time access. On desktop, the player was positioned on the right for easy access, while on mobile, it remained a sticky bottom component that could expand as needed.
Explore tab
The interface was designed to be clean and intuitive, ensuring users could quickly find what they needed. Expired tags emphasized urgency, highlighting limited-time access. On desktop, the player was positioned on the right for easy access, while on mobile, it remained a sticky bottom component that could expand as needed.


Search overlay
Clicking/tapping the search button triggered an overlay, allowing users to search by host or show. The search field supported keyword input, enabling users to find hosts or shows even if they didn’t know the exact name.
Search overlay
Clicking/tapping the search button triggered an overlay, allowing users to search by host or show. The search field supported keyword input, enabling users to find hosts or shows even if they didn’t know the exact name.


Final thoughts

We delivered a web app that addressed CKUA’s needs and received glowing user reviews post-launch. By prioritizing the most important features, we navigated scope cuts, such as removing the dedicated host and segment pages. Instead, users could access these details via the search tab, linking to the CKUA website. This approach allowed us to focus on refining key features like the player.
Final thoughts

We delivered a web app that addressed CKUA’s needs and received glowing user reviews post-launch. By prioritizing the most important features, we navigated scope cuts, such as removing the dedicated host and segment pages. Instead, users could access these details via the search tab, linking to the CKUA website. This approach allowed us to focus on refining key features like the player.


Project overview

CKUA has some of the most dedicated listeners of any radio station in Alberta—largely because of their big roster of show hosts and their wide breadth of music genres. Listeners often become long term fans, but if they move out of Alberta (which many have over the last several decades), they might not be able to listen to their favourite show, since online streaming is only available live and in real-time. CKUA wanted to solve this problem by creating an On-Demand listening platform for their users.

Problem Statement
As a radio listener, I am trying to discover new music and artists, but I can only listen to certain content on CKUA radio because the programme segments are available live only at a specific time. This makes me feel left-out and not in control.
Proposed Solution
An on-demand platform where users could access any show from the past seven days on any device. The app should be built to minimize staff workload, with automated content removal after seven days, with clear availability indicators due to legal restrictions. As well as have an admin feature that allows the CKUA staff to make copy and content changes without needing a developer.
Problem Statement
As a radio listener, I am trying to discover new music and artists, but I can only listen to certain content on CKUA radio because the programme segments are available live only at a specific time. This makes me feel left-out and not in control.
Research

For this project, we started with a Discovery sprint, where we conducted user interviews and client interviews in order to determine the problem and the technical solution.
User interviews
Empathy maps
User flows
Wireframes

I then translated the user flows into wireframes for both mobile and desktop. The wireframes reflected the outlined screens and were designed to be simple and unbranded, allowing for quick iterations based on client feedback


Mockups

For this project, the client had a well-documented and cohesive brand identity. I applied the existing branding according to the guidelines and created new patterns for areas not yet covered.
Explore tab
The interface was designed to be clean and intuitive, ensuring users could quickly find what they needed. Expired tags emphasized urgency, highlighting limited-time access. On desktop, the player was positioned on the right for easy access, while on mobile, it remained a sticky bottom component that could expand as needed.

Search overlay
Clicking/tapping the search button triggered an overlay, allowing users to search by host or show. The search field supported keyword input, enabling users to find hosts or shows even if they didn’t know the exact name.

Final thoughts

We delivered a web app that addressed CKUA’s needs and received glowing user reviews post-launch. By prioritizing the most important features, we navigated scope cuts, such as removing the dedicated host and segment pages. Instead, users could access these details via the search tab, linking to the CKUA website. This approach allowed us to focus on refining key features like the player.


