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

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
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
Applied gestalt theory and UX writing
The membership team is happy
Our next big thing… Events and Spotify for Public Media Broadcast?
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