SVG file icon

OVERVIEW

Role: Principal UX Designer for external users, UX Designer for CMS users

For: KPBS & NPR

Date: Mar 2021 – April 2022 


In 2021 KPBS received a grant and funding to upgrade its CMS from Ellington to Brightspot Enterprise. KPBS is an NPR member station (1000+) that self-identifies as non-biased, trustworthy news. A major part of the decision to make a move over to Brightspot was to deepen journalism and content collaboration within NPR’s station network while simultaneously making content creation easier. Additionally, the station was seeing a jump in viewership, website impressions, and podcast downloads due to COVID-19, the spread and rise of activism, and the general landscape of politics. 


However, the majority of these users were categorized as “new.” Internal reporting also found that “returning” users had difficulty becoming “loyal” users.

Visitor Frequency - New, Returning and Loyal

2020 Visitor Frequency - New, Returning and Loyal

 

THE PROBLEM(S):

  • Create workflows for our content creators (grant) 

  • Convert new users to returning, or loyal users. Increase the conversion of returning users to loyal users. With special considerations to loyal users, our oldest (literally) demographic.

  • Migrate 10 years' worth of content within three months, website launch was September 27, considering accessibility, information architecture, and cognitive load on our older users.

  • Brightspot had dropped the ball on having an actual working CMS. We were working within a half-finished CMS on a short deadline.

KPBS 2020 and KPBS today

Left to right: KPBS in 2020, KPBS today.

The website underwent many changes from new site mapping, menu design, information architecture and the adoption of a UI design library.

 

USERS

  • Google Analytics reports that 49.3% of our users are female and 50.7% are male. 

  • Largest age group: 35-44 year old (older millennials) 

  • Largest conversion for pledge drives (donations): 65+ 

  • 17.58% of our users are 25-34

  • We want to dedicate reach to Black and Latinx communities 

  • Web producers and content creators

Maria

  • 35-44 group

  • #MomLife

  • Likes to be in the know on culture & events

  • Bilingual

  • Identifies as Hispanic

 

Content Creator

  • Writer

  • Editor

Joe

  • 65+ group

  • Retired

  • Likes to read about local news in San Diego

  • Radio 89.5fm listener

  • Watches the news

 

Web Producer

  • Digital news operations

  • Coordinator

Kendall

  • 25-34

  • Young professional

  • Busy

  • Listens to podcasts on his way to work

  • Identifies as Black

 

Student Intern

  • Internships are 6 months to a year long

UX PROCESS AND WORKFLOW

 The first thing we did was to hold stakeholder interviews to discuss how the teams operate within KPBS, this included contented creators and involved discussing their editing workflow and any collaboration between teams. This allowed us to gain insight into internal users' workflow. We used this information to allow us to leverage tools already offered into Grove and the opportunity to create new ones. All teams were asked the same questions and meetings were recorded for future reference.

Due to the historical context of the website and grant requirements we discussed with the teams what content absolutely needed to be prioritized, what was legal information, and what could be archived. APIs and goals were also considered.

While we were designing for the internal users as much as the external readers, due to lack of time we decided on a screener survey within Typeform.

  • What is your age?

  • Why do you visit news sites?

  • What do you often read about?

  • How do you get your news?

  • Do you get your news from the same source?

UX RESEARCH ARTIFACTS

 

PRD - This document kept track of all our decisions and “whys”

How we kept track of progress to ensure content was not lost or overlooked. This also made it easy to analyze patterns and keep track of notes and additional documentation.

CREATING SOLUTIONS

  • UI SYSTEM

    • First and foremost, we needed a UI design system to quickly build components, maintain branding and create cohesiveness.

    • This would also help reduce cognitive load by keeping interactions consistent.

    • We had a three-month deadline

  • INSIGHT: READERS CLICK ON HEADLINES

  • This was the most common response to “Why do you visit news sites?”

  • Newsletter module could aid in users returning to the site with more frequency

  • ALERT BANNERS

    • Alert banners could keep users interacting longer

    • Alert banners could be used to promote positive internal KPBS Press Releases

Alert Bars Documentation

WIREFRAMES AND WIREFLOWS

With our PRD we created a site map, wireflows, and wireframes.

KPBS - Site Map

Examples of wireframes and early UI 

Examples of wireframes and early UI 

UI DESIGN

Typography Sytem

Web Colors

This UI design was interesting to create. We had a half-finished CMS, this included a lot of UI. One of the main problems of the UI was that it mainly lacked consistency. We also didn’t have documentation for the CMS. 

  • LEVERAGING EXISTING CMS:

    • With a lot of help from our developer and projected manager, we were able to determine what was already built into Grove, what could be enhanced or finished and what needed to be added to reach our goals. 

  • DEV TOOLS & FIGMA:

    • I also personally leveraged my HTML, CSS, and JavaScript skills and began recreating existing components into Figma. With dev tools, I was able to see the names of layers and components, which we kept in Figma for quicker development. (This was dev could copy + pasted as often as possible) This acted as my base or template. 

  • UI & BRANDING:

    • We had an existing brand guideline and adapted it for web accessibility, such as color contrast and web-safe fonts.

  • REVISIONS:

    • The final design went through various changes, from learning more about Grove’s code to insight from stakeholders and feedback from users via our membership team.

  • STILL DEVELOPING:

    • The design system is still growing and will continue to adapt as we gain insight to our users post-launch.

HIGHLIGHTS:

  • Newsletters (tripled our monthly subscribers!!)

As of March 4

  • One Book, One San Diego (22 nominations in a day to 72!)

    • using the new Alert Bars

  • Black Culture page, now working on a Latinx Page

    • We get a lot of positive feedback from the community about this project via our Hearken Embeds

    • More coming up in events

OUTCOMES & LESSONS LEARNED


At the inception of the project most of my previous work had come from working with small teams, I also did not have much experience with the internal workings of a CMS. Now I have more insight on what it’s like to work with requirements, constraints and federal funding. I’ve also really learned that UX design can sometimes be about negotiating, trade-offs, and sometimes even picking your battles. But the biggest lesson…. Documentation is key.

Newsletter Sign Up on mobile

Newsletter Sign Up on mobile