Blum Center Article

The Blum Center for Developing Economies at UC Berkeley is a hub dedicated to addressing global poverty through education, research, and engagement. But its articles page—the heart of its storytelling—was struggling to engage readers. The stories of researchers, students, and change-makers were buried under an outdated interface, making it hard for visitors to explore and connect with the content.

I set out to redesign the Blum Center’s blog not just as a content repository but as a dynamic storytelling platform. The goal was to enhance content discoverability, improve readability, and ensure that each story reached its audience effectively.

MY ROLE

UX Designer: Part of the end-to-end design process - discovery, analysis, user research, requirements, design, testing, and support through launch

TYPE OF PROJECT

Core UX Design project aimed at improving educational and informational web experiences.

RESEARCH

Before starting the redesign, I wanted to know what the users thought about the site.

I conducted user survey, user interviews, data analysis, Competitive Analysis, and design and accessibility audits to get an idea about what was causing users the most frustration and what are preventing them from interacting with the content.

User Interviews

Understanding how students, researchers, and faculty engage and consumed the content.

Data Analysis

Using Google Analytics and hotjar data to identifying drop-off points and underutilized content.

Competitive Analysis

Learning from other research institutions and news platforms to see how they structure storytelling experiences.

Accessibility and Design Audit

Conducted a comprehensive accessibility and design audit for the article section to figure out major UI issues.

DISCOVERY

Identified 6 key areas of improvement

Poor Content Discoverability

95% of the users stated poor content discoverability as the main reason they found the article page annoying.

Users struggled to find relevant articles since the articles were not categoried properly nor the page allowed search and filtering. The only option was to scroll and search manually. Users wanted a way to find stories based on themes and topics

Readability was a major barrier

Poor visual hierarchy, Long paragraphs, small fonts, and low contrast made it difficult to engage with content. The pages were cluttered with inconsistent layouts.

Irrelevant related articles

The related articles were showing articles from 3-4 years ago instead of latest related articles. Lack of relevent related articles led to low engagement, high drop-off rates and reducing exploration within the blog.

Absence of Reading Time

Almost all users mentioned that having an estimated read time displayed for each article was really useful. This is something they liked about other sites but was missing from ours.

Alignment with Modern Web UI Standards & Berkeley UI Guidelines:

The site lacked Berkeley’s brand identity and had an outdated design, which impacted its visual consistency and user experience.

Responsive design needed improvements

The site's responsive design required significant improvements to ensure a seamless and accessible experience across all devices

THE NARRATIVE FRAMEWORK

I approached the redesign with a storytelling framework:

Setting the Stage

The homepage serves as the gateway to compelling stories, drawing users in from the moment they arrive.

Featured stories became prominent, drawing users in with compelling headlines and images.
Ensuring that each article card has all the relevent information like excerpt, categories, author and reading time, to help the user understand more about the article and want to read it.

Guiding the Journey

A well-structured path encourages deeper engagement and makes exploring related stories effortless.

A new filtering and tagging system ensures users can navigate the blog by their interests, uncovering content that resonates with them.
A "Related Stories" section intelligently curates additional articles, allowing users to naturally flow from one piece to another.

Enhancing the Reading Experience

A strong visual hierarchy and engaging format make the content more digestible and enjoyable.

Improved typography, spacing, and color contrast ensure effortless readability, reducing visual fatigue.
High-quality images, pull quotes, and section dividers break up long-form content, making stories feel dynamic and compelling.
Estimated reading time sets clear expectations for users, helping them choose content that fits within their available time.

Clear Action Items

Instead of hiding action items like the newsletter sign-up in the footer, placing the newsletter sign-up section prominently encourages user retention and content engagement.

Bringing the newsletter sign-up action to the middle of the page increases visibility.
Ensuring that the newsletter sign-up in the reading section is seamlessly integrated prevents disruptions to the reading flow while still encouraging user engagement.

Responsive and Accessible Design

Ensuring that the article section is responsive across different screens and follow all A and AA WCAG accessibility rules.

Creating a fully responsive article section, ensuring seamless usability across devices with optimized layouts, typography, and flexible interactive elements.
Implemented WCAG A & AA accessibility standards, enhancing usability with proper contrast, keyboard navigation, alt text, semantic HTML, and ARIA landmarks.

UC Berkeley

Blum Center Article Page Design