DashboardTailwind CSSMongoDBoAuth, JWT

FujiFilm Diosynth

A Data intensive Dashboard for FujiFilm Biotech Laboratories. A multi-tiered and interactive web app redesigned.

Background
FujiFilm Diosynth - Laboratory Dashboard
Client

FujiFilm Diosynth

Role

Product Lead (Front-end & Design)

Team

Emran Hossain (Product Lead) CTO Engineering Lead Lab Operations Team

Tools

React, GSAP, Atomic Design (Organisms & Templates), PWA features

Problem

Navigating a Rigid & Fragmented BioTech Landscape

"The initial state was a 'mess of interconnected tasks' where data points were haphazardly linked without hierarchy. Scientists and Lab Admins struggled with non-linear information flows and 'tasks within tasks' that made discovering the next logical step a cognitive burden."

Solution

Atomic Scalability & Thick Data Strategy

Leveraged 'Thick Data' (qualitative user insights) to shape a personal, intuitive UX. Implemented an Atomic Design System specifically focusing on reusable Organisms and Templates to handle multi-tiered roles (Admin, Scientist, QC, Super Admin). Established a logical data tree to eliminate nested task confusion. Design system with atomic approach, Primarily focusing on building reusable components using the atomic design approach. Doubling down on Organisms and Templates mostly. It was important for Fujifilm to operate while being mobile, So responsiveness, saved sessions, cached data was very much important throughout the process.

01

Dynamic Role-Based UI: Tailored dashboards for Admin, Scientist, QC, and Viewers.

02

Atomic Organisms: Reusable, complex UI patterns that maintain consistency across workflows.

03

Data-Driven Hierarchy: Logical mapping of 'interconnected data' to simplify nested tasks.

04

Lab Mobility: PWA-like performance with saved sessions and cached data for on-the-go ops.

05

Thick Data UX: Qualitative insights used to make high-tech tools feel 'fun to use'.

Solution 0
Solution 1
Solution 2
Solution 3
Solution 4
The Resulting Transformation

100%

Transformed wireframe chaos into a comprehensive, high-performance dashboard. The final product turned a biotech 'mess' into a system where everything finally 'makes sense', resulting in high user satisfaction and improved operational speed.

100%

You Dream It, I Code it

Contact

Got a question, how or project Idea? I’D love to hear from you and discuss further!
imagine, I build imagine, I build imagine, I build imagine, I build