Lawrence Berkeley National Laboratory Website Design
The redesign of the website for Lawrence Berkeley National Laboratory was a massive undertaking spaning nearly 2 years. I joined this massive web redesign project for mid-way through it's completion, helping to execute and elevate the existing UX and UI design through hover state animations and interactivity, as well as leading the design and build of a sophisticated figma prototype to be used for user testing.
The prototype was used to validate the information architecture of the site through previewing a select set of user pathways through the homepage, landing pages, and tertiary pages. It also allowed users to test a complex mega menu design to easily funnel audiences to hundreds of page destinations and 30 partner laboratory sites.
Prototyping user pathways and button animations that felt like the real thing was a new service line I established at Smith & Connors, leading to new design and interactive ideas and increased revenue opportunities across all the web design and development projects that followed Berkeley's.
Berkeley's web information architecture was complex and so were their audiences. Not only did the lab have an array of vastly different content types, research areas, and employee databases that it needed to house within their main site, but they also have an extensive network of smaller laboratories and research centers that they needed to easily funnel users to. With multiple user journeys and hundreds of possible url destinations, a simple dropdown nav solution was not going to cut it.
A complex mega menu was designed to accommodate custom layout needs per landing page section, allowing for images to fill space when needed, and a complex hierarchical list of links that could set users down the right pathways. A utility nav menu was also designed to house practical, but lower priority information for easy access, while keeping the focus on the work that lab was doing.
Project lead, Diana Goldman, had some complex ideas to for button and menu interactions, but conveying static comps to the developers risked the intent getting lost in translation.
I worked with Diana to finesse component designs, create variants across multiple accessible colorways and themes across the site, and prototyped animations and hover effects ranging from simple to complex to make sure dev knew exactly how each interaction should feel and behave.
Part of what made the end product so engaging was the imagery used, and the prototype build was also an opportunity to begin the photo sourcing process. Berkeley had a database of photography that captured much of the campus and historical figures and staff that had worked at or with the lab in the past, but we also needed to source some abstract imagery to speak to the many research areas the lab tackled.
We went through several rounds of image selects to land on a collection that felt inspiring, exciting, and—most importantly—highlighted the diverse landscape of LBL's community and research.
