Recpak

Project Framing

Recpak provides a specification tool for packaging professionals—people who configure, price, and order custom packaging at volume. The existing interface had grown organically over several years, accumulating features without a corresponding evolution in the underlying UX architecture. The result was a tool that power users had learned to navigate through muscle memory, but new users found impenetrable.

Our engagement covered UX audit, information architecture restructuring, interface redesign, and component system development. The goal was not a visual refresh but a structural rethink that could accommodate the tool's genuine complexity without hiding it behind oversimplified interfaces.

Challenge and Design Context

Specification tools occupy an awkward position in UX design. They need to expose hundreds of configuration options, dependencies between those options, and real-time pricing calculations, all while guiding users through a logical sequence. The temptation is to stuff everything into a single view with tabs and accordions, but that approach creates interfaces where the user can see everything and understand nothing.

The other challenge was the dependency chain. In packaging specification, many options are conditional—the available closure types depend on the container format, which depends on the material grade, which affects the structural dimensions. A change at step two can invalidate selections at step five. The interface needed to handle cascading changes gracefully without making the user feel like they had lost control.

The user base spans from experienced specifiers who configure dozens of packages per week to occasional users who might touch the tool once a quarter. Any redesign had to accelerate the power users without bewildering the infrequent ones.

Structure and Layout Decisions

We replaced the previous tabbed single-page layout with a stepped workflow model. Each stage of the specification process gets its own focused view: material selection, structural dimensions, closure and finishing, quantity and pricing, and review. A persistent progress indicator shows where the user is in the sequence and allows direct navigation to any completed step.

Each step view uses a two-column layout on desktop. The left column presents the active configuration options for that step. The right column shows a live summary that updates as the user makes selections, giving immediate feedback on how their choices affect the overall specification and estimated cost.

On mobile, this collapses to a single column with the summary accessible via a persistent bottom bar that expands on tap. The bar shows the running cost estimate and the current step count, giving the user essential context without consuming screen real estate.

The review step presents the complete specification in a clean, printable format. This doubles as the quotation document—users can export it as a PDF or share it via a unique URL. Making the review step genuinely useful as a document, rather than just a confirmation screen, reduced the need for a separate quotation workflow.

Typography and Visual Language

The visual language had to convey precision and reliability. We used a clean sans-serif with strong tabular figure support as the primary typeface, paired with a monospace face for specification values and technical identifiers. The type scale is relatively compressed—this is a tool, not an editorial experience, and space needs to be allocated to configuration controls rather than generous headlines.

Colour is functional rather than decorative. A neutral grey base palette keeps the chrome out of the way. The primary interactive colour is a restrained blue used for active selections, progress indicators, and primary actions. Warning states use a warm amber, and validation errors use a muted red. Each colour has exactly one job, and we documented the complete colour assignment system so that future feature additions would maintain consistency.

Data visualisation within the tool uses simple inline indicators rather than chart components. Relative cost differences between options show as small horizontal bars next to each choice. Structural dimension illustrations use SVG line drawings that update in real time as the user adjusts measurements.

Interaction and Implementation Notes

The front-end architecture treats each specification step as an independent module that receives configuration context from a shared state manager. This modular approach means that individual steps can be updated or replaced without affecting the rest of the workflow, which was a maintenance priority given that packaging standards and available options change regularly.

The dependency resolution system runs client-side, using a rule engine that evaluates which options are available based on current selections. When a user makes a change that invalidates downstream choices, the interface highlights the affected steps in the progress bar and presents a clear explanation of what changed and why. This transparency was critical—users need to trust that the tool is not arbitrarily overriding their decisions.

Form validation is progressive. Rather than validating on submit, each field validates on blur, and step-level validation runs before navigation to the next step. Error messages are specific and actionable: not just what is wrong but what the user can do about it.

The live pricing engine required careful optimisation to avoid perceptible lag during recalculation. We debounce dimension input fields so that pricing updates trigger after the user stops typing rather than on every keystroke, and we use optimistic UI patterns so that the summary column updates immediately with the projected cost while the confirmed calculation runs in the background.

Lessons and Observations

Recpak demonstrated that the most impactful UX improvements in complex tools often come from structural reorganisation rather than visual redesign. The visual refresh was noticeable, but the measurable improvement in task completion rates and error reduction came from the sequential workflow and the dependency transparency—structural decisions that required deep engagement with the domain logic.

The project also reminded us that power users and new users are not always best served by the same interface. We introduced a compact mode that collapses explanatory text and expands configuration density for experienced users who do not need guidance. This was a toggle rather than a separate interface, which kept maintenance costs manageable.

Working on specification tools sharpened our appreciation for inline feedback. In any interface where choices at one point affect options at another, the user needs to understand cause and effect in real time. Delayed feedback—even by a single step—erodes trust and increases errors.