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. They were in need of a comprehensive design overhaul, to migrate off of a proprietary platform onto their own instance of Drupal, and to support heavy fundraising initiatives in preparation for an exciting transition; previously a division within UCB, CDSS was soon to become the first new college at Berkeley in over 50 years.
Our team worked closely with CDSS’ leadership to understand their goals and vision for the new college. We conducted extensive research and analysis to identify areas of improvement and developed a customized strategy for the redesign. Our focus was on creating a modern, user-friendly, mobile-friendly, well-organized, and visually appealing website that conveyed CDSS’ position within UCB, and that is a more-useful resource for CDSS’ various audiences including students, faculty, and affiliated units.
Future-proofing by design
The new website had to not only meet the organization's immediate needs but also set them up for future success as a college, playing a crucial role in supporting their fundraising efforts and building a strong online presence in preparation for the transition.
The CDSS website was redesigned from the ground up, with as much care and consideration put into designing the mobile experience as much as the desktop. The new site also needed to adhere to ADA WCAG 2.1 AA accessibility requirements, which includes keyboard accessibility, catering for the visually impaired or suffering from color blindness, and used the 3rd-party tool Siteimprove to help guide the process.
Our team also tackled the challenge of migrating the organization's existing website from a proprietary platform to the newest version of Drupal, a robust and flexible open-source content management system. We worked closely with the organization's team to ensure a seamless transition and minimize disruption to their daily operations.
Setting CDSS apart from other Berkeley colleges
Black Antelope has been fortunate enough to work on many websites for UC Berkeley over the years at this point, and while there are significant brand guidelines defined for logo and typography use, primary and secondary color palettes and example graphic asset treatments, we are constantly challenging ourselves to give a unique look and feel to each department to separate one website from the next, but also seen as a collective family externally.
For CDSS, we wanted to give the design an entirely new geometric accent that tied into the data information component of the division, mixed with a significant amount of student and campus related photography from Berkeley’s own resource gallery. This in addition to adding gradient blends of brand colors to various panels and titles gave the new website the individuality ourselves and CDSS were aiming for.
Making rich content easily digestible
As part of the design process, significant content and navigation restructuring was required to clearly separate the core categories for the new website, with added landing pages to spotlight key content and guide users across the various subsections of a navigation item. With a heavy focus on not excessively overloading the workload of the CDSS team, we addressed each page we designed to:
- Overcome the challenge of considerably text-heavy or often text-only pages being easier to parse and more engaging.
- Review page order and layouts for the best user experience, applying the new aesthetic and Berkeley photography where relevant to elevate the content and make it easier to digest.
- Add more focus on affiliated departments and partners by incorporating their brand logos for external website links.
Particularly in relation to the sheer volume of text and elements found on many of the existing CDSS pages, part of the new design language was to frame and separate these page components using subtle background color panels, immediately making a heavy page simpler to read and retain the interest of the intended audience.
Historic timeline
We really wanted to heighten the impact of the progress and evolution in data science at Berkeley originally and suggested a unique and more expansive timeline design for the new website. Originally a text only list, we wanted to make this far more engaging visually, but still simple by design and for future additions to be made by the client. We introduced our hexagonal graphic accents to frame the new timeline, adding a mini-navigation to scroll by year and breaking the content up by year allowed us to cleanly depict content spanning the last 14 years of Berkeley history. This also had to translate comfortably into a single column format for mobile devices.
Responsive design
Once the desktop suite of designs had been approved, we moved onto the mobile subset, a selection of key pages based on their desktop counterpart to inform production on the transition from desktop to mobile device and a single column format. A significant portion of CDSS’ audience comes from mobile device users, so ensuring a mobile-friendly user experience was paramount.
Research articles, information for potential and existing students and undergrads, major requirements and job opportunities at CDSS are some of the major components of the new website structure and ensuring a seamless viewing experience across devices was vital. Our initial research and analysis into the project requirements allowed us to intuitively find the best pathways for that experience, such as moving side bar content beneath the main body of the article to allow focus to firmly sit on the article, yet remove side navigation so that a singular means of navigating the site intuitively stemmed from the multi-level hamburger menus for mobile devices. The aim was to keep the layouts clear, avoid user confusion, establish a persistent approach to navigation and hierarchy and retain user interest.
Micro-site implementation
While the main site focused on news, research, academic information and equity and inclusion at Berkeley, an additional part of the design scope was the inclusion of designs for micro-site template layouts that could be utilised for unlimited hub sites in the future. We were tasked with six unique micro-site hubs for our original design phase, each requiring their own unique tabbed navigation, landing pages and inner page examples that followed the now well-established design language dictated by the new primary site, but flexible enough to cleanly structure the various content blocks for each page. Additional design elements outside of the existing language included full width video sliders, design for class calendars, featured spotlight sidebar panels and further guidance into iconography and image treatments.
