Forging the future by bringing a lab group's old website into the present.
Berkeley's head researcher of Nanophotonics contracted me to design their lab group's website, and in doing so, ideally spike interest in joining his group by differentiating his practice.
Figma, Webflow, After Effects
Hendrik Utzat of UC Berkeley asked Chainlift to help redesign his lab group's website. The goal? Get the greatest talent available to apply.
The problem was low enrollment demand. Hendrik knew that he needed to stand out to inspire more graduate students to apply. So, we got to work differentiating his brand from his colleagues'. To do that, we needed to modernize his user experience.
We began with competitor research. Hendrik provided examples of what's considered "the norm" in his industry to help us compile a reference of what Hendrik wanted to avoid.
Anyone can see the difference between these two sites in the graphic above, but we needed objective criteria to measure our design's success against. Otherwise, we'd just be going by taste, and we need our designs grounded in fact.
To gather data, we performed a combination of surveys, informational interviews, and semiotic analysis using our "what NOT to do" examples as a reference point. The following graphic summarizes that process. Research revealed that the best path forward would be to differentiate Hendrik's lab as a progressive, encouraging environment that's as synonymous with future tech as quantum computing.
To describe our process, let's take a look at how we designed this layout. We'll start with the unmarked version, and then in the two images that follow, we'll annotate how we made our design decisions. In short, we put Hendrik's brand in conversation with popular, easily-recalled examples of "high" tech companies. Light color schemes, evocative of science labs and the sleek minimalism that designers have capitalized on since Squarespace emerged and made it their hallmark.
Redesigning the fastest-growing name in private jet travel.
Redesigning the fastest-growing name in private jet travel.
Redesigning the fastest-growing name in private jet travel.
Constructing an art deco masterpiece for a longstanding cultural landmark.
Constructing an art deco masterpiece for a longstanding cultural landmark.
Constructing an art deco masterpiece for a longstanding cultural landmark.
Migrating massive, cinema-scale videos into a dynamic library with rich animations.
Migrating massive, cinema-scale videos into a dynamic library with rich animations.
Migrating massive, cinema-scale videos into a dynamic library with rich animations.
A brutalist reimagining of a brilliant LA mural shop
A brutalist reimagining of a brilliant LA mural shop
A brutalist reimagining of a brilliant LA mural shop
Design Rush's Best Health & Wellness Website of 2024
Design Rush's Best Health & Wellness Website of 2024
Design Rush's Best Health & Wellness Website of 2024
Department of Labor Compliance App
Department of Labor Compliance App
Department of Labor Compliance App
RobinHood for Real Estate
RobinHood for Real Estate
RobinHood for Real Estate
Material Theme Builder plugin for Webflow
Material Theme Builder plugin for Webflow
Material Theme Builder plugin for Webflow
A Rich Text Database with Track Changes & Version Control
A Rich Text Database with Track Changes & Version Control
A Rich Text Database with Track Changes & Version Control
An interactive quote-builder for web developers.
An interactive quote-builder for web developers.
An interactive quote-builder for web developers.
Design theory tutorial describing LiftKit's spacing theory.
Design theory tutorial describing LiftKit's spacing theory.
Design theory tutorial describing LiftKit's spacing theory.
Colors mean things. Here's why.
Colors mean things. Here's why.
Colors mean things. Here's why.
Part Two of my Spacing Series
Part Two of my Spacing Series
Part Two of my Spacing Series
A quick tutorial about how to create a modern personal website using LiftKit.
A quick tutorial about how to create a modern personal website using LiftKit.
A quick tutorial about how to create a modern personal website using LiftKit.
A Design System for Clean, Organized Layouts
A Design System for Clean, Organized Layouts
A Design System for Clean, Organized Layouts
The golden framework makes its way to Figma.
The golden framework makes its way to Figma.
The golden framework makes its way to Figma.
An evergreen cheat sheet for identifying the scope of a project.
An evergreen cheat sheet for identifying the scope of a project.
An evergreen cheat sheet for identifying the scope of a project.
Berkeley's head researcher of Nanophotonics contracted me to design their lab group's website, and in doing so, ideally spike interest in joining his group by differentiating his practice.
Figma, Webflow, After Effects