Bioscience Website Redesign — Daniel Wainright

Context

01

An enterprise rebuild. Multiple voices. One experience to ship.

The Bioscience website redesign was a large-scale enterprise project involving an external creative agency, multiple internal business units, and an external development team. Each brought a different lens: the agency brought brand vision, the business brought stakeholder priorities, and development brought technical constraints.

My role was to sit between them — translating agency creative direction into implementable interaction patterns, anchoring decisions in user need, and ensuring that what was designed in presentations would actually hold up through build.

Problem

02

Strong visual direction. Incomplete interaction system.

"The design system provided strong visual direction, but was primarily structured around brand expression rather than digital interaction."

As a result, key interaction patterns, states, and behavioral guidelines were not fully defined, requiring additional UX interpretation during implementation. This made it difficult to rely solely on predefined components, requiring decisions to be grounded in established interaction patterns.

Agency design drops highlighting missing interaction patterns and behavioral definition

Agency design drops provided strong visual direction, but left interaction behavior, state management, and edge cases undefined.

Interaction gaps: Agency comps defined appearance at rest. Navigation states, filter interactions, form flows, and responsive behavior were unspecified.
Fragmentation across design drops: Successive agency deliveries introduced inconsistencies — components evolving without a shared interaction baseline.
Alignment across three functions: Business, agency, and development each operated from different versions of the brief with no shared UX decision record.
Scope pressure: As visual elaboration grew, implementation complexity increased — without a corresponding conversation about feasibility or user benefit.
Handoff ambiguity: Without interaction specifications, developers were making UX decisions in code — difficult to reverse late in the cycle.

My Role

03

UX as the connective layer

This engagement was less about originating designs and more about ensuring design quality survived the distance between agency intent and development execution. The highest-value contribution was interpretation, specification, and alignment — not competing with the agency's creative direction, but completing it.

Audited agency comps for interaction gaps before they reached development
Produced annotated wireframes, interaction specifications, and component behavior documentation
Facilitated cross-team alignment sessions — translating across business, agency, and development vocabularies
Introduced user research findings to ground stakeholder conversations in evidence
Defined responsive behavior, edge cases, and error states left unresolved by the visual system

Approach

04

Translating System → Experience

Bridging the gap between visual direction and usable interaction

The core challenge was that a beautifully crafted visual system doesn't automatically become a usable digital experience. The agency's work was strong — but it had been built to communicate brand, not to specify behavior. Translating it into something buildable required a structured interpretation layer across every major component and template.

Alignment Model — UX as Translation Layer

Input

Business

Goals, priorities, stakeholder constraints

Translation layer

UX

Interpretation, specification, alignment

Creative

Agency

Visual direction, brand system, layout

Build

Development

Technical execution, component build

Output

Experience

Coherent, usable digital product

UX role Keeping experience decisions coherent across every translation step

Each arrow represents a translation step requiring explicit documentation and cross-team sign-off. UX sat at the center — not as a gatekeeper, but as the function responsible for coherence.

Clarifying Interaction Behavior

From static comps to specified behavior

For each major component, I worked through the interaction states the agency comps left open. This wasn't a critique of the agency's work — it was a recognition that static visual design and interaction specification are different disciplines. The output was a layer of behavioral documentation that gave development the clarity they needed to build accurately.

Agency Direction

Visual system & static comps

At-rest states defined across breakpoints

Strong typographic and color system

Layout grid and spacing established

Interaction behavior not specified

Component variants and edge cases absent

UX Interpretation

Behavioral spec & annotation

Hover, focus, active, disabled states defined

Navigation behavior and transition logic specified

Responsive reflow behavior documented

Form validation and error handling designed

Edge cases resolved before development began

Agency direction (left) defined the visual system. UX interpretation (right) translated it into behavioral specifications development could build from.

Navigation evolution from shallow L1–L2 structure to scalable L3–L4 UX system

