← All case studies / Jonathan Wadsworth

Accessibility & Prototyping

Innov8 PSA Forecast

This one I built for myself, from a Figma export and a spreadsheet, to see whether I could take an accessible enterprise interface all the way to working code. Five screens, real ARIA, verified with automated keyboard tests.

Role
UX/UI Designer
Origin
Coca-Cola Consolidated (CONA Platform)
Type
Self-Directed Prototype Rebuild
Innov8 PSA Forecast interface

See it runningThis is a working prototype you can click through, not a static mockup.

Open the live prototype →

The Challenge

Coca-Cola Consolidated's existing forecasting tools were all built around one assumption: the product already had a sales history to forecast from. Innov8 items, brand-new products still moving through market introduction, broke that assumption completely. There was no dedicated tool for forecasting a Pre-Sell Allocation (PSA) for something that had never sold a single case yet, so the work happened in a one-off spreadsheet, rebuilt from scratch by a business analyst for every new item, with no consistent structure, no saved history, and no path from an initial estimate to a final, submittable number.

My starting point was one of those working spreadsheets, handed to me by the business analyst who had been building the calculation logic by hand: source plant delivery history weighted into a PSA mix percentage, then split out by superchannel and by VPO (managed-by / owned-by relationships). The job was to take that logic, which had never been designed as an interface, and turn it into something a planner could actually use.

The Approach

I designed the application in Figma as a full five-screen workflow: a landing dashboard summarizing every forecast type tied to the new item (PSA, PMC, FFA, final, operational, deployment, and production), a filter panel for narrowing the working data set by bus segment, superchannel, PPG, and ownership, a PSA by Superchannel entry screen with editable load-in and replenishment values, a PSA Forecast by VPO screen breaking the same numbers out by managed-by relationship (Walmart, Kroger's various divisions, Safeway, and more), and a final NAOU Import screen that rolls delivered history up by source plant into the annual PSA figure used to generate the launch file.

To make sure the design actually held up as a working product and not just a set of static screens, I rebuilt the full flow as a functional HTML prototype, wiring up the tab navigation between all five screens, the filter drawer, and the editable tables so the whole PSA-to-import sequence can be clicked through end to end.

The Outcome

The result is an end-to-end interface for a forecasting problem that had no dedicated tool before it: a single application that carries a new product from its first PSA estimate, through the superchannel and VPO breakdowns, to the finalized numbers that feed the NAOU import file, replacing what had been an improvised, rebuilt-every-time spreadsheet exercise for each new item.

Accessibility

This project marked a shift in how I approach accessibility. On the Digital Brand Guide, my WCAG work was about setting rules for other people to follow, defining where a color could and couldn't be used. Here, since I was writing the code myself, I could hold myself to the same standard directly instead of just specifying it.

The first pass at the tab navigation used plain clickable divs, which meant the entire screen-switching mechanism was invisible to keyboard and screen reader users: no way to tab to it, no announced role, no indication of which screen was selected. I rebuilt it as a proper WAI-ARIA tabs pattern: real buttons with role="tab" and aria-selected , a roving tabindex so keyboard focus lands directly on the active tab, and arrow-key navigation between screens instead of relying on the mouse. I also caught and fixed a filter control with no accessible label, and audited the color palette against WCAG AA contrast requirements to confirm it held up.

Selected screens

The full five-screen flow, from the landing dashboard through to the final import file.