Intro | Investigate

BioQuest (Danio-Data) is producing software Company for health field researcher laboratories (based in Zebra-fish and mice). Danio Data, or D2 software, was produced and developed, 7 years ago.

Challenges | Goals

Old software was working only for tablets, and provided, customers confusing services, to by not respecting the user experience principles, was not friendly, and very limited to help users to do their tasks (in those search laboratories users are different persons with different tasks ).

Competitor Analysis

Performing an audit/review of competing websites and apps; conducting user testing of competing sites; writing a report that summarises the competitive landscape.

What is D2 App

Relational model app, specifically designed for the zebrafish research lab

Researchers document, access and use their stock, stain and experimentation data.
Facility biologists and staff manage their breeding programs and daily husbandry tasks.
Facility managers track and manage lab access, tank rentals, record keeping and reporting.

Project tasks

To create intensive communication with users, to redesign a multi-dimensional software where users share information with each -other, and to get informed about the staff result in every moment, to create greater opportunities for communication and experimentation.
To develop a single underlying system that allows for a unified experience across platforms and device sizes.

About D2

Design Concept
D2 is designed to display a large amount of densely organized information in a manageable way. Users are invited to identify patterns in the data presented, by cross-referencing and investigating information.

A premium style
The dark blue UI gives D2 a premium feel, while also allowing its bright accent colors that represent data to stand out against the background. The high contrast between data and the background color make it easy to read its graphs and charts.

Data-driven aesthetic
D2 UI focuses on viewing, investigating, and understanding data. Infographics laid out in a dashboard invite the user to view a summary of their activities. The UI is dense and direct, with an emphasis on typography, color, and shape.

laptop Sam HomePage

Product architecture

Information Architecture

D2 information architecture has a hierarchical structure, allowing users to look at their searhes and saves data through a variety of categories.


Logo, Global Search, Clear Top Menu, Clear Messages, About US Section, Why Bioquest Section(3 Main Qualities), Staff Section, News and Events section, Footer (add links)

Rail navigation

On desktop and tablet, D2 uses rail navigation. Rail navigation provides a permanent region to navigate between sections, while taking up little screen space.

Tab selection

Unselected tabs are represented by icons. When a tab is selected, it displays a section title adjacent to the icon. Tabs make navigation persistently available while taking up as little space as possible.


Grid System

D2 uses a responsive grid system, which has flexible columns and padding that can resize to accommodate any screen width.


D2 expresses elevation differences between UI elements using color or a scrim.


Sometimes D2 needs to show multiple infographics on a single screen, each with multiple sections. To do this, D2 has adopted a color theme with one primary color, and five additional colors. This elaborate color theme allows D2 to present readable, distinct infographics.

Typography | Typefaces

D2 uses two typefaces: Roboto and Roboto Condensed.


D2 uses custom iconography to represent to its four main sections: Logo, Global Search, Clear Top Menu, Clear Messages, About US Section, Why Bioquest Section(3 Main Qualities), Staff Section, News and Events section, Footer (add links).

Surface edges

Material surfaces use shadows to indicate edges. Other methods can be used to indicate edges, such as: Giving surfaces different colors, Giving surfaces different opacities.


D2 has a simple and reserved motion style to help balance the visual density of the UI.

Components Design

D2 UI Components

Usage, Anatomy, Behavior, Specs and Implementation for:
Forms : Autocomplete, Checkbox, Contact Form, Date and Time Picker, File Input, Multiselect, Radio Button, Search, Select, Slider, Switch, Validation
Components : Alerts, Buttons, Cards, Dropdown and Select, Tooltips, Collapse, Modals, Charts .
Navigation: Compositions, Bredcrumbs, Footer, Hamburger Menu, Scroll Spy, Side Nav.

Data tables

Data tables can include: A corresponding visualization, Navigation, Tools to query and manipulate data.


Cards contain content and actions about a single subject. Contained A card is identifiable as a single, contained unit. Independent A card can stand alone, without relying on surrounding elements for context. Individual A card cannot merge with another card, or divide into multiple cards.

Test & Iterate