Designing a Visual Product Discovery Experience
ROLE
Lead UX Designer / Researcher
INDUSTRY
Life Sciences / Medical Equipment
DELIVERABLES
Research, Sketches, Wireframes, Hi-Fi, Prototype
DURATION
4 Months
TOOLS
Figma, Userlytics, Drupal, Miro
Designing a Visual Product Discovery Experience
Researchers often evaluate laboratory equipment based on the quality of the tissue stains it produces—but traditional product browsing makes it difficult to evaluate those outcomes before purchasing.
I helped design a visual stain gallery that connected real tissue-stain examples with the products and equipment used to create them, giving researchers a more intuitive way to discover and evaluate potential solutions.
01 / THE OPPORTUNITY
The Opportunity
Researchers need to understand more than the specifications of laboratory equipment, they need confidence in the quality of the results that equipment can produce.
The opportunity was to create a more visual way to explore tissue stains while connecting those results directly to the products and equipment researchers could use to reproduce them.
How might we help researchers discover laboratory products through the results they are trying to achieve?
02 / UNDERSTANDING HOW RESEARCHERS CHOOSE
Understanding How Researchers Choose
To understand how researchers evaluate laboratory equipment, I conducted interviews with 12 medical and life science professionals about their purchasing behaviors, priorities, and decision-making process.
The research revealed that stain quality played an important role in product evaluation. Researchers wanted to see the results equipment could produce—not just read about its technical specifications.
This insight became the foundation for the Stain Gallery.
RESEARCH INSIGHT
Researchers weren't only evaluating the equipment. They were evaluating the outcome it could produce.
03 / DEFINING THE USER
Defining the User
The research helped clarify the needs of our primary user: a laboratory professional responsible for evaluating products and equipment that could directly impact the quality of their work.
For these users, technical specifications alone weren't enough. They needed a way to visually assess potential results, compare outcomes, and understand which products could help them achieve the stain quality they were looking for.
PRIMARY NEED
See the result before committing to the product.
04 / TRANSLATING RESEARCH INTO A GALLERY CONCEPT
Translating Research into a Gallery Concept
The research pointed toward a different way to approach product discovery: start with the visual outcome instead of the equipment.
I translated this insight into the concept for a Stain Gallery—a browsable collection of stain examples that would allow researchers to explore results visually and then connect those results back to the products and equipment used to produce them.
CORE EXPERIENCE PRINCIPLE
Outcome first. Product second.
05 / EXPLORING THE EXPERIENCE
Exploring the Experience
With the gallery concept defined, I began exploring how researchers could browse stain examples, evaluate individual results, and connect those results back to relevant products.
Early concepts focused on creating a visual-first browsing experience while keeping the information researchers needed to evaluate each stain easily accessible.
DESIGN PRIORITIES
01 — Lead with imagery
Make stain results the primary focus of the experience.
02 — Support exploration
Allow researchers to quickly browse and compare examples.
03 — Provide context
Surface the information needed to understand each stain result.
04 — Connect results to products
Create a clear path from visual inspiration to relevant equipment.
06 / FROM EXPLORATION TO STRUCTURE
From Exploration to Structure
I translated the early concepts into wireframes to define the gallery's hierarchy, navigation, and relationship between stain examples and product information.
The experience was structured around a simple progression: browse visually, explore a result in more detail, then connect that result to relevant products and equipment.
KEY DESIGN DECISIONS
01 — Visual-first browsing
Use stain imagery as the primary entry point.
02 — Scannable gallery structure
Create a consistent grid that makes exploring examples easy.
03 — Progressive detail
Keep browsing lightweight while providing deeper information when a stain is selected.
04 — Connect discovery to commerce
Give users a clear path from a stain result to relevant products
07 / DESIGNING THE GALLERY
Designing the Gallery 🔬✨
With the experience structure established, I translated the wireframes into a polished visual gallery designed to make stain results the focal point of product discovery.
The final experience balances high-quality stain imagery with the contextual information researchers need to evaluate results, while creating a clear connection between each stain and the products or equipment associated with it.
FINAL DESIGN PRINCIPLES
01 — Let the results lead
Stain imagery remains the visual focus.
02 — Make exploration effortless
A consistent gallery structure supports quick browsing.
03 — Reveal detail progressively
Researchers can explore additional information without overwhelming the initial browsing experience.
04 — Connect inspiration to action
Relevant products provide a natural next step after evaluating a result.
08 / INTEGRATING THE EXPERIENCE
Integrating the Experience
The Stain Gallery was designed as more than a standalone source of inspiration. It created a new entry point into the broader product experience by connecting the results researchers wanted to achieve with the products and equipment that could help produce them.
This allowed visual exploration to naturally transition into product discovery, creating a more connected path between research and purchase consideration.
EXPERIENCE ROLE
Turn visual inspiration into an actionable product-discovery path.
09 / FROM PROTOTYPE TO PRODUCTION
From Prototype to Production
The final designs and prototype brought the Stain Gallery concept together into a cohesive experience that could be translated into development.
By connecting research insights, visual exploration, stain information, and related products within a single experience, the project established a new way for researchers to discover products based on the outcomes they wanted to achieve.
MY CONTRIBUTION
Research → Concept Development → UX Design → Wireframes → High-Fidelity UI → Prototyping
🔬 GOAL
Find equipment capable of producing the desired stain result.
👁️ NEEDS
Visual examples of real results
Easy comparison between stains
Connection between results and products
⚠️ CHALLENGE
Technical specifications don't fully communicate what the final result will look like.
🎯 DESIGN IMPLICATION
Make the stain result the starting point of product discovery.
