BNSF (Contract) 2022-2025

Elizabeth Valdelamar
Mar 7
10 min read

Updated: 1 day ago

🎨 My Creative Journey at BNSF Railroad

I had the incredible opportunity to work with BNSF Railroad for 3 years, where I wore multiple creative hats and explored several facets of design and storytelling.

👩‍💻 Primary Role – UI/UX Designer

I led the design of user-friendly interfaces and helped modernize legacy platforms to improve the overall user experience. Working closely with developers and stakeholders, I brought clarity and usability to complex systems.

🎨 Graphic Designer

Alongside UX, I created visually engaging graphics that aligned with the brand and communicated effectively across internal and external audiences.

📸 Photographer & Camerawoman

I captured the energy and operations of BNSF through high-quality photos and videos—highlighting both culture and process with a strong narrative focus.

🎥 Multimedia Coordinator ("Puppet Master")

I managed multimedia projects end-to-end—ensuring that video, graphics, and storytelling elements came together smoothly for presentations, campaigns, and marketing materials.

🏗 Architectural Contributor

I even contributed to the structural and spatial design side of projects, helping align form with function—bridging design aesthetics and practical use.

🤝 Teamwork with the Experience Design (XD) Team

Collaborating with the talented XD Team, we tackled challenges, celebrated wins, and consistently delivered innovative solutions that elevated design across the organization.

💡 This journey not only sharpened my creative and technical skills but also deepened my passion for cross-disciplinary collaboration, storytelling, and user-centered design.

Design System - Gel - Material Library

UI/UX - Projects

MyShop
Material Catalogue
Train Schedule
Terminal Management
Customs (North/South US Border)
Customs>COC
Terminal Crew(Consultant)
Intermodal (Consultant)

Side Projects

Design System - Gel - Material Library

🧩 GEL Design System – Unifying BNSF’s Digital Experience

🖼️ Hero Image or Header Banner

Full-width image showcasing a snapshot of the GEL Design Library in Figma or a side-by-side of before/after UI components.

Overview

Tools: Figma, Bootstrap Material, React, Angular

The Challenge

Despite having a developer-focused GEL (Global Experience Language) component library, there was no shared, practical design resource for designers. The lack of a centralized design system led to inconsistent UI, duplicated work, and misalignment across teams.

Key Issues:

No “source of truth” for designers
Fragmented visual styles
Inefficient design-to-dev handoff

My Role & Strategy

I led the initiative to bridge design and development by transforming GEL into a full-fledged design system. I advocated for Figma as a shared platform and converted brand guidelines into ready-to-use components.

Key Actions:

Organized cross-functional workshops
Built a unified Figma library with badges, pills, alerts, buttons, etc.
Mapped brand colors and typography directly into reusable styles

Collaboration Workflow

🔄 Weekly Design Syncs	🔧 Dev Collaboration Meetings
Reviewed new components	Showcased design changes
Aligned on visual standards	Clarified dev needs/ETAs
Solved design questions together	Ensured smoother handoffs

The Solution: Figma GEL Library

The result was a living, cloud-based design system aligned with both branding and developer guidelines—used consistently by 6+ designers across multiple TSS 2.0 projects.

🟧 Key Features:

Brand-aligned color tokens (badges, pills, alerts)
Responsive components following Material principles
Scalable structure for new features and apps
Easy design-to-dev translation

📸 Component Gallery (Insert images here)

Badge Styles & Use Cases
Button Variants with States
Typography Scale
Color System Applied Across Apps
Figma Library Sample with Layers/Organization

Impact

✅ Unified UI across apps✅ Improved team efficiency✅ Consistent user experience✅ Better alignment between design and development✅ Quicker turnaround from concept to implementation

Below are examples from the original BNSF GEL Guidelines Library, which primarily catered to developers 👨‍💻 with a limited set of components and technical documentation. Using these foundational guidelines, I translated the system into a robust, shareable Figma design library 🎨—ensuring consistency and accessibility for both designers 👩‍🎨 and developers across projects. - please view images below.

🧩 Building a Scalable UX Design Library

From foundational elements to variable components, the BNSF Design Library was developed as a living, evolving system—designed to support both product design and internal team needs.

Using the official GEL (Global Experience Language) Guidelines and BNSF’s approved branding, I built a centralized Figma library that ensured consistency across applications and deliverables—including wireframes, prototypes, and XD team presentation slides.

To enhance flexibility and accessibility, I implemented Figma Variables and Tokens to enable both Light and Dark Modes, allowing teams to preview and adapt designs across different themes with ease.

