The Othering & Belonging Institute at UC Berkeley is dedicated to advancing equality for all, fostering interconnectedness, and addressing our collective relationship with the environment. As a central hub, it brings together researchers, community organizers, policymakers, and other stakeholders to collaborate on building a more inclusive and equitable society.
Black Antelope was entrusted with a complete redesign of the Institute’s website, reimagining its structure and content to better serve its mission.
The challenge
OBI’s website brings together research, publications, articles, events, and initiatives that explore interconnected social issues. Visitors need to understand the Institute’s broader work while finding specific resources, people, and projects within a growing body of content.
The redesign needed to make that breadth easier to navigate and give important work room to stand out. It also had to accommodate very different experiences, from long-form reports and researcher profiles to conference microsites and interactive data, within a coherent website that OBI’s team could maintain.
The solution
Black Antelope redesigned and rebuilt the website in Drupal, bringing clearer navigation, flexible editorial layouts, and specialized project experiences into a shared publishing platform. We used OBI’s existing identity as the foundation for a design system that could support both the Institute’s everyday publishing and the distinct needs of its initiatives.
The work extended beyond the main website into editable microsite templates and research visualizations. Responsive layouts preserve access to detailed content on smaller screens, while ongoing development supports changes to publishing tools, accessibility, and the underlying Drupal platform.
A flexible editorial design system
The homepage needed to introduce OBI’s areas of work while keeping pace with new articles, featured research, and events. We designed it around a balance of persistent institutional content and regularly updated features, giving the team space to highlight current priorities within a consistent structure.
Across the site, we developed layouts for research, articles, resources, people, and events. Shared typography, imagery, and content blocks establish a recognizable visual language, while variations in layout give different kinds of material the presentation they need. A research report can support extended reading, while an event page can bring practical details and registration to the foreground.
This flexibility also carries into special initiatives and microsites. OBI can give a project its own emphasis and visual character while retaining a clear connection to the Institute.
Navigation for a complex organization
We simplified the navigation into clear categories that help visitors find the Institute’s work, people, resources, and events. Donation links remain prominent, providing a direct route for visitors who want to support the organization. On mobile and tablet, a multi-level menu preserves access to the site’s deeper hierarchy.
The responsive work also addressed what happens after visitors reach a page. Long articles, tables, and accordion content needed to remain available on smaller screens. For the Inclusiveness Index, we reworked rankings, filters, and detailed indicator overlays so visitors could explore the data across devices. Full-width, single-column detail views give complex information room to remain readable on mobile.
Microsite development
A key new requirement for O&B was the ability to effectively showcase time-sensitive content within their ever-expanding website while ensuring it remained easily discoverable. To address this, Black Antelope proposed concepts for external landing pages and hub microsites designed to give exclusive focus to specific content. We developed a range of easily editable layouts and templates that O&B could use as a foundation for upcoming or recurring events.
These included single-page designs for smaller events and more comprehensive hub sites with tabbed navigation for larger-scale content.
For example, single-page templates were tailored for local and online events like the Spring Virtual Summit, featuring attendee information, pricing, moderator details, and registration capabilities. Larger microsite hubs, such as those created for O&B’s annual Online Conference, included their own secondary color schemes and tabbed navigation. These hubs highlighted unique content blocks and statistics relevant to the event, providing a rich and tailored experience for users.
Although these external resources are effectively independent from the parent site, they adhered strictly to the style guidelines and structure established in the new design framework, and are managed within the same CMS. While some microsites incorporated distinct color schemes, the visual language and user experience across all online presences remained cohesive and unified.
Black Antelope did a phenomenal job of developing our website, including the CMS and design. They were able to work with anything we threw at them, and the finished product came out perfectly.Marc AbizeidOthering & Belonging Institute @ UC Berkeley
Visualization design
There are several special projects that have required a great deal of consideration in terms of both UX design and visualization design. Among them is the Climate Refugee Database, an interactive map that aims to be ‘powerful and persuasive research tool that demystifies and targets the root causes of climate-induced displacement.’
We were able to use variants of existing design language to define the main sections of the microsite such as the landing page, article rivers and resources. But for the unique interactive map itself, a lot of collaboration was required to ensure we were addressing all the needs of what the database needed to depict to its users in the map visualization, and that it was as intuitive as possible. The map needed to show fixed data such as the number of climate refugees per country, and also allow the user to refine the display by a number of unique indicators. Each country has its own customizable profile page with a full breakdown of its unique metrics and rankings, along with associated case studies for any country that had them.
Another special data visualization project we designed was for the Inclusiveness Index. This project evaluates the degree of inclusivity experienced by marginalized groups both globally and within the United States. This annual index ranks countries and U.S. states using various indicators that measure institutional inclusion and protections for vulnerable populations across social divisions such as gender, race, ethnicity, religion, sexual orientation, and disability. Unlike other assessments that may conflate inclusivity with economic conditions, this index uniquely focuses on inclusivity as a distinct measure, providing insights into how different regions support marginalized communities.
A Drupal platform built to evolve
The Drupal rebuild brought the main website and its CMS-managed microsites into a shared platform, giving OBI’s team a consistent foundation for publishing research, resources, and events. Editable layouts support new initiatives without requiring a separate publishing system for each project.
We also consolidated several legacy content types into a shared Resource model, with categories distinguishing different kinds of material. Related-content listings connect resources to researcher profiles, and we adapted those listings to group material by type where needed. This gives visitors a way to explore a researcher’s publications, articles, videos, and presentations from their profile.
Our ongoing partnership continues to refine the platform as editorial needs change. Work has included improvements to media management, event fields, research endnotes, and the text editor, alongside Drupal upgrades. The website can develop with the Institute’s work while retaining the publishing foundation established through the rebuild.
Accessibility across complex content
Accessibility work extends across navigation, interactive controls, and the Institute’s substantial archive of published material. We have worked on keyboard navigation and focus behavior, and updated sidebar navigation toggles to use buttons that screen readers can identify and operate.
The content itself requires ongoing attention. Reviews have identified issues in pasted transcript formatting, table styles, headings, embedded content, and older standalone HTML pages. Working with OBI’s team, we assess which changes can be handled through shared code or bulk content updates and which require individual editorial review.
This continuing work connects accessibility to both the website’s implementation and the way content is published and maintained.
