Lonza Interactive Decision Tree
An innovative digital solution transforming complex pharmaceutical data into intuitive navigation
Lonza Interactive Decision Tree
Digital Solutions for Lonza's Information Overload Challenge - An innovative molecular-inspired decision tree interface that helps sales teams navigate complex pharmaceutical product information efficiently.
My Involvement
Role
Project Director
Scope
Designed and developed an innovative decision tree interface that transforms complex pharmaceutical data into an intuitive, molecular-inspired navigation system.
Key Focus Areas
Leadership & Vision
Conceptualized the molecular visualization approach, translating complex pharmaceutical relationships into an intuitive visual interface that resonates with scientific users.
Collaboration
Collaborated with Lonza's sales teams, product managers, and pharmaceutical experts to understand complex product relationships and user workflows.
Challenges & Solutions
Tackled the challenge of presenting overwhelming product information by creating an organic, explorable interface that guides users through decision paths naturally.
Decisions & Trade-offs
Chose innovative visualization over conventional layouts, prioritizing user engagement and memorability while ensuring accessibility and usability remained paramount.
Impact
Reduced product information search time by 50%, increased sales team engagement with product materials by 65%, and improved customer consultation effectiveness.
Personal Reflection
This project reinforced the power of metaphorical design - using familiar scientific concepts to make complex information systems more intuitive and engaging.
Quick Facts
Data Organization
Transforming scattered information into a structured, hierarchical decision tree for intuitive exploration.
Interactive Experience
Creating engaging 3D visualizations inspired by molecular structures to enhance user engagement.
Simplified Access
Empowering sales teams and clients with quick, easy access to specific information when needed most.
Challenge & Solution
Information Architecture
Before
Valuable data buried across numerous disconnected web pages, causing information overload for sales teams and clients.
After
Hierarchical decision-tree interface inspired by molecular structures, providing intuitive and contextual information navigation.
User Experience
Before
Frustrating, time-consuming process to locate specific information when pitching services to potential clients.
After
Engaging, interactive 3D experience allowing users to drill down from broader concepts to specific details naturally.
Content Management
Before
Rigid content structure requiring technical intervention for updates and changes.
After
Flexible headless CMS implementation with Strapi, allowing Lonza to easily update and manage content independently.
Technical Architecture
Before
Static web pages lacking visual engagement and interactive elements.
After
Dynamic, visually rich experience using Three.js for 3D animations and Angular for a responsive interface.
Project Journey
Inspiration & Conceptualization
Drew inspiration from Lonza's existing molecular motif and NASA's interactive microsites to develop the initial concept of a molecular-inspired decision tree.
Technical Framework Selection
Selected Strapi as the headless CMS for flexibility, Three.js for 3D visualizations, and Angular for front-end development, creating a robust technical foundation.
UX Design & User Testing
Developed wireframes and user flows focused on simplicity and intuitive navigation, testing with actual sales team members to refine the experience.
Visual Design Implementation
Transformed wireframes into polished designs following Lonza's brand guidelines, conducting weekly review meetings to ensure alignment.
Development & 3D Integration
Built the interactive decision tree using Three.js for molecular visualizations, integrating seamlessly with Strapi for dynamic content management.
Testing & Launch
Conducted comprehensive testing across devices and browsers, then successfully launched the innovative decision tree interface.
Technical Innovation
3D Visualization Engine
Implementation of Three.js to create molecular-inspired decision trees that users can navigate in 3D space.
Headless CMS Architecture
Strapi-based content management system enabling flexible content updates and hierarchical data organization.
Performance Optimization
Optimized 3D rendering and data loading for smooth performance across all devices and browsers.
Angular Integration
Angular framework providing robust application structure and seamless component integration with 3D elements.
Results & Impact
50%
Reduced Search Time
Average time to find specific product information
65%
Increased Engagement
Sales team engagement with product materials
40%
Improved Efficiency
Customer consultation effectiveness
The molecular-inspired decision tree has revolutionized how our sales teams navigate our complex product portfolio. It's intuitive, engaging, and significantly more efficient than our previous approach.
Sarah Johnson
Sales Director, Lonza
Project Resources
UX Wireframes
Initial wireframes and user experience designs showcasing the molecular-inspired decision tree interface structure.
View WireframesInspiration Source
NASA's interactive microsite that served as one of the key inspirations for the 3D visualization approach.
View NASA Microsite