Detroit Public Television is a PBS television station serving the Metro Detroit area. Using a PBS-provided framework for the website, the station's Digital team planned to upgrade their current pages to the most recent iteration of the site builder: Bento 3.0. 
I was tasked with studying the shortcomings of the station's current offerings in order to create designs based on their needs and the needs of their audience.
original direction
The early days of my work on this project were spent analyzing the current website, mapping the path of the user, studying its current traffic, comparing the design to similar stations and identifying pain points based on heuristic guidelines. The main issue I latched onto was the large amount of information presented on the site. While a trusted public television station is an information hub, I wanted to be sure that the path to it was clear and effective.

DPTV About Page Google Analytics

DPTV Schedule Analytics Analysis

DPTV Site Map for Main Program Pages

After setting up potential designs for individual shows, I was asked to create a design for a potential website that would display the content from Detroit Public Television's major programs and initiatives all in one place. With so much content, information overload was an obvious concern, just like in the main site. I wanted to be sure to include all of the major sections for promotion--top stories, recent videos, show specific blog rolls--while still keeping the design clean and manageable for its audience.

DPTV About Page Wireframe

DPTV MiWeek Program Page Mockup

staying flexible
Originally, Detroit Public Television’s Digital team planned to upgrade their website to the latest version of the PBS-provided content management system framework used to build partner station pages. From this direction, I decided that my main goal would be to simplify the user experience as much as I could, while still insuring all the necessary information was represented. While the framework they were planning to upgrade to greatly simplified the building process, I aimed to create pages that could present the same type of information, but still be tailored to the unique visual styles and requirements of all the different shows and programs.
However, after months of researching, finalizing a basic wireframe, and building a few pages, we discovered that the current version of the website builder would not work for all of the station’s needs.
After coming down from the bad news, I focused on reworking the updated design ideas into a more complete, older version of the framework. Because of the difference in usability, many of the features that could be implemented with a click in the newer system had to be coded from scratch here, including the image and text layout used for the Channels section and the poster layout for the Local Programs.
The framework switch forced major changes to the planned layout of more information heavy areas of the website. Originally, I planned to utilize the more complex upgraded drop-down navigation to house the various parts of the About section and highlight the four most important sections at the bottom of the page to direct the user. Without the larger menu, I created a responsive secondary navigation bar just for this section. Also, because the system would does not allow creators to switch between column layouts, we had to make sure that all of the information on the page would fit with an extra sidebar.

DPTV Main and About Page Mockups

more projects

Back to Top