Agency navigation defined surface-level structure (L1–L2), requiring UX to extend the system into a scalable, consistent hierarchy supporting deeper taxonomy and interaction patterns.

Where the visual system provided no guidance, decisions were anchored in established interaction patterns — familiar, tested, and defensible. This wasn't a compromise of the visual design; it was the work that made it buildable.

Aligning Across Teams

Reducing ambiguity before it reached build

The highest-risk moment in an agency-led project is the handoff from design to development. Without explicit documentation, developers interpret intent — and those interpretations are expensive to reverse. I introduced structured practices to close this gap at every handoff point.

From Design Intent to Build Clarity

01 Agency Comp

→

02 UX Annotation

→

03 Decision Log

→

04 Development Spec

→

05 QA Validation

Each step reduced interpretation risk by turning visual intent into documented behavior, decisions, and acceptance criteria.

Interaction specifications and decision records created a shared interpretation layer between agency design and development execution.

Component annotation: Every reusable component was documented with interaction states, spacing rules, and content constraints before entering development
Decision logging: Cross-team decisions were recorded in a shared document — preventing the same alignment conversation from recurring
Feasibility review: Agency comps were assessed against development constraints before client presentation, reducing late-stage redesigns
Pattern anchoring: Where system guidance was absent, decisions were grounded in known interaction patterns and documented with rationale

Key Decisions

05

Where UX judgment mattered most

Prioritized usability over strict visual fidelity when needed

Where the visual system created interaction problems, those were surfaced and resolved before build — not silently implemented or quietly ignored.
Standardized interaction patterns across templates

Successive design drops had introduced inconsistencies. Rationalizing interaction behavior across templates — even where the visual treatment varied — created a more coherent user experience.
Clarified implementation behavior early to reduce rework

Introducing interaction specification upstream — before build, not during — meant development teams had what they needed at handoff, not after the first round of QA.
Anchored decisions in known UX patterns when system guidance was incomplete

Rather than inventing solutions where the design system was silent, I drew from established interaction patterns — keeping the experience predictable and defensible across stakeholder reviews.

What Changed

06

System-level outcomes

The clearest measure of success in an alignment-focused engagement isn't visual — it's operational. The outcomes reflected a project that moved from fragmented intent to coherent execution.

Design → Development

Reduced ambiguity at handoff. Developers had behavioral specifications before they started building, not after the first round of questions.

Interaction consistency

More consistent interaction patterns across the experience — despite variation in visual treatment across templates and design drops.

Stakeholder alignment

Business, agency, and development operating from a shared understanding of UX decisions — with documented rationale, not tribal knowledge.

Implementation readiness

UX direction that was implementation-ready at the point of handoff — reducing the gap between what was designed and what was built.

Prioritization clarity

Explicit, documented decisions about scope, sequencing, and trade-offs — reducing the ambiguity that typically accumulates in multi-stakeholder delivery environments.

Outcome

07

A more coherent experience, built more efficiently

The redesign launched on schedule with significantly fewer late-stage design revisions than comparable enterprise projects. The structured interpretation layer reduced ambiguity at handoff, and the cross-team alignment practices kept all functions moving from the same understanding throughout build.

The most significant outcome was less visible than a launch metric: the gap between what was intended and what was built was smaller than it would otherwise have been. In enterprise projects with multiple competing voices, that gap is where experience quality is lost.

Reflection

08

"Enterprise UX is often less about designing new interfaces and more about ensuring that what is designed can actually be understood, implemented, and used effectively."

The Bioscience redesign reinforced a principle I rely on in complex enterprise environments: the most important UX work often happens before a single pixel is placed. Defining what's meant, documenting what's been decided, and ensuring everyone is working from the same understanding — these aren't administrative tasks. They are design work.

In agency-led projects, the internal UX lead's job is to protect the experience from the distance between intention and execution. That requires different skills than product UX — more translation, more facilitation, more documentation. But the outcome it protects is the same: an experience that works for the people using it.

Bioscience WebsiteRedesign