KUT KUTX Studios Podcast Website

Creating a web presence for KUT KUTX Studios

The Challenge

How might we create a web presence to house all podcast for KUT and KUTX?

Our Process

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.

The Solution

We realized we needed to design a solution that benefited both user types, the podcast listener and the website managers.

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

Results

KUT and KUTX Studios website launched in December 2020.

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.

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

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.

Sitemap
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

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
A wireframe represents the skeletal framework of a website.

By using a pen and paper, we started by exploring 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 of Mid-fidelity Mockups

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.

  1. 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.
  2. 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.
  3. 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.

Design

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, Version 1
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, Version 1
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, Version 2
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.

Interactive Prototype
An interactive prototype was created with the high fidelity mockups so it could be tested with users to receive feedback.

User Testing of High-Fidelity Mockups
This series of tests measured the success of the website’s interactivity and provided feedback on the interface decisions that were made.

Summary of 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.

  1. 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.Also, if the user was accessing the website
    on their phone, they would want the subscribe and share buttons to be immediately available.
  2. 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.Additionally, 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.

Our Solutions

We take a holistic approach to solving your problems by using the design thinking methodology to help you identify with your user to find the right solution.

We use design thinking methodology to understand, ideate, and then design an experience that best suits the customers' needs and motivations.

By setting a UX strategy, organizations can increase the accessibility and inclusion of their products and services without stretching their teams too thin.

Our experienced team is well-versed in building features and enhancements on a continuous basis. We meet with you weekly to sync up on status and provide guidance.

How can UX improve your organization's value with customers? Schedule a short conversation to find out how Standard Beagle's TRU/X process would work for you.