arrow_back
Back

Berkeley Nanophotonics

Forging the future by bringing a lab group's old website into the present.

Quick Summary

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.

Tech Stack

Figma, Webflow, After Effects

No items found.

"How do we get more students to apply?"

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.

Standing Out (In a Good Way)

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.

Research

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.

Highlighting Cultural Values through UX Design

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.

Need More Info?

Ask away! Some projects might still be getting updated.

email
Email Me

More 

Websites

Amalfi Jets

Redesigning the fastest-growing name in private jet travel.

Amalfi Jets

Redesigning the fastest-growing name in private jet travel.

GEM Theatre

Constructing an art deco masterpiece for a longstanding cultural landmark.

GEM Theatre

Constructing an art deco masterpiece for a longstanding cultural landmark.

Origin Point

Migrating massive, cinema-scale videos into a dynamic library with rich animations.

Origin Point

Migrating massive, cinema-scale videos into a dynamic library with rich animations.

Pulling Paint Murals

A brutalist reimagining of a brilliant LA mural shop

Pulling Paint Murals

A brutalist reimagining of a brilliant LA mural shop

Strong For Life

Design Rush's Best Health & Wellness Website of 2024

Strong For Life

Design Rush's Best Health & Wellness Website of 2024

More 

Apps

LaborPost

Department of Labor Compliance App

LaborPost

Department of Labor Compliance App

Propfolio

RobinHood for Real Estate

Propfolio

RobinHood for Real Estate

Chainlift Color

Material Theme Builder plugin for Webflow

Chainlift Color

Material Theme Builder plugin for Webflow

Project Equity

A Rich Text Database with Track Changes & Version Control

Project Equity

A Rich Text Database with Track Changes & Version Control

TicketFair

An interactive quote-builder for web developers.

TicketFair

An interactive quote-builder for web developers.

More 

Videos

Secret Science of Perfect Spacing

Design theory tutorial describing LiftKit's spacing theory.

Secret Science of Perfect Spacing

Design theory tutorial describing LiftKit's spacing theory.

How to Use Color Correctly

Colors mean things. Here's why.

How to Use Color Correctly

Colors mean things. Here's why.

Perfect Ratios and How to Find Them

Part Two of my Spacing Series

Perfect Ratios and How to Find Them

Part Two of my Spacing Series

Building A Clean, Modern Resume Site with LiftKit

A quick tutorial about how to create a modern personal website using LiftKit.

Building A Clean, Modern Resume Site with LiftKit

A quick tutorial about how to create a modern personal website using LiftKit.

More 

Frameworks

LiftKit

A Design System for Clean, Organized Layouts

LiftKit

A Design System for Clean, Organized Layouts

LiftKit for Figma

The golden framework makes its way to Figma.

LiftKit for Figma

The golden framework makes its way to Figma.

The MVP Checklist

An evergreen cheat sheet for identifying the scope of a project.

The MVP Checklist

An evergreen cheat sheet for identifying the scope of a project.

Quick Summary

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.

Tech Stack

Figma, Webflow, After Effects