Back To Projects

Bioinformatics Platform

Navigation

Re-evaluating and redesigning the navigation for a growing bioinformatics platform.

Role

Graphic and Product Designer

Timeline

1 month

PLATFORM

Web

UI/UX Design

Navigation

Iconography

Site Layout

text

Bioinformatics Platform

Navigation

Re-evaluating and redesigning the navigation for a growing bioinformatics platform.

Role

Graphic and Product Designer

Timeline

1 month

PLATFORM

Web

UI/UX Design

Navigation

Iconography

Site Layout

text

Bioinformatics Platform

Navigation

Re-evaluating and redesigning the navigation for a growing bioinformatics platform.

Role

Graphic and Product Designer

Timeline

1 month

UI/UX Design

Navigation

Iconography

Site Layout

text

The Problem

As this bioinformatics analysis platform grew with newly added features, the navigation structure needed revising so users could more directly access them.

Scientists and researchers are losing out on accurate insights due to difficulties with GeoMx spatial analysis softwares.

Increasing Navigation Density

The left-hand nav got crowded with the new features, and users were unable to quickly find specific tools or workflows.

Inconsistent Visual Language

The current icon library had been sourced from multiple places and lacked a unified style. The symbols chosen did not follow the recommended material design sizes.

Ambiguous Meanings

Many features, such as proteomics and genome browser, didn't have straightforward visual metaphors, leading to user confusion or reliance on labels.

Scalability Challenges

Iconography that held up at multiple sizes was important while also communicating the scientific nature of the features.

The Problem

As this bioinformatics analysis platform grew with newly added features, the navigation structure needed revising so users could more directly access them.

Scientists and researchers are losing out on accurate insights due to difficulties with GeoMx spatial analysis softwares.

Increasing Navigation Density

The left-hand nav got crowded with the new features, and users were unable to quickly find specific tools or workflows.

Inconsistent Visual Language

The current icon library had been sourced from multiple places and lacked a unified style. The symbols chosen did not follow the recommended material design sizes.

Ambiguous Meanings

Many features, such as proteomics and genome browser, didn't have straightforward visual metaphors, leading to user confusion or reliance on labels.

Scalability Challenges

Iconography that held up at multiple sizes was important while also communicating the scientific nature of the features.

The Problem

As this bioinformatics analysis platform grew with newly added features, the navigation structure needed revising so users could more directly access them.

Scientists and researchers are losing out on accurate insights due to difficulties with GeoMx spatial analysis softwares.

Increasing Navigation Density

The left-hand nav got crowded with the new features, and users were unable to quickly find specific tools or workflows.

Inconsistent Visual Language

The current icon library had been sourced from multiple places and lacked a unified style. The symbols chosen did not follow the recommended material design sizes.

Ambiguous Meanings

Many features, such as proteomics and genome browser, didn't have straightforward visual metaphors, leading to user confusion or reliance on labels.

Scalability Challenges

Iconography that held up at multiple sizes was important while also communicating the scientific nature of the features.

Section Title

Collaborated with head engineers to produce an icon library and set up the architecture of the platform according to user needs.

Material-Inspired Icon System

I used a consistent grid, proportion, and corner radius system aligned with Material Design principles to establish a strong visual foundation.

Domain-Informed Visual Metaphors

For each feature, I researched relevant scientific processes and existing visuals to come up with metaphors that were recognizable yet simplified.

Improved Navigation Hierarchy

Redesigned icons support faster visual differentiation between pages, helping users parse between dashboards, analysis tools, and admin sections.

New Page Grouping

Categorized new pages and organized them under their own menus according to user feedback on where they expect to locate the features.

Section Title

Collaborated with head engineers to produce an icon library and set up the architecture of the platform according to user needs.

Material-Inspired Icon System

I used a consistent grid, proportion, and corner radius system aligned with Material Design principles to establish a strong visual foundation.

Domain-Informed Visual Metaphors

For each feature, I researched relevant scientific processes and existing visuals to come up with metaphors that were recognizable yet simplified.

Improved Navigation Hierarchy

Redesigned icons support faster visual differentiation between pages, helping users parse between dashboards, analysis tools, and admin sections.

New Page Grouping

Categorized new pages and organized them under their own menus according to user feedback on where they expect to locate the features.

Section Title

Collaborated with head engineers to produce an icon library and set up the architecture of the platform according to user needs.

Material-Inspired Icon System

I used a consistent grid, proportion, and corner radius system aligned with Material Design principles to establish a strong visual foundation.

Domain-Informed Visual Metaphors

For each feature, I researched relevant scientific processes and existing visuals to come up with metaphors that were recognizable yet simplified.

Improved Navigation Hierarchy

Redesigned icons support faster visual differentiation between pages, helping users parse between dashboards, analysis tools, and admin sections.

New Page Grouping

Categorized new pages and organized them under their own menus according to user feedback on where they expect to locate the features.

Initial Sketches

1

I explored multiple metaphor directions including scientific instruments (microscopes, test tubes), analytical tools (magnifiers, graphs), and common administrative materials (folders, boxes, monitors).

Small Thumbnails for Rapid Ideation

2

These quick sketches helped identify which ideas were too literal, too complex, or visually noisy at a small scale. Once I had several ideas jotted down, the next step was to begin digitization.

Material Design Icon Guides

1

I utilized Material’s 24×24 grid system and 2dp stroke guidelines as a template. This grid ensured consistent rhythm and alignment in the icon designs.

First Iterations

1

The early digital icons experimented with outline strokes and high-detail metaphors. Testing showed that some icons were too intricate when scaled down. Feedback also showed that the outline style didn't hold enough weight to be satisfying.

Second Iteration

2

I emphasized geometric simplicity with filled shapes. Many icons I simplified, instead focusing on creating distinct sillhouettes between symbols. Metaphors that were found to be too complex or too literal were also changed at this stage.

Second Iteration

2

I emphasized geometric simplicity with filled shapes. Icons that relied on scientific accuracy were simplified to maintain recognizability. This second version relied in creating distinct sillhouettes between symbols.

Unified Custom Iconography

1

The final icon set provides a consistent visual system for navigating a bioinformatics platform. Geometric forms and a consistent style represent features such as dashboards, genome sequencing tools, proteomics modules, and admin pages. Scientific concepts are simplified into distinct symbols that remain legible at small sizes.

Navigation in Context

2

Together, the icons act as quick visual anchors, guiding users through a dense ecosystem of data and analysis tools and improving overall wayfinding within the platform.

NEXT PROJECT

NEXT PROJECT

Looking for design help?
Let's talk

Book A chat

Currently booking engagements through May

/aimartih

aitana@aitanamh.com

aitanamh.bio

Looking for design help?
Let's talk

Book A chat

Currently booking engagements through May

/aimartih

aitana@aitanamh.com

aitanamh.bio

Looking for design help?
Let's talk

Book A chat

Currently booking engagements through May

/aimartih

aitana@aitanamh.com

aitanamh.bio