KUT KUTX Studios Podcast Website
Creating a web presence for KUT KUTX Studios
Challenge
KUT and KUTX needed to create a web presence for all of their podcasts. The responsive design needed to invite user discoverability, allow for content sharing, and allow users to listen directly from the website.
Users who landed on the website would need to not only be able to find the podcast they are looking for, but also discover new ones.
Due to the wide variety of podcasts, the website needed to be able to leverage both categories and tags to display content in the appropriate areas and help the site authors organize.
How might we create a web presence to house all podcast for KUT and KUTX?
Scope
The scope of this project included a full website design with the intent of creating a wider web presence for KUT and KUTX podcasts.
Constraints
The original five-month timeline for this project was extended to include branding; we launched at the end of December 2020.
Implementation
We designed and developed a new website to house the podcasts and tested the product on users throughout creation.
Our Goal
Standard Beagle worked closely with the stakeholder to understand the needs of both user types. In order to help us design a solution that worked for everyone, we focused on two key needs.
- Designed a user flow to maximize engagement and encourage users to stay on the website
- Designed an improved front-end experience as well as a backend dashboard
Our Solution
We realized we needed to design a solution that benefited both user types, the podcast listener and the website managers.
Results
KUT and KUTX Studios website was awarded a Web Excellence Award.
Following the site’s launch in December 2020, the site was submitted into competition and won in the podcasts category.
Awards
2021
Podcasts
Web Excellence Award
Our Process
Understand
We started by meeting with the stakeholders to better understand their needs and the needs of their audience. We also needed to gain a better understanding of the content that we would be designing a solution for.
User Profile Types
The target audience was defined by research completed by the client’s internal team. Based on our conversations with the stakeholders, there were two audience types we would be targeting in our design.
- Primary audience: Listeners who have not yet discovered KUT KUTX podcast.
- Secondary audience: Listeners who have already subscribed to a podcast and would like to find additional ones to subscribe to.
Additionally, we defined a third user group, the administrative user, that we needed to consider while designing the solution. The administrative user needed to be able to easily manage content on the backend.
Content Inventory and Evaluation
A content inventory is a list of all the content on a website. Being that a lot of the content was not currently present on KUT’s current podcast site, this inventory ensured that we were accounting for each podcast that needed to be implemented in the final design.
Additionally, this process exposed us to the varying types of content that would need to considered in the design moving forward.
Explore
Sitemap
We needed to explore the ways we could create an experience for the varying user types identified in the understand stage of our TRU/X Process.
A sitemap is a hierarchical diagram showing the structure of a website and defines a website’s taxonomy. This sitemap showed the structure for KUT and KUTX new podcast website.
Each podcast, or category, was given its own unique page. Additional website sections included a homepage, podcast level category pages, podcast episode single pages, and a single page template which would represent the about page, support page, and contact page.
User Flow
A user flow is a diagram that displays the complete path a user takes when completing task. While there are many flows that a user could embark on while navigating through a website; the user flow should portray unique user interactions.
These flows were chosen based on the website’s main goals which were defined during the kickoff meeting with the client.
The user flow diagram focused on the following:
User Motivators
-
1
Discovering a podcast
-
2
Subscribing to a podcast
-
3
Learning about KUT
-
4
Contacting KUT
-
5
Supporting KUT
KUT User Flow
UI Components
A UI Component checklist was created to notate the components that would be needed for moving forward. The checklist noted the components found on the current site and listed new components that may need to be added in the new design.
The needed components, or features, evolved throughout the design and validate phases depending on feedback from the user types. With that said, identifying which components that would be needed to form a minimum viable product early on was necessary so those features could be accounted for.
Design
It was time to put pen on paper to design out solutions to address user needs.
Wireframes
We started exploring on pen and paper the varying ways we could display information so that we were:
- addressing user needs
- implementing key features and components
- and identifying key touch points
Once numerous versions were explored, the finalized pages were digitized with Figma.
Mid-Fidelity Mockups
The hand sketched wireframes were turned into eight mid-fidelity mockups with Figma.
Validate
Before moving forward, we wanted to verify that the design solved the user’s problems and were easy to use. The clickable prototype was Guerilla tested with three participants.
User Testing Mid-Fidelity Wireframes
The purpose of this study was to test the designed solution. The goal was to discover if the current layout is easy to use, understand, and navigate.
Key Takeaways:
The overall impression was that the scenarios were easy to accomplish. Participants felt confident that they were able to complete each task successfully, though several key insights were identified during testing.
A few of the action items uncovered during the usability testing are that required a design iteration are listed below.
- Social Media Icons in Footer
Users found that the social media icons in the footer were a bit small and easy to overlook. Adjusting the size of the icons would allow them to be more identifiable. Also, increasing the size of the icons would make the developed site more responsive, as icon sizes would not need to be adjusted based on viewport height. - Subscribe Buttons
Users thought that while the buttons labeled subscribe were indicative of their purpose, they wished there was a small header calling out the section. Adding an additional cue would improve overall usability. - Share Icons
Users found that it was not immediately obvious to why the social icons were displayed in the episode cards, and I had to explain what their purpose was. To eliminate confusion, adding a header labeled ‘share link’ would improve that experience.
Iterations
Following the validation of the mid-fidelity mockups through user testing, we felt comfortable exploring visual elements for the design.
Branding
Branding was added to the scope of work midway through the project. A mood board was created to define the potential look and feel of the new brand.
The mood board influenced the finalized logo.
Style Tile
Now that the logo was created and decided on, it was time to implement the branding direction into the style tile. A style tile is a design deliverable consisting of fonts, colors and interface elements that communicates the potential look and feel for a website.
High-Fidelity Mockups, v1
Implementing the look and feel of the selected style tile, high fidelity mockups were created from the mid fidelity mockups. The following pages became fully mocked up versions:
- landing page
- podcast page
- episode single page
- about page
- search page
- and other various pages with UI components
High-Fidelity Mockups, v2
While version 1 was received well, the stakeholder’s marketing team wanted to implement a brighter color palette that had been recently created.
A brainstorm session was held with the key point of contact for this project. This session explored how we might implement the new color palette in a way where we could respect color contrasted needed for Level A Accessibility.
The style tile and mockups were then adjusted accordingly.
Validate
We needed to verify that the new look and feel complemented overall usability. The purpose of this study was to ensure that the interface elements were clear and easy to use.
User Testing of High-Fidelity Mockups
An interactive prototype was created with the high fidelity mockups so it could be tested with users to receive feedback.
This series of tests measured the success of the website’s interactivity and provided feedback on the interface decisions that were made.
Key Findings
The overall impression was that the scenarios were easy to accomplish. The and all participants felt confident they were able to complete each task successfully.
With that said, there were some adjustments that could be implemented to improve the user experience. Some of those suggestions are highlighted below.
- Subscribe Buttons & Social Share Icons
Users wished the subscribe button and social share icons were displayed above the podcast excerpt. Users found that the podcast tile and title was more likely to ‘sell’ them on subscribing and found it was more important to have the subscribe button closer to the top. Additionally, if the user was accessing the website on their phone, they would want the subscribe and share buttons to be immediately available. - Most users would access the website on their phone
Users most often listen to websites when they are on walks, or commuting. Therefore mobile responsively was important. If the user found the podcast website on desktop, they would use it to discover a podcast, then would go to their podcast service of choice to subscribe.
The study found that having a thoughtful mobile experience was important to the key user types. While we consider the experience on varying viewports while designing, we gave the mobile experience extra attention to suit the user’s needs.
