HAOLAB Redesign 2022

For this project I worked on creating a new homepage for UCSD’s HAO LAB. The lab integrates biology, engineering and computer science, in their studies. The Lab is doing riveting work in cutting-edge exciting fields such as anti-aging, stressing and narrowing down the pathology of diseases. 

The Problem

For a lab that is doing such novel work, it only follows that their homepage should reflect this. In this light, the Principal Investigator of the lab and his development team reached out to me, requesting me to help redefine the overall look of the website and as a result elevate the branding of the LAB.

The homepage of their website at the time looked like this:

The P.I Nan Hao, communicated to me that he wanted the landing page to truly capture the futuristic nature of the work being done at the lab. As a result in my conversation with the client he requested that I create a 3-D interactive environment that would look visually appealing and at the same time engage the visitors of the web page in such a way that would compel them to explore the work being done by the lab.

With this in mind I began to ideate and come up with different environments which captures the essence of what it feels like to be in a LAB environment and leaves the visitor with an almost child-like feeling of awe and wonder making them want to explore the rest of the work that is being done in the lab, on the website.

DNA Helix Strands:

My first idea was to experiment with the DNA Helix strands and to create a 3D animation that would capture the attention of the visitors of the web page. For the purpose of the seamless integration into a website, I chose to use an online 3-D software called Spline. 

I began by first creating a basic model of the strands in the software. This can be seen here:

After having created the strands I then took this model of the DNA Helix Strands to my client in order to get some feedback about the design.

The P.I Nan Hao had some insightful feedback about the Helix Strands. The feedback has been summarized in the notes below:

• I like the way that the light that goes along the DNA strands

• I don’t particularly like the colors of the Helix and I would like the helix to be more clearly illuminated

• I would like the rotation of the animation to be looped, and not mirrored

• It would be nice if the strands had an almost holographic glow effect so that they stood out more

Improved Helix Design and Animation:

After having taken the feedback from my client into consideration, I then began to iterate upon this DNA Strand. I started off by changing the textures of the helix strands so that they appeared to be more luminous and glowing so that an ethereal effect was achieved. I also changed the animation so that the strands did a continuous 360 rotation rather than a 180 which was then mirrored and reversed.

The final design can be seen below:

The Science LAB:

After having finalized the DNA strand design and animation, my client informed me that in addition to the Helix Strands he wanted there to be an interactive environment in the homepage that conveyed the feeling of being in a LAB.  With this in mind I set about creating an open science lab which visitors of the web page could explore and feel as though they were truly looking and interacting at all of the different aspects of a science lab. 

I started off by iterating and creating the skeleton for the model of the science lab, modeling just the walls and floor of the lab. 

Having created a base model, I then began to add different lighting as well as colors to make the room feel as though it was a science lab. I lightened and extended the size of the walls and added a work bench and floor tiling to give the room a more clean and clinical feeling.

HAO Lab 2nd Iteration

After having a better idea of what the room should feel and look like, I began to add more specific objects to the room that are characteristic of a science lab. In order to create a an accurate model of a science lab , I visited the HAO Lab in order to gain a better understanding of how the lab should look and the necessary features of the lab that go into making it a science lab. For example, I decided to model and add test-tubes, a microscope, a whiteboard as well as books and a shelf. This can be seen here:

HAO Lab 3rd Iteration

After having finished the 2nd iteration I showed the design to the P.I. The P.I suggested design changes to help communicate to the user what they are seeing. The P.I suggested:

• ‘The logo should of the Lab (HAO LAB should be in a location that is more visible to the viewer. I want it to be the first that thing that the visitor on the website sees.’

• There are no actual test tubes used in the lab

• The user needs to be directed to three different pages from the home screen. The buttons need to be accessible and should directed the visitor aforementioned pages

Upon receiving this feedback I then set about implementing these changes creating a third iteration of the design:

Taking my client’s feedback gave into into account coupled with having to account for certain constraints of the software; I was forced to change certain models and objects that were too heavy and caused loading issues in the textures when the environment had to be embedded into the website. In place of the different pieces of equipment such as the sink, microscope and test tubes I instead created a model of a Burette and Burette Holder. In order to keep the viewers attention I also incorporated the Helix and its animation into the scene to keep the viewers attention. I decided to placethe HAO Lab Logo and the three buttons (which when clicked will direct the visitor of the website to the pertinent Webpage) together, directly in front of the camera so that the visitor would know exactly where they are and how they can access the web pages concerned with the different work that the lab is doing on their website

Final Design

After finalizing the 3D interactive environment of the Lab with my client, I then embedded the 3D Environment onto their website using webflow. This is what the new homepage of the website looks like!

To view the homepage for yourself: https://haolab.webflow.io/