OVERVIEW

Since Sept. 2018, I’ve been working with a team of synthetic biologists at MIT Collins Lab to design and create a website for their product BioBits. The objective of this project is to use website as a media to introduce BioBits to schools that don’t have the resources to conduct high-requirements/ complex biology experiment.

PROBLEM

Since BioBits is designed to be used by teachers and students with no biological trainings, it is difficult to explain the scientific mechanics behind the product in a succinct way on the website. The cutting edge technology used to manufacture the product is a highlight, but can also be intimidating for targeted users. The goal therefore should be to maintain an approachable style while sufficiently explain the synthetic biology behind the product.

BUILD

WHAT IS BIOBITS?

BioBits is a hands-on tool kit that takes advantage of cutting-edge freeze-dried cell-free technology to make it possible to run biological experiments without living cells.

Inside the kits there are:

Using the materials contained in the kit, educators are able to carry out classroom experiments with students without growing cells or complex/high-cost machines. BioBits makes hands-on learning accessible for everyone and everywhere.

RESEARCH

Users’ demands

Potential Customers can get a good sense of what BioBits is and its advanced features by quickly browsing the home page. BioBits Users can navigate to specific sections to find additional resources and instructions.

Important features after competitive analysis

• Splash screen with brand logo
  
• Scrollable home page
• Graphic information
  
• Accessible nav bar
  
• Multimedia element (video)
  
• Playful background
  
• Easy access to additional information

PERSONA

Large portion of the website users are high school teachers and investors who are looking to invest in tech product. 

• Limited synthetic biology background
  
• Looking for education community
  
• Cost-aware
  
• Looking for resources/class material
  
• Need straight-forward/ approachable information

Tech Invester

• Need convincing
  
• Looking for product feature and potential
  
• Scholar/ Authority backup
  
• Brand authenticity
• Want holistic/detailed information
  
• Access contact information

STYLE GUIDE

HI-FI ITERARION

PROTOTYPE: RESPONSIVE WEB APP

Because of the nature of this project, interactive prototype for mobile device gives developer visual sensitivity when developing responsive web app. 

 COALITION / COMMAND /  INVOICECLOUD /  FORMLABS  /  HBO  /  BIOBITS  /  LITTLE SPOONFUL