Figma
Mural
2023
Bridging Usability and Detail: Elevating UX for Scientific Ecommerce
Duration
5 months
My Role
Associate UX Designer
Team
Associate UX Director, Senior UX Designer, UX Lead
Project Overview
As part of a three-person UX design team, I worked on a comprehensive redesign of a website for one of the world's largest healthcare manufacturing organizations. Specifically, updating their Bioscience division to reflect the main website's updated branding and improve key user flows. The website serves a highly specialized audience of scientists and pharmaceutical professionals, so our focus was on making dense, technical content more accessible while streamlining the experience across desktop and mobile.
The Challenge
This company’s users aren’t your typical e-commerce shoppers. They require detailed product specifications, downloadable documentation, and the ability to search by exact catalog numbers. The challenge was to present all this data in a way that was organized, easy to scan, and aligned with modern usability standards, all without overwhelming the user.
My Role
I collaborated closely with a Senior UX Designer, and together we owned the entire design process from strategy to high-fidelity mockups. I also stepped into a lead role during client meetings when the Senior Designer was unavailable, presenting progress and gathering feedback. I worked primarily in Figma for design and Mural for collaborative mapping and presentation. Approved designs were organized into a shared client-facing Figma folder for easy access and version control.
Design Process
We met weekly with stakeholders to review designs, gather feedback, and align priorities. I led client calls when the Senior UX Designer was unavailable and ensured all final designs were organized in a shared Figma folder for easy access and review.
We also incorporated feedback from employees and internal experts who use the site regularly, which helped validate design decisions and shape user priorities.
Drop Schedule
We divided the work into six “drops,” each covering a specific section of the site. Each drop followed a 3–4 week cycle that included wireframing, stakeholder reviews, design iterations, and hi-fidelity mockups.
1
2
3
4
5
6
Drop 1: Product List Page
The product card needed to show a large amount of information at a glance: image, title, description, catalog number, price, quantity selector, compare and favorite buttons, and an add-to-cart option.
Drop 2: Product Detail Page
We structured the PDP using tabbed sections to include product details, documentation, catalog-specific views, and related products. We emphasized quick access to technical documents and spec sheets, which were a top priority for users.
Drop 3: Cart & Checkout
We streamlined the add-to-cart and checkout process, ensuring that even with complex products and varying quantities, the experience remained intuitive on both desktop and mobile.
Drop 4: Self Service & My Account
Focused on giving users more control: order history, saved documents, favorite products, and reordering tools — all tailored to power users working in labs or research facilities.
Drop 5: Navigation, Homepage, & Search
With a vast catalog and multiple product categories, we designed a navigation system that balanced our client’s internal hierarchy with clear, intuitive paths for users. We also aligned our work with the overarching structure of their parent company’s site.
Drop 6: Email Notifications, Articles, & Favorites
We designed lightweight interfaces for personalized site content, enabling users to save and return to research articles, products, and documentation with ease.
Minimized Compare List on PLP
Compare Page
Drop 4 Phases
Previous Design
Wireframe
HI-fidelity design for cart
Reflection
Challenges and Solutions
High content density: We used modular layouts and progressive disclosure to avoid overwhelming users while still surfacing key data.
Balancing usability with user expectations: Sometimes our design instincts conflicted with client preferences. But by listening to how their users actually worked, we learned to adapt our approach to meet their specific needs.
Complex navigation: With so many categories and documentation types, we worked to make navigation intuitive and easily searchable across devices.
Key Takeaways
Effective UX for specialized audiences is built on empathy, strategic information architecture, and close collaboration with client stakeholders.
💡
Designing for specialists requires deep empathy and flexibility.
💡
Even the most complex information can be made user-friendly with the right structure.
💡
Client insight is invaluable. They often know their users better than anyone.