Beacon Pro
Product
Design system
Enterprise SaaS
Overview
Beacon Pro is Stackline's AI-powered forecasting platform, part of the retail intelligence suite that powers brands like Apple, Nike, Dyson, and Unilever. I led the end-to-end UI redesign of its legacy interface, rebuilding dense, dated dashboards into clean, decision-ready views. To get there, I also built the design team's first component-driven design system, a single source of truth that brought consistency across the product and sped up how quickly we could design and ship.
Challenge
How do you make a world-class analytics product feel effortless when its best insights are buried under complexity?
Outcome
The redesign turned an overwhelming dashboard into a calm, decision-ready product, replacing cluttered legacy screens with a consistent visual system that makes 500M+ SKUs scannable at a glance. It helped drive forecasts up to 120% more accurate than Amazon's projections and 128% more accurate than brands' internal numbers. And the design system our team built cut design time by more than half, shortening feature delivery from weeks to days.
Role
Led end-to-end product redesign, plus the design team's first component-driven design system.
Team
Timeline
6-month sprint (launch: 10/23)
Tools
Figma (& Adobe XD migration)
TL;DR
Turned a dense legacy dashboard into a calm, decision-ready product.
Beacon Pro helps major brands forecast what to sell, stock, and spend. I led the redesign of its dense legacy interface and built the team's first component-driven design system, making complex retail data simple to act on.
Key insights
64%
Forecasting accuracy vs traditional history-only methods, up to +128% over internal brand forecasts
-50%
First design system cut design effort in half; feature deliveries went from weeks to days
<1%
All client's live Beacon Pro forecasts landed within 1% of their own forecasting numbers
Context
What is Stackline?
A retail-intelligence and e-commerce platform powering Fortune 500 brands. Stackline unifies data from various retailers such as Amazon, Walmart, and Target into a single operational view.
consumer brands
top brands
countries
SKUs
What is Beacon Pro?
An AI-forecasting and scenario planning layer built on top of the "basic" Beacon product: "full-funnel forecasting" for brands selling on Amazon and beyond.
SKU-level projections across sales, marketing & operations
optimization + pre-flight content analytics
The challenge
A progressive, component-first build
Beacon's insights were world-class, but the legacy UI overwhelmed the very people who needed to act on them, and its patterns no longer matched Stackline's newer products.
Complex data density: Content wasn't digestible. Screens were cluttered and outdated; navigation confused users and insights were buried under complexity.
Workflow fragmentation: Newer products (Shopper OS) set a minimal, beautiful bar. Legacy Beacon still looked dated and disconnected from the suit.
Doesn't scale: Little in-product guidance or education. Wordy, brittle workflows that weren't re-centered around the user's actual jobs.
Who it hurt and why it mattered
64%
Brand leaders lacked forecasting confidence
4-6 hrs
Lost weekly per analyst consolidating data
$50K+
Annual productivity cost per individual user
Research & findings
Who was I designing for?
End Users
Buyers
CMOs / VPs E-commerce / Retail Strategy directors
Ideal fit
$50M-$5B CPG / health / durables brands
What the research surfaced
Loved
Granular insight into keyword, pricing, and competitive benchmarking
Loved
KPIs at a glance: fast custom segments to place a brand in its market
Friction
Steep learning curve on deeper analytics features
Friction
Limited UI flexibility; little in-product help, users had to contact support
Design process
From brand audit to launch assets, the work became a system of decisions.
Design system
We built the team's first design system
The team was migrating from Adobe XD to Figma, and we used that shift as the opening to champion a component-driven design system, one that could align product, design, and engineering around a single source of truth instead of reinventing the wheel on every screen.
I championed this. Our legacy products (Atlas and Beacon) still carried an outdated, cluttered UI while the company had already moved toward a minimal, beautiful design standard with Shopper OS. We were a small team constantly firefighting and short on time. It would have been easy to keep following one-off stakeholder requests. But I was convinced that Stackline had reached the point of product maturity where waiting another year to systematize would be too late. I wanted a plan that delivered instant results while optimizing the resources we did have.
How it was structured
I deliberately avoided locking us into Material UI and developer-oriented patterns that didn't match our users' expectations. Instead, we adopted a pragmatic version of atomic design: foundations → components → patterns → templates, skipping the endless atom/molecule debate I'd seen stall teams before. We designed from component to page, never the reverse, and included a transition sub-library for the hybrid components that would need to coexist with the old UI during the migration.
This ran as a progressive build: design and engineering constructed the component system in parallel while still maintaining support for the live product. Constraints guided our core decisions. Copy inventory lived in Jira; brand guidelines lived in Adobe InDesign so the whole company could reference them.
A glimpse into the system
A look at a few foundations and components from the larger design system. The full system lives in Figma, with production-ready components documented in Storybook for the engineering team.
What the system unlocked
Design time cut by more than 50%. My time shifted from re-inventing the wheel to finding problems and designing the best solutions.
Feature deliver went from weeks to days. Updates across multiple screens via auto-layout and components made the single biggest difference.
Less time redlining and combing through files as a team.
A positive, measurable impact on engineering, and a noticeably more cohesive product line.
More than the metrics, this was a milestone in the team's maturity: our first shared source of truth, and proof that systematic thinking was possible even for a small team under constant pressure.
The redesign
Built for scanning
A consistent KPI card system makes dense data easy to scan and compare.
Color with purpose
A neutral UI reserves color for directional changes and product imagery.
Persistent context
Navigation, time controls, and filters remain consistent as users explore.
At a glance
Products are benchmarked by traffic and conversion to surface where attention is needed.
Color = strategy
Each quadrant maps performance to an action: leverage, invest, upgrade, or rationalize.
Built to scale
Hundreds of products remain legible, with filters enabling deeper category and subcategory analysis.
Overview before detail
Summary visuals answer "How are we doing?" before users dive into a deeper analysis.
Comparison built in
Current and prior-year data appear together, making changes and trends immediately visible.
One visual grammar
Shared KPIs, charts, filters, and tables create familiarity across sections (Traffic, Sales, Prices, etc).
Wall of love
What people said
Reflection
Simplifying complexity is a design skill. Building our first design system reinforced that good design isn't about adding structure, but about removing friction. It challenged me to create consistency while making Beacon both easier to navigate and scale.
Clarity matters more than volume. Designing for more than 500M SKUs taught me that even the largest datasets can feel approachable through thoughtful hierarchy and intentional interaction design.
Context gives data meaning. Information alone rarely drives decisions. The right framing (through comparisons, hierarchy, and storytelling) helps users quickly understand what matters and confidently take action.
Design is most impactful when it's aligned with strategy. Partnering closely with our CEO and VP of Product, strengthened my ability to connect design decisions to business goals, product vision, and long-term platform growth.
More projects
Visual identity
Art direction
B2B SaaS
Visual identity
Messaging
Strategy