Bio-Techne: A UX-Centered Redesign
About Bio-Techne
Bio-Techne specializes in the development and sales of tools and services for scientific research and clinical diagnostics. With over 30 acquired companies operating under its umbrella, Bio-Techne faced the challenge of unifying its digital presence.
Role
Lead UX Engineer
UX research, Stakeholder collaboration, Design and prototyping, A/B testing, Market Analysis
December 2019 - Ongoing
Project Challenge
The goal was to create a centralized platform—"One Web"—that seamlessly integrated all brands while preserving their trust and identity. This required addressing critical UX questions, such as:
- How to ensure a consistent experience across diverse brands.
- How to create a cart system that catered to both individual users and large organizations.
- How to preserve the familiarity and trust of Bio-Techne’s existing customers while attracting new ones.
Objective
The primary objective of "One Web" was to provide a unified platform for Bio-Techne’s diverse product offerings. Previously, customers had to navigate multiple brand-specific websites to complete an experiment. The challenge was to integrate these offerings into one cohesive platform while maintaining the distinct identity and trust of each brand.
UX Research and Market Analysis
Our UX research began by analyzing Bio-Techne’s existing brands and their competitors. However, the unique challenges of Bio-Techne’s portfolio made direct competitor comparisons difficult. Instead, we drew inspiration from e-commerce giants like Amazon and Best Buy, focusing on strategies for presenting products from multiple brands under one platform.
Key findings from research included:
- User pain points: Customers were frustrated by fragmented shopping experiences across multiple sites.
- Cart behavior: Scientists often needed a system that allowed them to build a cart and share it with procurement teams.
- Navigation needs: Users prioritized intuitive ways to find products that worked together seamlessly.
Wireframing: Building the Foundation
Wireframing for "One Web" focused on developing intuitive flows and addressing user pain points. Key features included:
- Shared Cart System: A cart designed for both personal use and institutional workflows, allowing scientists to build and share product lists with procurement teams.
- Experiment Builders: Tools to help users combine compatible products for specific experiments.
- Detailed Filters: Advanced search and filtering options to help users quickly locate products across the 500,000+ catalog.
Each wireframe underwent rigorous reviews with stakeholders to ensure alignment with user and business needs.
Prototyping: Visualizing the Experience
Prototyping provided stakeholders and users with a clear vision of the final site. High-fidelity prototypes incorporated:
- Design Consistency: The primary blue from legacy brands was retained, complemented by monochromatic hues in subheaders and footers for a modern, unified look. Strict rules for color usage ensured consistency across templates.
- Complex Data Presentation: Templates showcased the most intricate data to ensure scalability and functionality.
- User Testing: Prototypes were subjected to multiple rounds of user testing, refining usability and ensuring alignment with user expectations.
Development: Frameworks and Flexibility
After evaluating various frameworks, we chose Bootstrap 4 for its flexibility, lightweight performance, and extensive documentation. This decision ensured future developers and contractors could seamlessly contribute to the project.
Key technologies included:
- Drupal CMS (upgraded from Drupal 7 to 9): Selected for its robust security features and scalability.
- Third-party integrations: Tools like Bloomreach and Akamai enhanced e-commerce and search functionality.
Deployment and Iterative Testing
The initial deployment of the site included a stripped-down version with a homepage, product overview pages, datasheets, and a cart system. This phased approach allowed for focused UX testing and gradual integration of additional site elements. User feedback from these tests was instrumental in refining features and improving usability.
Results and Impact
Although still in its early stages, the "One Web" project has already yielded significant results:
- Increased Conversions: The centralized platform led to a noticeable increase in cart sizes and conversion rates.
- Double-Digit Growth: Despite launching mid-pandemic, Bio-Techne reported double-digit growth across all product lines.
- Positive Feedback: Customers and executives alike praised the streamlined user experience and modernized design.
Conclusion
The "One Web" project exemplifies how user-centered design and thorough UX research can transform complex business challenges into seamless, scalable digital solutions. By prioritizing user needs and leveraging industry best practices, we created a platform that not only met Bio-Techne’s business objectives but also enhanced the overall customer experience.