Chevron icon pointing left.
Back to home
Home
Roche
Chevron icon pointing down.

Roche

Web Portal
I led UX design for Roche’s biosample directory, creating an information architecture and prototype that reduced search
time, increased confidence, and encouraged greater use of in-house samples. Through workshops, card sorting, and
usability testing with scientists, I restructured navigation and filtering around scientific concepts, clarified metadata, and
connected discovery to request and fulfilment. The solution gave Roche a validated concept and a prioritised backlog,
helping them reduce costs and accelerate research productivity.
I led UX design for Roche’s biosample
directory, creating an information
architecture and prototype that
reduced search time, increased
confidence, and encouraged greater
use of in-house samples. Through
workshops, card sorting, and usability
testing with scientists, I restructured
navigation and filtering around
scientific concepts, clarified metadata,
and connected discovery to request
and fulfilment. The solution gave Roche
a validated concept and a prioritised
backlog, helping them reduce costs
and accelerate research productivity.

My role

UX Designer

Team

Project Manager
Visual Designer

Timeline

4 weeks

Year

2020
2021

Project name

Biosample Directory Platform

Constraints

  • Highly specialised scientific domain.
  • Fragmented data sources.
  • Limited time with SMEs.
  • Need to support both broad search and complex filtering.
  • Design a solution that could scale across organisations.

Overview

Problem

Scientists were spending too much time searching for biosamples across repositories, often overlooking in-house resources and purchasing externally instead. This not only slowed research but also increased costs. Roche wanted a user experience that streamlined discovery, aligned with scientists’ mental models, and encouraged better use of internal assets before considering external ones.

Challenge

  • Create an information architecture that reflected how scientists categorise and search for biosamples.
  • Reduce time-to-discovery and improve confidence in results.
  • Increase use of in-house samples, lowering unnecessary external procurement.
  • Provide a validated prototype to inform scope, backlog, and development.

Solution

  • A search and filtering experience grounded in scientists’ domain language and workflows.
  • Responsive wireframes and prototypes that connected discovery, request, and approval in a single flow.
  • Clear metadata presentation for faster assessment of sample relevance and availability.
  • Prioritised features that balanced usability with technical feasibility, shaping the MVP backlog.

Results

  • Delivered a validated concept that demonstrated feasibility and user desirability.
  • Scientists reported reduced ambiguity in search and stronger confidence in results during testing.
  • The platform positioned Roche to increase internal sample usage, reduce costs, and save scientists’ time.
  • The design team provided a clear artefact for development, accelerating decision-making and scope definition.
Three screens from the web portal designed for Roche, formatted for a mobile viewport.

Research

Activities

  • Stakeholder workshops to map business needs (cost savings, asset recovery, efficiency gains).
  • Usability testing and interviews with supply-chain customers to capture pain points and expectations.
  • Audit of design artefacts vs production code to surface inconsistencies and technical debt.
  • Competitive review of asset tracking and IoT dashboards.

Insights

  • Search must be flexible but guided, with filters that map directly to scientific concepts.
  • Scientists valued clarity of metadata (origin, condition, viability) more than UI aesthetics.
  • Workflow integration (request → approval → fulfilment) was just as critical as discovery.
  • Information overload risk: too many filters without hierarchy slowed progress.

What to track post-launch

  • Search success rate and task completion time.
  • Percentage increase in use of in-house vs external samples.
  • Scientist satisfaction (usability/NPS for the platform).
  • Reduction in redundant or duplicate requests.

Process

1. Discover

  • Stakeholder interviews.
  • Workshop sessions.
  • Review of current repositories.

2. Define

  • Mapped user journeys.
  • Prioritised functionality.
  • Established information architecture hypotheses.

3. Design

  • Wireframes and responsive prototypes covering search, filtering, request flows, and dashboards.

4. Validate

  • Card sorting, walkthroughs, and usability sessions with scientists.

5. Deliver

  • Prototype.
  • Information architecture.
  • Design rationale.
  • Prioritisation recommendations for MVP vs later releases.
Two screens from the web portal designed for Roche.

Key decisions

Information architecture anchored in scientist workflows

Design navigation and filters around sample type, condition, and source, mirroring scientific categorisation. This aligned with mental models and reduced friction in search.

Guided filtering and progressive disclosure

Prioritise common filters upfront, defer advanced parameters into expandable controls. This prevented overwhelming new users while preserving depth for advanced searches.

Metadata clarity and trust

Surface provenance, condition, and availability clearly in results; use consistent visual language for sample states. This built trust and reduced wasted time requesting unusable samples.

Request flow integration

Connect discovery to request, approval, and fulfilment within the same platform. This reduced drop-off and ensuresd continuity of workflow.

Prototyping to support scope

Produce responsive prototypes to visualise user journeys end-to-end. This gave stakeholders concrete artefacts to discuss scope, feasibility, and priorities.
Two screens from the web portal designed for Roche.

Risks and how they were managed

  • Domain complexity. Mitigated through frequent SME input and card-sorting exercises.
  • Feature creep. Kept scope tight by prioritising high-value filters and flows for MVP.
  • Information overload. Designed with progressive disclosure, allowing depth without clutter.
Up Next

Brambles

Web Portal
I designed a web portal that integrates
with Bluetooth Low Energy (BLE) devices
on CHEP pallets, providing customers
with data-driven visibility into the
condition and location of their items
throughout the supply chain.
View case study
An arrow pointing right.
A wooden pallet.

Get in touch

© Andrew Pierce. All Rights Reserved.