What does a smell look like?
Philadelphia is teeming with scientific institutions.
One of the more unique of these institutes is the Monell Center, which, according to their website, is “interdisciplinary basic research on the senses of taste and smell.” Within the center, there are almost 70 scientists exploring olfaction and gustation, and how these senses affect us as people and how we relate to each other and the world. One of these scientists is Kevin Bolding, whose lab studies “olfaction to explore the neurobiological mechanisms of memory.”
Kevin brought up that a lot of lab sites feel cookie-cutter, like everyone was using the same template. He knew he could do something similar himself, but he wanted his lab to stand on its own. He sent over examples of sites that he enjoyed that showed expressive illustrations, colors, and type treatments, and I was excited to bring these inspirations into the site.
I began with a discovery phase exploring different treatments for Bolding Lab, imagining it on a spectrum of buttoned-up and serious to approachable and friendly, and picking two points on the far ends of the spectrum. I then created two style tiles to embody those different directions for the lab.
The beauty of style tiles and loose explorations is that they encourage experimentation and “frankenstein-ing” different elements together. Kevin liked parts of both directions—the color palette and logo from the first, the image treatments from the second—so we moved forward with a design that married those elements.
The resulting design is friendly, but still takes itself seriously—maybe more seriously that it would seem if all the “fun” of the site came from bright color blocking. Speaking of colors—we were very happy with where we ended up for the color palette. We joked that the green looked stinky, but/and we really liked the way it sizzled when layered on the blue. Combined with the logo and its double-duty “stink line”/“graph reading” embellishment, the tone of the site wiggles delightfully and truthfully between “we have fun here!” and “we know how to do our jobs.”
The imagery for the site is all from the lab itself—photos of scents they study, neurological scans, and graphs from their work. Layering them together in photomontage treatments was my way of attempting to depict memory—foggy in areas, clear in others, sometimes made clearer because of overlaps of sense. (Smell and memory are very strongly linked neurologically!)
One proud moment was figuring out how to display a 3D model of a scent port on the Resources page. I had seen it done in my previous job, but had never done it myself, but after some poking around documentation and the Webflow community forums, I was able to export the model Kevin provided as a .glb file in Blender (after retexturing it to match the site, of course), upload it to Google Drive, grab that link, and put it into an HTML embed in Webflow. The result is a fully interactive little 3D model
The Bolding Lab website was completed in a little over a month and a half. I used Figma for all design work, and made a lot of use of the Figma to Webflow plugin. Where that plugin faltered, I used my knowledge of HTML and CSS. I learned a lot of knew things as well! This was my first Webflow project, and there were a lot of things I knew were possible, but had no clue how to do, so my friend Professor Google taught me a lot.
Once the site was ready to be handed off, I put together a content editing guide so the lab could have full ownership of the site. At the time of writing this, they have made multiple edits to the content without losing the design’s integrity.