650+ podcasts & 300+ blog posts combined into one site to provide ease of access to Sound True's free resources. The site averages 450k podcast downloads a month post redesign
DELIVERABLE
Word Press Theme Choice, Wireframes, Website
ROLE
UX/UI Design, Art Direction, Web Design, Graphic Design
TOOLS & SOFTWARE
Sketch, Photoshop, InVision, WordPress
PROJECT OVERVIEW
The Sounds True podcast Insights at the Edge and blog Many Voices were living in separate environments with separate URLs making it hard for users to discover free content. Our main objective was to bring both sites together with an updated look and feel to be more modern, clean, accessible, etc. but also ensure searchability and curation of thousands of postings for a better user experience.
KEY OBJECTIVES & APPROACH
-
Identify a WordPress theme that could support both podcasts & blogs but also create ease of content migration, design, development & new postings
-
Responsive
-
Support site Searchability by creating content categories and tagging
-
Implement curation of content by grouping postings under most popular episodes/posts, timeless classics, staff picks, etc. to help guide new users
-
Introduce ample ways for users to subscribe via YouTube, Itunes, Spotify and RSS Feed
Challenge & Solution
Merging Two Websites
The Challenge
The main challenge with this project was that the podcast, Insights at the Edge lived on a custom CMS page on soundstrue.com & the blog Many Voices lived on a WordPress environment. Both contained hundreds of posts.
The Solution
Overall, we felt the need to combine both sites into one to serve as a central hub for users to easily find our free resources since they had difficulty locating them with our current configuration. So we decided to audit the podcast & blog to figure out the requirements of each site. Once we had that information we found a WordPress theme that aligned with those requirements to help ease design & development.
WordPress Theme: Viseo
User Experience
Architecture & Wireframing
White Boarding Session
Once the requirements & theme were established, the UX engineer and I got together and started whiteboarding each page of the new website.
Low Fidelity Wireframes
Once we had mapped out the basic structure during the whiteboarding session, we were then able to create wireframes to provide more clarity, make sure we captured all requirements & seek approvals from stakeholders.
User Interface
Design System & High Fidelity Designs
Design System
Once the wireframes were completed, I was then able to jump into the design phase. I created a design system composed of components, patterns, styles, and guidelines, which helped operationalize and optimize my design efforts.
High Fidelity Design
In tandem with the design system documentation, I worked on the high-fidelity designs.
Post Launch
Site Optimization
Individual Podcast Page
A year after launch, we analyzed the data and decided to optimize the individual podcast pages. In the initial design, the large image of the author's headshot with the text overlayed on top was feeling distracting. We also wanted to bring the podcast player further up on the page for users to quickly find each episode's audio.