A design board of elements for the Berkeley Lab website.

Berkeley Lab is one of the foremost scientific institutions in the world. Since 1931 it has had an unparalleled record of breakthroughs that have changed the world for the better.

The Lab’s website hadn’t been updated since 2006 and didn’t allow the their communicators to properly tell a cohesive story of excellence. Due to decentralized management of the Lab’s various web presences, the previous site was fragmented along organizational lines and did not tell a coherent Lab story or offer the most critical web visitors a cohesive experience.

They selected Smith & Connors to help them design and build a best-in-class digital design system and set of flexible, modular websites to express their brand story accurately and inspirationally, and to serve the Lab’s mission and myriad audiences.

A major challenge of the project was to build a new system that embodied the vision of the Lab as a whole while meeting the requirements of the Lab’s office of strategic communications as well as 6 scientific areas, and their divisions and user facilities.

The Berkeley Lab Design System is leveraged by its divisions and user facilities to create websites that bring cohesion and modern accessibility across the Lab.

Awards & Recognition
Screenshots of various wireframed layouts depicting a page in mobile, tablet and desktop layouts
Our wireframing phase focused on UX and responsive behaviors across the vast system.
A graphic showing the user pathway for a "teen science enthusiast" persona, which starts on the lbl.gov homepage and then visits a research theme and a news story, and then shares the story on social media

Discovery at a Glance

Building the Foundations

An audience-focused content strategy

After an extensive discovery phase, we organized our insights into a cohesive content strategy laser-focused on helping audiences find what they need and, at the same time, inspire them to explore, to go further and discover what they didn’t know was there. We wanted to satisfy audiences while also making them say, “Wow, I didn’t know they did that at Berkeley Lab!”

Defining the experience goals

Openness

Express a sense of welcoming and approachability throughout the experience.

Grandness of Mission & Scope

Celebrate Berkeley Lab’s excellence and portray it as part of a continuum in an ongoing history of one of the best labs in the world.

Expansiveness

Convey a sense of possibility.

Exact

Ground the experience in rigorous, evident structures.
Animated gif showing the previous brand font of Transitional 511 and the new font Guardian Egyptian Text.
We replaced one of their brand fonts with the sophisticated and highly accessible serif font, Guardian Egyptian Text, for body copy, which adds an editorial feel to the site.
Screenshot of a Call to Action block showing the fonts in heading levels 2 and 5 and in body copy
Berkeley Lab consists of six scientific Research Areas, each of which houses several divisions and user facilities. We developed a system that allows each scientific Research Area to have their own identities while maintaining a strong connection to the Lab.

Building a fully modular system

This was more than a website redesign. We built a modular system made of intricate parts that can grow with the Lab. The new Berkeley Lab Design System is built with Native Web Components and other cutting-edge technologies for extraordinary flexibility and best practices in SEO, accessibility, UX, and responsiveness built in.
A design canvas showing many types of web components build for the new Berkeley Lab design system
A canvas of 3 different page layouts making use of the new Berkeley Lab design system
An animated gif showing several division landing pages and their navigations in various hover states

The Technology Under the Hood

We built a custom WordPress theme and plugin with highly complex settings and an intuitive CMS admin experience. Because the system will be accessed by hundreds of communicators and contractors, we built a library for documentation, user guides, and screencasts to guide website admins now and into the future.
The site’s custom modular system makes it easy for their communicators to assemble pages for many different content types.

Live user testing

We developed test prototypes to validate our assumptions with users from different audience groups. We helped develop content and stitched together specific pathways through an interactive experience mimicking the real site. We then conducted 14 live test sessions with people from the Lab’s various audiences to see how they navigated the content and spot areas for improvements.
Custom iconography for Berkeley National Laboratory.
As part of the design system, we created custom iconography for the Lab, a subtle touch that does a lot of work to guide visitors through their experience.
Prototype test results for Berkeley Lab website.
Before we went into full production mode, we built a prototype to test the experience. The tests provided our teams with valuable, actionable insights.
Because the Lab has a complex set of audiences, we tested dozens of user pathways to validate our strategies.

A news site to match 

One of the key functions of the strategic communications team at Berkeley Lab is to get the word out to the public about their groundbreaking science. As a federal institution, they are responsible to us, the taxpayers. The new News Center site lets the science shine with beautiful imagery, featured links to publications and researcher profiles, and much more.
A design canvas showing many the news center web components build for the new Berkeley Lab design system.
A design canvas showing many the news center web components build for the new Berkeley Lab design system.

Our challenge from the beginning was to drive adoption by a dozen groups across the Lab that were unaccustomed to any central coordination. Smith & Connors helped us deliver a content and design strategy that offered a cohesive lab experience while offering the flexibility sought by our internal partners  — while addressing everyone's need to adopt modern standards for user experience, accessibility, responsiveness, and SEO.
John German the CCO of Berkeley Lab

Project Scope

  • Change Management
  • Interviews
  • Staff Engagement
  • Surveys
  • Workshops & Focus Groups
  • Content Development
  • Content Strategy
  • Documentation
  • SEO Strategy & Optimization
  • User Testing
  • Web Design & Development
A close-up photograph of a hand holding a dark green water bottle with the Oregon Well-Being Trust's new logo printed on the front.
A grid of the newly designed icons we designed for OWT.

Let’s make something great together.