June 22, 2024

|

Web Design

UX

UI

8 min read

Visualizing Smarter Data

Reworking SureCost UI to display better data.

6 Weeks

1 Designer

1 Product Manager

1 Senior Developer

1 QA Engineer

SureCost is the smarter way for pharmacies to cut costs, stay compliant, and take full control of their purchasing power.


When I joined, SureCost had no dedicated UI designer. As the company positioned itself for rapid growth, I was brought in to elevate the product’s interface—translating its complex workflows into a modern, scalable design system that could support both current users and long-term expansion.

The Problem

To support its next phase of growth, the company set its sights on a scalable, market-ready platform with a stronger, more cohesive user experience.

www.surecost.com

www.surecost.com

www.surecost.com

www.surecost.com

The Solution

A modular, intuitive design system focused on delivering a seamless experience and scalable growth.

Constraints

Preserve Existing Workflows - SureCost wasn’t ready for new flows; the goal was to “paint the walls,” improving the UI without overhauling functionality.

Surface Jobs to Be Done - We prioritized quick access to commonly used tasks to streamline user interactions and improve task efficiency.

Visualize Data Clearly - With vast amounts of underutilized data, we focused on surfacing insights in ways that felt interactive and actionable.

Build for Scale - The new design system needed to be configurable and scalable, laying the visual and structural groundwork for the future of SureCost.

How I Solved It

Purchase Manager & Inventory Manager were the outcome of a highly collaborative project. Working closely with development and product, as well as the CEO & CPO, I developed a robust design system that would house all the new elements within Purchase and Inventory Manager.

Design System

I designed a modular system that wasn’t just about visuals. It created a shared language between design and development. This system reduced inconsistencies, sped up implementation, and ultimately helped the entire team move faster while building a scalable UI that could grow with the company.

Inventory Manager

Purchase Manager

Purchase Manager

The Smarter Purchasing Solution

Real-time purchasing data, interactive elements, and prioritized work.

Visualized Purchasing

Powered with real-time data that you can include or exclude.

Order Alerts

Real-time, actionable alerts help users prioritize work.

Order Modal

Reduce cognitive load to create a configurable order.

Toggle Data Sets

View dollar purchases and quantity of orders placed in one click.

Purchase Manager

The Smarter Purchasing Solution

Real-time purchasing data, interactive elements, and prioritized work.

Visualized Purchasing Data

Powered with real-time data that you can include or exclude.

Order Alerts

Real-time, actionable alerts help users prioritize work.

Order Modal

Reduce cognitive load to create a configurable order.

Toggle Data Sets

View dollar purchases and quantity of orders placed in one click.

Inventory Manager

Purchase Manager

Purchase Manager

The Smarter Purchasing Solution

Real-time purchasing data, interactive elements, and prioritized work.

Visualized Purchasing

Powered with real-time data that you can include or exclude.

Order Alerts

Real-time, actionable alerts help users prioritize work.

Order Modal

Reduce cognitive load to create a configurable order.

Toggle Data Sets

View dollar purchases and quantity of orders placed in one click.

Inventory Manager

Optimizing Inventory Levels

Confirm inventory, manage inventory valuation, and import dispensing data.

Confirm Inventory Items

View daily cycle counts and target goals to keep inventory accurate.

Import Dispense Data

Manually import data from your Pharmacy Management System.

Manage Inventory Valuation

Evaluate your inventory valuation over time to make corrections and changes.

Inventory Manager

Optimizing Inventory Levels

Confirm inventory, manage inventory valuation, and import dispensing data.

Confirm Inventory Items

View daily cycle counts and target goals to keep inventory accurate.

Import Dispense Data

Manually import data from your Pharmacy Management System.

Manage Inventory Valuation

Evaluate your inventory valuation over time to make corrections and changes.

Challenges

With development already in motion, Leadership voiced a strong preference for a single, page-wide date filter over the existing per-widget model. While this simplified the Corporation-level experience, it introduced friction on lower-level pages where users relied on real-time, actionable data. I proposed splitting the experience—implementing a global filter on Corporation pages while preserving local filters where needed. Leadership aligned with the compromise, and the Corporation page was retrofitted with a unified date dropdown.

Impact

Outcomes

The redesigned UI sparked excitement internally, with leadership and teams praising the improvements. The CEO and Director of Product were particularly impressed, noting the impact of the design on SureCost’s growth potential.

“...the most transformative project for SureCost in the next 12 months.” - David Wagner, CEO

“This is the first reveal I've attended as a product manager where the reception was ‘Wow, just a couple of tweaks.’” - Dickinson Merrin, Director of Product

Additionally we saw excellent gains, business-wise.

150%

Increase in ARR

310

New pharmacies added

200%

Capacity increase due to Design System

$297M

Total customer savings

Retrospective

After launch, users responded positively to the cleaner, modern interface. Some requested more customization options, which I added to the backlog for future iterations. Feedback around oversized components led to quick refinements to improve responsiveness, ensuring the UI worked seamlessly across devices.

Purchase Manager and Inventory Manager have launched in SureCost as of February, 2024

Related links