Quintessence Biosciences

Quintessence Biosciences Website

Summary

Quintessence Biosciences is a biotech company based out of Madison, Wisconsin. This project involved a redesign of their marketing site requested by co-founder, Laura Strong. They have a lot of content and needed to restructure it so that it was more readible and navigable. They also wanted to showcase their equipment and process for investors and non-technical individuals.

View Live

Deliverables

Technologies

Challenges

The most challenging aspect of this project was organizing and presenting the content. It was also a challenge to make sure the website was consistent with an existing brand.

Research

For this project, I studied different labs and biotech companies and how they presented information. I used some of the strategies and techniques that I found worked well to present information to a non-technical audience (such as breaking up information into more digestible chunks and displaying information visually) to help inform the design.

Design Planning

I decided on a minimal color scheme, mostly using dark grey and pink, so that the main focus of the website was the content. I put the most relevant information for non-technical people on the homepage and the more technical information on other internal pages. This allows non-technical viewers to find the information they need quickly and more technical viewers would be able to navigate easily to find more detailed information.

Mockups

Quintessence Bioscioneces Homepage Mockup

I ended up adding a black and white treatment to the carousel images to make the color scheme on the site more consistent. I also added social media to each page in the top right as a sub-navigation because the company is active on social media as well.

Quintessence Biosciences About Page Mockup

For the about page, I decided to use the secondary color of the brand (blue) for the tabs instead of the pink. The pink ended up being too overpowering if it was used too much.

Quintessence Biosciences Products Page Mockup

The product pipeline page outlines information about the products as well as showing where they are in the process of production.

Quintessence Biosciences Individual Product Page Mockup

The individual product pages are have a lot of white space to draw attention to the content and the diagrams explaining the product.

Quintessence Biosciences Blog Mockup

Laura requested a blog where they could post company updates and upcominge events. The events are opportunities for the company to engage investors, so they needed to be prominently displayed both on the homepage and the blog.

Quintessence Biosciences Contact Us Page Mockup

Contact Us Page