Cell Collective

BRANDING & UI DESIGN

THE CHALLENGE

I collaborated with Cell Collective to help them define their visual style and create a website login page for their network modeling product. Cell Collective creates software for students and professionals to explore and simulate a variety of existing network models as well as create, analyze and simulate their own. Through the software, you can model various types of biological processes, including metabolic networks, gene regulation, signal transduction, cell-cell interaction networks, food webs, and much more related to various organisms ranging from bacteria to viruses to flies to plants to humans.

Identity design for a product to simulate a variety of existing network models as well as create, analyze and simulate their own
Cell Collective video

The Visual Design

The color palette is based on the key personality traits of the brand. The ideas of engagement, sharing, creation and enhancement are all essential to the make-up of the color palette. The palette needed to represent the product, having to do with health, but also speak to its use as a place for education about biological processes. As a result, the color scheme is vibrant, modern and approachable.

Cell Collective colors

A set of icons was included to illustrate the key features of the product: Integrate, Model, Simulate, and Analyze.

Cell Collective colors

THE MARK

The mark is based on the idea of an abstract molecular structure. The overall aesthetic is sleek, pleasing and easily identifiable. The mark is also playing on the notion of connection as well as a diagram—both ideas which will complement the research and education arms of the brand.

I first created about 10-15 quick mock-ups of the key themes. I narrow the strongest marks down to about 7 to mock-up in high-fidelity designs.

Cell Collective logo ideas Cell Collective

Full Lock-up

Modifications on the t and the i letterforms help to keep the type consistent and adds more rounded elements to give the mark an approachable and modern feel.

Cell Collective will be used for collaboration among scientists, so the logo should reflect the focus on engagement, sharing, enhancing, expanding and creating/growing models. Elements are simplified and energized to show movement.

logo Logo ideas

A second round of high-fidelity logo ideas was necessary to explore one direction of the design. The final logo is based off the main idea of the abstract molecular structure. The full lockup is set in their main azure blue plus a strong and legible type.

Logo final

THE PROTOTYPE

I initially created several versions of the prototype, with different visual styles, photos and icons. When reviewing the initial template ideas, we decided that they didn't reflect the core idea of the product and it wasn't entirely clear what the product does when you arrive at this page. Although we are assuming an informed audience, we wanted the page to have a clear message about Cell Collective's product offering.

We decided on a visual style that would appeal to their audience and would help educate users about the product. The landing page is designed to work across all devices and screen sizes.

web template ideas landing page