Unifying workflows with a consistent UI

Unifying workflows with a consistent UI

MetaSim was transitioning from a tool-centric platform to a unified, workflow-driven experience that connects data producers and consumers in a cohesive, end-to-end experience. The goal was to streamline navigation, support self-serve use cases, and improve overall usability.


I led the UI/UX redesign, developing a cohesive design system, redefining entry points, and aligning tool experiences under one consistent, scalable interface.

MetaSim was transitioning from a tool-centric platform to a unified, workflow-driven experience that connects data producers and consumers in a cohesive, end-to-end experience. The goal was to streamline navigation, support self-serve use cases, and improve overall usability.


I led the UI/UX redesign, developing a cohesive design system, redefining entry points, and aligning tool experiences under one consistent, scalable interface.

MetaSim was transitioning from a tool-centric platform to a unified, workflow-driven experience that connects data producers and consumers in a cohesive, end-to-end experience. The goal was to streamline navigation, support self-serve use cases, and improve overall usability.


I led the UI/UX redesign, developing a cohesive design system, redefining entry points, and aligning tool experiences under one consistent, scalable interface.

Company
Meta

Role
Product Design (IC5)

Year
2022–2024

MetaSim Platform

MetaSim Platform

Establishing scalable UX standards across MetaSim's developer suite.

Establishing scalable UX standards across MetaSim's developer suite.

Problem

Fragmented tools and broken workflows

A disjointed set of tools made it hard for internal users to simulate, inspect, and analyze test data. Each tool had its own UX conventions, which led to repetitive tasks, inconsistent patterns, and a steep learning curve.

🕵️

35%

of test debugging time spent locating the right tool / data stream

📉

22%

reported bugs that were misinterpretations of the UI

🧭

56%

user who relied on peer guidance or documentation to navigate

Approach

Creating the UX foundation in VRS Webplayer

Our team introduced a new simulation viewer (VRS Web Player) to test and validate the updated UI/UX direction.

Defined core interaction patterns

Unified layout and component structure

Designed around real usage flows

Mapped workflows to real user behavior, not tool structure

As a newly developed tool for MetaSim, the VRS Webplayer allowed us to get stakeholder buy-in on new features without disrupting existing workflows.

Solution

Internal framework adoption

Internal framework adoption

Internal framework adoption

The success of the VRS Web Player design led to the adoption of its UX patterns across the broader MetaSim platform.

Converted key internal tools to the new system

Reduced onboarding friction

Increased tooling clarity and performance

UI Highlights

Unified top nav for seamless tool switching

Clear visual hierarchy using type, spacing, and color

Compliance Dashboards grouped by standards (SOC2, GDPR, HIPAA)

Reusable component library aligned with Meta XDS tokens

The Pipelines Overview tool was redesigned to improve the visual hierarchy and improve scanability and content organization.

The Pipelines detail page was redesigned to support tabbed navigation giving users more flexibility in how they access data,

Stage Contents received a complete overhaul bringing it in-line with the other tools in the MetaSim suite.

Explore the Figma file to see how design decisions were made.

Implementation

Rebuilding the interface from the inside out

Rebuilding the interface from the inside out

Rebuilding the interface from the inside out

I collaborated closely with engineers, PMs, and research to roll out a design system and improve simulation workflows across the suite.

Design PrOcess

Wireframes

Wireframes

mIRO

mIRO

Design & Prototyping

Design & Prototyping

Figma

Figma

Coding Stack

Coding Stack

React

React

Three.JS

Three.JS

Code Repository

Code Repository

Phrabricator

Phrabricator

Wireframes

mIRO

Design & Prototyping

Figma

Coding Stack

React

Three.JS

Code Repository

Phrabricator

Results

Outcomes across the suite

Addressing user needs through intentional alerts and interactions and developing these within a scalable design system drove our success.

11%

faster workflow completion

💻

74%

of engineers preferred the new UX

📈

32%

improved PM-engineer collaboration

Takeaways

Lessons in systems thinking

Lessons in systems thinking

This project highlighted the importance of designing with engineers, not just for them—especially when building complex internal tools.
It also showed how unifying design decisions early on can have compounding benefits across a product suite.

What Worked

What worked

Creating a visual and interaction language grounded in real workflows

Starting small with one tool (VRS) before scaling to the rest of the platform

Building trust through frequent internal reviews and live demos

Collaborating closely with engineering on edge cases and performance constraints

What I'd Improve

What I'd improve

⚠️

Involve QA and hardware testing teams earlier to catch usability edge cases faster

⚠️

Document component usage more rigorously to better support future contributors

⚠️

Advocate for dedicated time to measure long-term impact and adoption metrics beyond launch

Get in touch

Let’s talk. Whether you’re building something new or improving what’s already working, I’d love to hear about it.

Sean Finn
Product Designer

All rights reserved.
©2025