As the library matured, it grew collaboratively with input from fellow designers, who contributed new components based on evolving user needs. These contributions were reviewed, refined, and incorporated into the shared Figma library—promoting consistency across teams while supporting customization where needed.

To ensure transparency and adoption, we communicated library updates and new additions regularly through team meetings and emails, fostering alignment and shared ownership across the design team.

By 2025, the system was on track for a modernization update—aligning with the latest Bootstrap framework and full Angular/React support, ensuring scalability and seamless integration with development pipelines.

📁 Visual Preview

Below are a few examples showing how each section of the Figma library was organized—dedicated pages for foundational styles, UI components, themes, and reusable tokens—empowering cross-functional teams to design and build with consistency and speed.

BNSF Railroad – Modernizing Legacy Systems

TSS: Customs & Chain of Custody

Trackathon (Hackathon) 2022-2024

Graphic Design

📋 Project Notes & Collaboration

The screenshot below captures detailed notes from collaborative meetings with the Product Owner (PO) and development team. These notes play a critical role in aligning project goals with stakeholder expectations.

During each session, we carefully analyzed:

✅ Existing features within the current framework
🔧 Functionalities that needed to be built from scratch
🎯 Stakeholder priorities and user needs

This ongoing evaluation helped us create a clear roadmap—one that balanced available resources with new development efforts. By thoroughly documenting these conversations, we ensured alignment across teams, identified potential challenges early, and uncovered opportunities to enhance the user experience while meeting business objectives.

MyShop

📘 SAP Internal Tutorial Application

Tools Used: Axure RP, SAP Design Guidelines

Type: Internal Use Only

This project was an internal tutorial application designed using SAP base material and prototyped in Axure RP. Its purpose was to guide users through the proper use of a specific SAP-based tool. I was brought in to enhance the existing prototype by adding a new wireframe and page, as well as fixing broken navigation links to ensure a smoother and more intuitive user experience. My updates helped improve the tutorial's clarity and usability for internal users.

{Images}

Material Catalogue

📦 Customer Ordering & Inventory Search Prototype

Tool Used: Axure RP

Design Framework: Salesforce Lightning Design System

For this project, I designed a prototype from scratch using Salesforce material guidelines in Axure RP. The goal was to create a user interface that allowed customers to search for and order materials stored in BNSF warehouses. Since no existing application had been built and minimal information was provided by the Product Owner, I had to rely on UX best practices, stakeholder discussions, and iterative exploration to shape the user flow and interface structure. The result was a functional, intuitive prototype that laid the foundation for future development.

{Images}

Train Schedule

Application Used: Axure & Figma

{description}

{Images}

Live web based Application

Axure

Figma

Terminal Management

Application Used: Axure & Figma

{description}

150-+ PLUS Screens = Terminal Management

Who are the Users?

-The Customer Care Respresentive / Terminal Manager / Screen Not role Based

-Everyone will have read access / anyone who has a cces to TSS 2.0

{image}

Figma

{image}

Customs

Application Used: Axure & Figma

{description}

{Images}

Axure

{image}

Figma

{image}

Customs>Chain of Custody

Application Used: Axure & Figma {description}

{Images}

Axure

{image}

Figma

{image}

HiWide (Consultant)

Running on Old Version: Angular 5

Current Avaiable version: Angular 12

Live Application:

PO reach other to add mpre functionalty to this application that was runnning on a old version of agular, The application was not updating any code just adding more functionality and eaier use, as well as adding more screens from Green Screens, at this time we had a new designer in our team, i was put to the task to train and help designer to learn Gel Libraries , BNSF appoved colors and having to work around Agular 5, Consulting and overseeing the designer

Application Used:Figma

{description}

{Images}

Axure

{image}

Figma

{image}

🚦 Terminal Crew View (Lead & Consultant)

Old Version: Current HiWide Site |

Technologies Used: Angular 5, Figma

This project, involving both internal and external components, faced a significant challenge due to the limited information available. The primary resource was the green screen interface, which provided raw data but lacked the context necessary for a clear understanding of the project’s scope and requirements.

To bridge this gap, we took a two-pronged approach:

Internal Analysis: We began by analyzing the fragmented data from the green screens, carefully extracting key insights and organizing them into a coherent narrative. This process helped define the project's objectives and progress.
External Insights: Recognizing the importance of firsthand knowledge, we gathered qualitative data from field workers actively engaged with the system. Through interviews and surveys, we collected their perspectives, challenges, and suggestions. This feedback provided crucial context that was missing from the internal data.

By combining insights from both internal data and external feedback, we were able to create a more complete picture of the project’s needs. This collaborative approach not only informed our decision-making but also fostered stronger alignment between the different teams, ultimately driving the project forward with greater clarity and efficiency.