Responses by Andy Lund, creative director, HAUS.
Background: Real estate company SteelWave is in the process of creating theLAB, a campus of industrial buildings being refurbished for the use of life sciences within minutes of the University of California, Berkeley. The site was designed to attract potential biotech companies and create tenant opportunities while construction is underway. The mixed-use design of the location is similar to that of a creative campus. This needed to resonate in the branding and website, so we tailored theLAB’s interactive experience for tech innovators and scientists alike.
Design core: We designed this site to scroll horizontally so that it would display the full-frame architectural renders of the campus as large as possible by having them max out the height of visitors’ browsers. Artistic 3-D models of microscopic cells introduce each section and bring bursts of color onto the page. These colorful gradients then morph as they follow your cursor. There is also an interactive site plan that toggles between an area-view and map-view to give you a sneak peek of the buildings and amenities.
Favorite details: The homepage opens on a scrollable menu that gives you a snapshot of what the site entails. We tried to express the idea of rotating lenses on a compound microscope by spinning the logomark as you scroll through each section.
Challenges: The website being created in tandem with the architects designing the campus meant that we didn’t have a clear vision of the buildings or specifications of the amenities—at least, not until the site was 90 percent built. This meant that we had to use our intuition for which types of content the site should include. We also created many pieces for the site that were complex on their own, so combining them together in a way that felt cohesive and succinct proved to be a challenge.
Time constraints: There were many starts and stops along the way as people had to adjust to new ways of working during the COVID-19 pandemic. I believe this added new features throughout the process, which could have been simpler and more streamlined with a tighter schedule.
Navigation structure: Our main objective was to get people to the information they were interested in as quickly as possible. The site can be navigated simply through the menu, and you can also bounce from the site plan to a building or amenity section to find out more details about a specific location. We tried to make it easy to consume the entire site from beginning to end, so each interior page prompts you to explore the next, pushing you through the site.
Special navigational features: We wanted to immediately give a glimpse of what the site contained upon landing, so we created a scrollable menu with summaries as the homepage.