Website redesign — with a UX, SEO, and accessibility audit
KALW — a San Francisco-based radio station — had recently migrated to Grove CMS platform, which was developed by NPR. The switch to the new CMS happened too quickly, giving KALW access to some exciting new functionality, but causing many problems with the site’s UX. Having a very short time frame before the unveiling of their new brand and not having the budget to conduct usability research, I proposed an audit (UX, SEO, and accessibility) that became a core workflow that I continue to offer on all website redesign projects. I then integrated those findings into a wireframe demonstrating a new direction for the station’s UX strategy. And I updated the site’s branding and component library using CSS.
Role: Freelance UX designer/marketing strategist
Tools: Figma, SEMrush, VoiceOver, Grove CMS, CSS, Google Slides, Airtable
Impact
Executed a successful relaunch with a new UX strategy and new branding
Helped KALW understand what was possible and what wasn’t given the constraints of the CMS
Brought accessibility issues to the attention of NPR headquarters that were subsequently integrated into the Grove product roadmap, benefitting all other NPR stations using the platform
Deep dive
Discover
User goals
In a project discovery workshop, I helped the station identify these four user goals to guide our efforts in the redesign:
- Listen to a specific podcast
- Find a specific show, person, episode, story, or topic
- Learn more about topics that matter to you
- Make a donation
User flows
Building on these user goals, I then mapped out the user flows for the existing website to identify key parts of the flows that could be improved in the relaunch.
Define
UX audit
By walking through each of the user flows I diagrammed, I examined each page for common usability issues (commonly referred to as a heuristic evaluation).
SEO audit
I used the SEO tool SEMrush to crawl the entire 50,000+ page site, focusing on high-impact technical SEO fixes.
Accessibility audit
I ran the brand colors through color contrast checkers and examined the experience for keyboard and screen reader users.
Identifying technical challenges
The station had limited knowledge of how much a solo designer could edit using the CMS. I conducted a series of interviews with digital teams at NPR and other stations to discover these limitations and collaborated with KALW and NPR on strategies to address them.
Iterate
Wireframes
I created wireframes for eight key pages and went through multiple rounds of client feedback before making any changes in the CMS.
Visual design and CSS updates
Using Grove, I built new components to match the wireframes, and I applied KALW’s new brand using CSS.
Next steps
I identified five other projects that would have a positive impact on KALW’s UX, SEO, and accessibility:
- Card-sorting to determine user-centric labeling for main menu, sections, and tabs
- SEO project to fix broken content and maximize the site’s crawl budget
- Donation user flow optimization with development team and Givecloud
- Prevent errors by providing training on content production
- Partner with NPR on accessibility user testing