Zonal | Matt Staniszewski

Zonal is a UK-based provider of hospitality technology, offering solutions from restaurant POS terminals to inventory and warehouse management software. As competition in hospitality tech intensified, Zonal faced growing pressure to modernize its product experience. Many competing platforms were investing heavily in sleek, scalable design systems that delivered consistent interfaces and faster development cycles.

To stay competitive, Zonal needed a working design system to improve efficiency, reduce fragmentation across its applications, and deliver a cohesive experience to both internal users and end customers.

Disclaimer: All views shared here are my own and may not reflect the official stance of the company. Some design details have been modified.

My Role

During my time there as a Principal Designer, I was responsible for leading the overhaul of Zonal's design system, an initiative aimed at unifying UI/UX consistency across over ten internal applications used by teams and clients across the hospitality sector.

My primary challenge was maintaining and evolving the design system while navigating significant internal complexity: working with multiple design contributors and eight development teams, each operating with different frameworks, priorities, and release expectations.

Strategic Goals

Our mission was to build a scalable design system that could unify over ten Zonal products used across hospitality environments, around three goals.

Scalability. Build a flexible design system that could scale across 10+ products.

Consistency & Real-World Testing. Update and standardize components and UX patterns to ensure consistency and test UI decisions against real-world flows in active Zonal applications.

Accessibility. Introduce and enforce accessibility standards for both desktop and mobile platforms.

Together, these goals would let Zonal eliminate redundancy, improve developer efficiency, and improve user experiences across its fragmented product suite.

Discovery & Foundation Setting

The initiative began with a review of Zonal's design landscape. A third-party agency had previously delivered a component library, but it lacked cohesion with the final products and failed to address critical usability challenges. To course-correct, I led a cross-functional review of Zonal's applications, examining workflows, visual hierarchies, and broader ecosystem patterns to uncover structural gaps and design inconsistencies.

This effort involved auditing and dismantling the off-the-shelf library, mapping out UX flows across desktop and mobile, and establishing a unified foundation layer that covered typography, layout, spacing, and iconography. From there, we planned phased tasks to modernize components, rewrite documentation, and begin applying new design standards throughout active products.

Discovery Takeaways

Component consistency was at the heart of the project. Every visual element, from buttons to data tables, needed to be reviewed for function, appearance, and interaction feedback across the product suite. I set up a review process to keep visual consistency intact, even as product teams operated with varying levels of oversight.

Understanding the Users

I developed three internal personas to keep the work grounded:

The Designer: Alex is a product designer focused on crafting intuitive and visually consistent user interfaces. Working across teams, Alex relies on the system to maintain design cohesion, reduce rework, and ensure every user touchpoint feels seamless and familiar. Goal: use the system to quickly design, prototype, and implement cohesive interfaces that scale easily across platforms, saving time and reinforcing brand trust.

The Developer: Jordan is a full-stack developer with a pragmatic approach to building. Jordan values tools that make component integration painless and reliable, so updates roll out smoothly and collaboration with designers stays friction-free. Goal: effortlessly integrate reusable design components while keeping code clean, reliable, and maintainable.

The Restaurant Operator: Sam runs a busy, customer-focused restaurant and has recently started using Zonal's updated applications to manage orders, menus, and staff more efficiently. Goal: make the most of Zonal's system to speed up day-to-day operations, improve customer experience, and give staff the tools for smarter workflows.

Three Working Principles

From the start, I had a clear vision and the freedom to explore it. Our user base was large, professional, and diverse, so I built the experience around three guiding principles:

To Review. Reviewing and updating spacing, colors, interactions, and accessibility tags.

To Coordinate. Coordinating with fellow designers to capture and manage component variants.

To Make the Call. Making the final call on whether a new variation was added to the library and reviewing every new design project before it entered development.

Bringing It to Life

We quickly discovered structural and cultural obstacles that made implementation far more difficult than anticipated. The developer teams were siloed, each using its own front-end framework and delivery process, which created immediate friction in how updates were shared and applied. At the same time, product owners often pushed for speed over quality, routinely skipping QA and releasing updates without any post-launch feedback or iteration. Design requests for proper workflows (Discovery → Design → Feedback → Development) were regularly dismissed, forcing the design team to work reactively rather than strategically.

These challenges exposed deeper issues around alignment and accountability, beyond the day-to-day frustration. I came to realize that even the best design system wouldn't succeed without buy-in from every layer of the organization. So I shifted my approach: focusing on clear documentation, relationship-building across teams, and communicating the long-term value of design consistency. Technical precision was essential, but without organizational support, it couldn't stand on its own.

Design Updates

In parallel, we built more than 10 new UI patterns from scratch, including frameworks for search, filtering, data grids, and notification handling. These patterns helped standardize behaviors across products that previously relied on ad hoc, inconsistent logic. We also unified key visual elements such as layouts, typography, and color systems, ensuring that all screens met current accessibility standards while maintaining brand coherence.

Over 30 core components were reviewed and updated to handle Zonal's most demanding use case: presenting dense, structured data in highly interactive tables. These changes went beyond surface polish: spacing, data clarity, interaction feedback, and accessibility compliance.

Design Accents

To strengthen identity and usability, we introduced custom iconography and branding assets tailored to each Zonal product. This helped distinguish offerings while reinforcing visual hierarchy across modules. Our team also rebuilt the component documentation from the ground up, making it clearer and more actionable for both designers and developers, especially those working with highly specific use cases or nested data structures.

Organizing the Components

Lastly, we created separate libraries for mobile and desktop interfaces, acknowledging the different user needs and contexts, while maintaining shared foundations like layout grids, type scales, and icon sets to keep cohesion.

While the system was designed for flexibility, scalability, and accessibility, its long-term success depended on implementation, an area that proved to be outside our design team's control.

Release & Implementation Breakdown

Unfortunately, execution faltered despite two years of dedicated effort. Internal communication gaps and siloed processes consistently disrupted the release phase, making alignment nearly impossible. Developers failed to coordinate updates across teams, leading to mismatched component versions and rollout confusion. Even newly designed screens often ignored the updated system, reverting to outdated legacy components that undermined visual and functional consistency.

The system was meant to serve all eight development teams. One of the UI teams successfully developed it in code, but so far it has been implemented in only one Zonal product. The other teams are due to adopt it later. Most new projects continued using old or mismatched libraries, bypassing the design system entirely, as if it hadn't been created. A lack of centralized quality assurance made things worse: there was no process to validate implementation, and design feedback loops simply didn't exist. Work was deployed without evaluation, which meant errors and inconsistencies weren't caught until much later, if at all.

Despite our steady progress and thorough documentation, the system had reached only one product by the end of my work there. The disconnect between design intention and development execution reflected deeper organizational challenges, ones that no amount of component polish could overcome.

The Outcome

The design system was meant for eight teams and had reached one by the end of my work, with a plan for the others to adopt it later. The experience taught me the limits of design leadership in an environment lacking operational structure.

Positive outcomes. I spent two years collaborating with talented, passionate people who cared deeply about good design. I built a system grounded in accessibility, scalability, and clarity.

Why it stalled. The project stalled because of product and engineering workflows. Design needs internal buy-in, technical alignment, and release discipline to ship, and at Zonal there was no centralized QA and no process to check what shipped against the system.

See what Zonal builds today.