Overview

Pittsburgh Community Television (PCTV) is among the oldest public access media organizations in the USA. PCTV is a community media center that serves thousands of Pittsburgh residents and non-profits, giving them low cost access to media production tools and the ability to broadcast their thoughts, ideas, and creativity. PCTV empowers, educates, and enhances the Greater Pittsburgh community through media.

Goals

  • To redesign and improve the layout of the website

  • To ensure that the website is responsive for mobile devices

Role

UX/UI Designer

Tools

  • Figma

Timeline

4 weeks

PCTV21.org

Website Redesign

1. Research

Goals

To understand the business objectives and to discover areas for improvement on the site

 

Process

Business Analysis, Site Analysis, Competitor Analysis

Business Analysis

I worked closely with the Director of Community Relations and For Profit Production Services, who was in charge of maintenance of the existing website. I asked general questions to form an understanding of why the site was designed the way it was, what pain points they might have encountered, and what they'd like to see improved. 

Primary business needs we defined were:

  • Improve peoples' understanding of PCTV 

  • Increase contributions made on the website

  • Make it easier for people to become a producer with PCTV

  • Increase viewership and professional outreach

Site Analysis

I looked at the current PCTV website to determine what could be improved to address the defined business needs. Overall, the website was difficult to navigate, with pages organized under incorrect headings and grouped together with diverse categories.

I identified several issues that could make it difficult for website visitors to achieve their intended goals:

  • Visitors wanting to watch PCTV might have difficulty understanding where to go. There were 2 separate and different pages labeled as "On YouTube," with one showing playlists and a link to their YouTube page, while the other seemed to have YouTube tutorials on how to watch on other platforms like Fire TV or Roku.

  • Difficult to find out how to become a community producer. There are different pages under the "Classes" menu tab. Most of the pages were intended for individuals wanting to become a producer, which requires an orientation, class, and forms. Another page was for special and one-time classes and workshops.

  • The website's mobile version was not user-friendly. The site was not built responsively or optimized for mobile devices.

  • The homepage didn't have any specific information about what PCTV is or communicate PCTV's purpose.

Current site map

Both of these pages are labeled as "On YouTube"

The mobile website (right) was a duplicate of the web version (left)

Competitor Analysis

I looked at other community media organization websites to identify best practices and design trends. I checked out PhillyCam, SPNN, Cultural Survival, and KMVT15.

One common feature across these websites was the placement of the Donate button in the header, typically the right side, to highlight it as the main CTA. Utilizing this design pattern would make it easier and more familiar for users to get involved and donate to the organization. 

Another common trend was featuring news, events, and video playlists on the home page.

Donate CTA buttons featured in the header

News, events, and video playlists on other home pages

2. Design

Goals

To organize the information architecture and design all the pages for the website

Process

Site Map, Mid-Fidelity Wireframes 

 

Sitemap

I created a sitemap to map out the information architecture for PCTV's website based on functions within the site. For example, the Become a Producer class and Workshops and Events were grouped together under Create and Learn, and the various methods to watch PCTV were grouped under Watch.

Mid-Fidelity Wireframes

Easily accessible information about PCTV's offerings and ways to get involved.

I added important information to their homepage, including current news, an introductory video of their channel, relevant COVID-19 information and resources, a playlist of recent video uploads, and links to information about PCTV, events, and ways to get involved. I also designed the Donate button to be easily visible and always accessible from the header, to make it easier for users to contribute. 

A more streamlined process to become a community TV producer

Previously, the information and resources to become a community TV producer were spread across several pages. It was important to make the process more simple and provide all the information necessary for individuals wanting to become a producer. I designed the Become a Producer page, where users could learn about the benefits, how to get started, sign up for orientation, view the associated fees, and access required forms. 

Establish credibility and professional production quality

I wanted to ensure that potential clients, for profit and non profit businesses, would have confidence in PCTV's professional production capabilities. In addition to showcasing some of their completed works, I included a list of their clients and some testimonials from previous customers who have been satisfied with PCTV's work.

Educate visitors on PCTV's history and mission

To improve the community's understanding of PCTV, I included information about PCTV's history and purpose. Users can also easily view the staff and board members as well as contact information.

 

3. Branding and Revisions

Goals

To create branding materials and finalize the website design

Process

Branding, Hi-Fidelity Revisions

Branding

I created a style tile, incorporating their previous color scheme, but created a new logo. I updated their imagery and font style to refresh their visual design.

Hi-Fidelity Wireframes

I applied the UI to create the hi-fidelity wireframes.

Let's Make it Mobile-Friendly!

The old mobile version of PCTV's website was an exact copy of their desktop version, which wasn't easy to navigate or read on a mobile device. As part of PCTV's goals, making the website mobile-friendly and responsive was a much-needed priority. 

Conclusion

Moving forward with this project, I'd like to brainstorm and provide ways to increase user engagement and traffic to the website. As a community resource, it's important that the community is aware of the low-cost services that PCTV has to offer, which encourages the spread of creativity and thoughtful discussion.

Next Steps

  • Brainstorm and provide ways to increase user engagement and traffic to the website

  • Increase community sign-ups, through workshop and class registrations, donations, and newsletter subscriptions

  • Work with developers to implement the design

 

LET'S GET IN TOUCH

Want to say hi? Interested in working together? I'd love to hear from you!

  • LinkedIn