Analytics Hub is an internal supply chain application that gives leadership visibility into procurement and contract data. It needed a redesign to improve data visualization and filtering, and to be rebuilt using a design system I created for another product, Volt Design System. Because Analytics Hub would eventually integrate with other products already using the Volt Design system, building it with that system meant the two would feel cohesive and reduced design and development work.

The redesign had two constraints: colors and patterns had to adhere to the design system, and I couldn’t make major changes to the application’s existing layout or structure.

Note: All data shown is fictional for confidentiality.

I audited the existing application and redesigned it, improving the data visualization and clarity. I used as much of the design system’s existing component library as possible and built a product-specific component library for anything it didn’t cover. I conducted stakeholder interviews to inform the redesign, and worked alongside a PM on scope and business case and a developer on implementation.

The portfolio overview screen used colors randomly without meaning, which caused more confusion. I made all the colors the same to give every stat the same level of hierarchy. The icons didn’t represent the sections they belonged to, so I revised them to better represent their corresponding stats. The layout wasn’t built for the static number of cards displayed, so I restructured it into an even 4×4 grid. Some stat labels lacked clarity, so I rewrote them to be more clear.

The Expiration Risk Distribution graph used heavily saturated colors that clashed with the rest of the product’s colors and had no consistent theming, so I rebuilt it using the design system’s palette, and to suit the meaning of the data. Tables were squished horizontally, so I expanded them to full width. I combined the burn rate tables and added filters for the different types of burn rates and the ability to change the amount of results shown per table to condense the data shown at once. Labels like Spend Rolling 12M and Days Until 0 were unclear, so I rewrote them for clarity. Icons didn’t correspond to their card content, so I updated them to match.

The previous filter UI presented two full rows of dropdowns competing for attention before the user ever saw the data, so I moved filtering into a drawer that stays out of the way until needed, giving users faster time to insight. I added a count badge on the Filters button and removable pills showing active filters, so users can see and adjust what’s applied without reopening the drawer. When the removable pills extended past the width of one row, arrows appeared to navigate back and forth through a carousel of all the active filters.

The progress bars associated with the suppliers used different colors with no underlying meaning, which led users to assume the colors were significant when they weren’t, so I standardized color across all. I also introduced badges to visually group and separate different types of data.

Business sector cards used different colors with no meaning behind them, so I standardized color across all of them. Owners without a clear group were bucketed under a generic “N/A,” even though all of them belonged to Procurement, so I renamed the group to Procurement and assigned the unassigned owners into proper categories and removed the unassigned category.

The first and second widgets had layouts that didn’t fit their content well, so I restructured both to better suit what they display. The table also relied on a single color throughout, making it hard to distinguish data or assess it at a glance. I added color to contract status for quicker understanding, and to remaining values so users could immediately tell whether a value was available or depleted.