BNSF Railway Web Experience Redesign

A full redesign of BNSF Railway's corporate web experience, covering information architecture, design system, and visual hierarchy for a large-scale enterprise site.

The goal was to create a scalable, consistent experience across multiple page types, from section landing pages to knowledge articles and news & media pages.

My rol

UX/UI Designer

Tools

Figma

Type

Web Enterprise

Cargando prototipo...

Explore the Figma file directly: wireframes, design system, high-fidelity screens, and the annotations behind each UX decision.

A user who knows nothing about trains

BNSF Railway needed more than a visual redesign. The website had to support radically different user profiles: the corporate customer managing international container shipments, the agricultural shipper moving freight by railcar, and the first-time user who had never shipped by train and didn’t know where to begin.

By aligning content, navigation, and interaction patterns across the platform, the redesign created a more intuitive journey while maintaining the flexibility required to serve multiple audiences with distinct goals and levels of industry knowledge.

Look the website

My areas of work

Arquitectura UX

Wireframes → Hi-fi

Sistema de diseño

Hero sections

Componentes reutilizables

BNSF Railway needed a redesign of its corporate web pages, spanning development landing pages, knowledge articles, and news & media sections. The core challenge was establishing a cohesive design system that worked across multiple page types with reusable components, responsive behavior, and a clear visual hierarchy throughout.

Design Process: From Architecture to Final UI

De la arquitectura
al diseño final

Design Process: From Architecture to Final UI

Discovery

Requirements analysis, review of existing content, and identification of recurring page types and components.

Arquitectura

Definición del mapa del sitio, jerarquía de contenido y modelos de datos para artículos, carruseles y heroes.

Wireframes

Bocetos y wireframes de baja fidelidad en Figma para las páginas clave: Development Landing, Knowledge Article, News & Media.

UI de alta fidelidad

Aplicación del sistema de diseño: tipografía, espaciado, tokens de color, grid responsivo y componentes definitivos.

Architecture

Definition of the site map, content hierarchy, and data models for articles, carousels, and hero sections.

Wireframes

Low-fidelity sketches and wireframes in Figma for key pages:Development Landing, Knowledge Article, and News & Media.

High-Fidelity UI

Application of the design system: typography, spacing, color tokens, responsive grid, and final components.

Iteration

Incorporation of stakeholder feedback (Clayton), adjustment of the hero overlay effect, and visual refinement.

Iteración

Incorporación de feedback de stakeholders, ajuste del efecto de superposición del hero y refinamiento visual.

Wireframes & estructura

Structure first, aesthetics later

Before building the final designs, detailed wireframes were developed in Figma to establish element layout, information hierarchy, and interaction patterns for each page template. Working alongside teammates through Page Flow Suggestions, we kicked off the component wireframing process collaboratively.

Structure first, aesthetics later

User Flow

You can view the UX comments, annotations, and detailed structure of each screen directly in the Figma file linked above.

Design challenge

Guided Shipping Flow

One of the most complex systems in the project was the design of the shipping quote modal flow.

The challenge: guide a new user with no technical rail knowledge through three questions that determine which type of service they need, using conditional logic that adapts the flow based on product type and destination.

Q1 — What

The user types their product or selects a category. A conditional engine determines whether the product can travel via intermodal route. If so, an extra question appears: is it already containerized?

Q2 — Where

Depending on the route (domestic, import, or export), the fields change: for export, origin and destination fields are swapped. All fields use predictive autocomplete by ZIP code or city.

Q3 — Conditional

The final question varies by route: on the Intermodal route, users prioritize criteria (cost, speed, sustainability). On the Carload route, users indicate whether the origin/destination is already connected to the rail network.

Q1 — What

El usuario describe su carga escribiendo o eligiendo una categoría. Un motor condicional evalúa si el producto puede moverse en contenedor. Si aplica, aparece una pregunta adicional: ¿ya está cargado en un contenedor? Si no aplica, esa pregunta desaparece y el flujo avanza sin fricción.

Q2 — Where

El destino define los campos. Para envíos domésticos, el usuario ingresa origen y destino con autocomplete predictivo por ciudad o ZIP. Para importación o exportación internacional, los campos se adaptan: aparece un selector de puerto marítimo y, en exportación, origen y destino se invierten lógicamente. El usuario no nota el cambio técnico — solo ve los campos que necesita.

Q3 — Conditional

Aquí las dos rutas divergen por completo. En la ruta Intermodal, el usuario calibra sus prioridades — costo, velocidad, sustentabilidad, consistencia en tiempos — para que los resultados reflejen lo que realmente importa. En la ruta Carload, la pregunta es operativa: ¿tu origen o destino ya está conectado a la red ferroviaria? La respuesta determina qué tan directa puede ser la solución.

Additional Pages & Sections

The project extended beyond the quote request flow. Below are some of the other key pages included in the redesign, each with its own structure, purpose, and audience, yet all connected through the same design system and visual hierarchy principles.

New to Rail Page

The "New to Rail" page introduces first-time users to the world of rail transportation through educational content, visual guides, and informational resources. Its structure is designed to explain key concepts, benefits, and processes in a clear and accessible way — helping users understand how BNSF's rail solutions work and how to get started.

Talk To a Consultant Page

The "Talk To a Consultant" page is designed to connect users with BNSF specialists quickly and seamlessly. Its structure prioritizes conversion through clear forms, contact information, and content that helps customers find personalized logistics solutions tailored to their transportation and business needs.

Conclusions

1

Defining typography, spacing, and color tokens from the start made it possible to scale the design across multiple pages without losing consistency or redoing work.