About CDSS
The UC Berkeley College of Computing, Data Science, and Society (CDSS) is focused on computing and data science research, including AI (artificial intelligence) and machine learning in just about every arena including health care, climate change and politics.
The challenge
CDSS was preparing to become Berkeley’s first new college in more than 50 years. Its website needed to support that transition, communicate its vision to prospective supporters, and serve students, faculty, and affiliated programs.
The project combined a comprehensive redesign with a move from Open Berkeley to a dedicated Drupal instance. Alongside the new visual identity, CDSS needed clearer navigation, more readable academic and research content, and a flexible way to give individual programs and events their own presence within the larger site.
A distinct identity within Berkeley
We worked with CDSS leadership and communications staff to understand the organization’s priorities and shape the new website around them. The design needed to establish CDSS’s identity while maintaining a recognizable connection to Berkeley.
Within the university’s brand guidelines, we introduced geometric accents inspired by the college’s focus on computing and data. Hexagonal forms and gradients drawn from Berkeley’s color palette gave the site a distinct visual language, while student and campus photography connected the academic work to the people and places behind it.
That language extended across the homepage, academic information, research, news, and program pages, creating a consistent identity with enough flexibility for different types of content.
Organizing a complex body of content
The existing site brought together degree requirements, research initiatives, student resources, news, and information about affiliated departments. We restructured navigation and developed landing pages that introduced each area and directed visitors to the relevant subsections.
For lengthy academic and informational pages, we focused on hierarchy and readability. Clear headings, grouped content, subtle background panels, and consistent spacing helped separate topics and make dense material easier to scan. Photography and affiliated organization logos added context where they served the content.
We considered the CDSS team’s capacity throughout this work, adapting existing material to the new layouts and establishing patterns that could be reused across pages.
A dedicated Drupal platform
We rebuilt the site on Drupal, giving CDSS a platform that could be tailored to its content and program needs. Layout Builder and custom content blocks supported varied page layouts within the shared design framework.
The migration involved adapting content from Open Berkeley to the new structure. We documented how to move page content, preserve existing URL aliases, and rebuild elements such as accordions and tabs using the new blocks.
This approach connected the redesign to day-to-day publishing: editors could assemble pages from established elements while maintaining the site’s overall appearance.
Accessibility and mobile usability
WCAG 2.1 AA requirements informed the design and development work. We reviewed color contrast, identifiable links, focus indicators, keyboard navigation, and heading structure, using Siteimprove to help identify issues.
The review also distinguished between accessibility built into templates and components and accessibility that depends on editorial choices. That distinction helped clarify where development changes were needed and where content guidance would support the publishing team.
On mobile, we adapted the navigation hierarchy to a multilevel menu and reorganized page layouts around the main content. BrowserStack testing helped us examine menu scrolling and keyboard behavior across devices and browsers, including smaller screens.
Making Berkeley’s data science history visible
The existing history page was a text-based list. We redesigned it as a timeline with year navigation, grouped milestones, and the geometric accents used throughout the site.
Visitors could move through the history by year, while the mobile layout presented the same material in a single column. The structure also allowed the CDSS team to add milestones as the college continued to develop.
A reusable framework for programs and events
Some initiatives needed more than a standard page. We developed microsite layouts with their own landing pages and local navigation, giving programs a focused experience within the CDSS website.
The Discovery Program helped establish this approach. Its hub brought together program information, application calls to action, related news, video, partners, and opportunities to support the program. Local navigation connected its subsections without relying on the broader research menu.
We extended the framework to other programs and events, including DataHub and the National Workshop on Data Science Education. Horizontal navigation on desktop became a dropdown on mobile, providing a consistent way to move through each hub.
These layouts gave CDSS a foundation for presenting new initiatives while keeping them connected to the college’s design and Drupal platform.
