BetterLesson

Redesigned the Resource Center to make professional development resources easier to find for K–12 faculty and leaders.

Role

UI/Web Designer

Timeline

1.5 months (2025)

Tools

Figma, Wordpress

Category

UI/Web Design, UX Strategy

Role

UI/Web Designer

Timeline

1.5 months (2025)

Tools

Figma, Wordpress

Category

UI/Web Design, UX Strategy

Overview

The Problem

Visitors struggled to find relevant content in BetterLesson’s professional development resource center, resulting in low engagement and missed sales opportunities.

The Solution

  • Redesigned the resource center to include role- and topic-based filtering and content recommendations to allow visitors to see relevant resources.

  • Worked with a developer in Figma and WordPress to create custom fields/blocks to allow sales and marketing teams to easily create, update, and manage web content.

  • Ensured responsiveness on all devices.

The Impact

  • Helped make resources easy to find and navigate, creating an elevated experience.

  • Empowered cross-functional teams to produce branded webpages via WordPress that were self-explanatory and intuitive to use.

  • Delivered a fully responsive experience, allowing users to navigate content across any device.

Research

Stakeholder Interviews

Stakeholder interviews uncovered critical issues:

  • Visitors couldn’t easily find relevant content for their role or pain point.

  • There was no personalization or content recommendations, so visitors weren’t being presented with related articles.

  • Visitors could only see three items per content category, making it hard to explore older but appropriate resources.

01 - No personalization for filtering, 02 - Highlighted resources lacked visual hierarchy, 03 - Only three items per content category

Competitive Analysis

I conducted competitive analysis on EdTech platforms and content-heavy sites. Successful platforms: 

  • Incorporated filtering, rather than static menus.

  • Included recommendations to keep visitors exploring.

  • Placed lead capture (sign-up forms and CTAs) right next to the main content so visitors didn’t have to scroll to the bottom to take action.

Key Design Solutions

Discovery & Filtering

At the top of the page, a hero carousel was introduced to draw immediate attention to an upcoming webinar or a helpful key resource before visitors scrolled down to see the main resource hub. Below it, a role- and topic-based filtering system along with a search bar was implemented to help educators and school leaders quickly find content relevant to them.

01 - Hero carousel to highlight resources, 02 - Filters to allow for exploration of the entire resource library

Drafts in Figma exploring how to lay out the landing page of the resource center

Persistent CTAs & Related Content

Tailored to each resource type, a sticky right-hand sidebar was integrated to house gated downloadable content, event registration, and key CTAs. Additionally, every resource page featured a “You may also like…” section at the bottom to encourage continuous exploring.

01 - Sticky right-hand sidebar, 02 - "You may also like" recommending similar resources

Flexible WordPress Blocks

While initially built to spotlight BetterLesson’s podcast, a universal promo banner was designed as a flexible custom WordPress field/block. This allowed the marketing team to drop the banner onto any page and update the copy, images, background, or CTAs without needing support from the design team.

01 - Universal promo banner, able to customize in WordPress

Next Steps

In order to support BetterLesson’s repositioning efforts, I had to heavily rely on competitive analysis and design heuristics. In a future iteration, it would be helpful to pair these insights with user interviews and A/B testing. Testing would focus on the filtering system, effectiveness of the sticky sidebar CTAs, and how many visitors interacted with the recommended resources and promo banner.