Connected UI
Design Systems, UI Patterns & Interaction Standards
This project involved creating a scalable design system for Foods Connected to help bring more consistency, efficiency and usability across our products. I started by auditing what already existed, identifying gaps and pulling together the components that were being used in different places. From there, I defined reusable patterns and built out a Figma library that aligned with our product standards and how the teams actually work.
The system now supports more complex workflows like Retail Pack and helps designers and developers move faster, stay consistent and deliver higher quality interfaces across both web and mobile. Because this work is part of my ongoing role, I can’t share the full Figma library publicly, but I’m very happy to walk through it on a call and talk through how everything works if needed.
Project Overview
The goal of this project was to create a cohesive design system for Foods Connected that would bring consistency, efficiency, and scalability to our digital products. Prior to this, components, layouts, and interactions were inconsistent across projects, which slowed development, caused design duplication, and sometimes confused users.
I led the process of defining a unified design language that could be applied across web and mobile, establishing reusable components, standardized interactions, and clear guidelines for typography, colour, spacing, and accessibility. This system was intended to support both ongoing projects, like Retail Pack and the mobile banking app, and future initiatives across the platform.
Problem & Goals
Before the design system, each project often reinvented components and styles, which led to inconsistencies in look and behaviour. Developers and designers were spending unnecessary time recreating buttons, forms, and tables, while users experienced friction due to subtle differences in layout and interaction patterns.
The goals were to:
-
Build a single source of truth for UI components and patterns
-
Ensure consistency across products and platforms
-
Improve efficiency for designers and developers
-
Provide flexibility to adapt for complex, data-heavy workflows like Retail Pack
-
Embed accessibility and usability best practices throughout
Users & Research
Although this was an internal system, the “users” were both the design and development teams. I conducted research to understand their pain points, including interviews with designers and developers, reviewing prior project files, and observing handoffs between design and engineering.
Key insights included: inconsistencies in spacing, form behaviour, table layouts, and button styles; unclear naming conventions for components; and a lack of guidance for complex data-heavy interfaces. This research informed the structure and priorities for the system.
Mapping the Experience
I mapped how designers and developers interacted with UI components across projects, identifying the most frequently used patterns and where inconsistencies caused the biggest problems. I documented component hierarchies, responsive behaviour, states, and variations.
This mapping helped ensure that the system wouldn’t just be a library of visual elements but a living framework that guided design decisions and streamlined development workflows.
Ideation & Concepts
I started by auditing existing components and design patterns across projects. From there, I created initial concepts for a standardized component library, exploring layout grids, input patterns, tables, buttons, and data visualizations.
Through iterative feedback with the team, I refined the components to ensure they were flexible enough to handle simple use cases as well as more complex interfaces, like those needed for Retail Pack or financial dashboards.
Information Architecture & Flows
The design system was structured to be easy to navigate and implement. Components were grouped logically by function—inputs, buttons, tables, forms, data visualization—and included clear documentation for usage, states, and responsive behaviour.
I also developed naming conventions and guidelines for extending components, ensuring that new additions would remain consistent with the system’s rules.
Final Designs
The final system included a comprehensive set of reusable components, clear spacing and typography standards, accessible colour palettes, and interaction guidelines.
I integrated it with Figma and shared it with the team as a live, interactive library, making it easy for designers to drag and drop components and for developers to reference coded equivalents.
The system supported both straightforward UI needs and complex data-heavy interfaces, ensuring high fidelity and usability across all products.
Testing
To validate the system, I applied it directly to active projects. I tested components in context by creating prototypes for Retail Pack, the mobile banking app, and other data-heavy screens. This allowed me to confirm that components were flexible, intuitive, and consistent.
Feedback was collected from designers and developers, leading to refinements such as adjusting table behaviour, spacing, and default states. The iterative approach ensured the system worked in real-world conditions, not just in isolation.
Collaboration & Delivery
Creating a design system required close collaboration across the team. I worked with designers to define visual language and component behaviour, and with developers to ensure feasibility and maintainability.
Documentation and Figma libraries were shared openly to support onboarding and encourage adoption. I also established a process for maintaining the system, including versioning, updates, and adding new components over time.
Impact & Results
This project involved a lot of cross-functional collaboration. I worked with product managers, domain experts and stakeholders from multiple retailers, making sure requirements were understood and documented clearly.
I also worked closely with the internal team to ensure designs were feasible, clearly annotated and aligned with development constraints.
Reflection & Learnings
Working on a system of this scale reinforced the importance of balancing flexibility with structure. I learned how to design components that handle complex data, maintain consistency, and remain adaptable for future growth.
The project also highlighted the value of collaboration, documentation, and iterative testing in creating a system that isn’t just visually consistent but also genuinely useful for both designers and developers.