System of a Design

Overview

At SVI, managing multiple brands meant balancing consistency with brand individuality. When I joined, the company was undergoing a design refresh, and we needed a structured approach to scale efficiently. I led the creation of two key projects—one focused on developing new, cohesive digital experiences and the other on standardizing and optimizing existing flagship brands.

Building a Unified Component System

Cubeit & MoveBuddy

Challenge:

Cubeit and MoveBuddy were two new websites under development. While they served different audiences, their brand tone and UX structure were similar. Instead of building two separate systems from scratch, we created a shared component system that streamlined development while allowing each brand to maintain its identity.

Solution:

We structured the system with shared components first, making CMS component creation for both websites significantly easier.

🔹 Shared Core Components & Sections

• Layout structure & UI spacing

• Standardized button styles & iconography

• Base typography (excluding font selection)

🔹 Brand-Specific Components

• Branded illustration style

• Brand colour palette and font

• UX-driven components

🔹 AODA Compliance

Accessibility was a crucial part of this project. We rigorously tested all components for color contrast, ensuring sufficient legibility between UI elements, backgrounds, and text surfaces.

Impact:

✅ Streamlined CMS component creation across both sites
✅ Faster development cycles with reusable design patterns
✅ Ensured a cohesive yet distinct brand experience for each website
✅ Improved accessibility compliance

Standardizing for Consistency & Compliance

Access, Sentinel & Depotium

Challenge:

The three flagship brands—Access Storage, Sentinel Storage, and Depotium—operated regionally but shared the same tone and identity. However, their digital experience was fragmented:

• UI inconsistencies across features

• A patchwork of design fixes, making updates difficult

• No modularity—each new feature required a frontend workaround

Since there was a plan for the website to be redesigned and recoded, we used this opportunity to implement a structured design system that focused on consistency, scalability, and compliance with modern UX/UI standards.

Solution:

• Brand Guidelines First – I expanded and documented the brand foundations, ensuring a strong starting point.

• Component-Based Approach – Transitioned from outdated page-based designs to modular, reusable components.

• Gradual Rollout – Changes were introduced step by step to test content and ensure seamless adoption.

Impact:

✅ Transformed an outdated, fragmented design into a modern, modular system
✅ Reduced friction in implementing new features
✅ Enabled a scalable, consistent experience across all three brands

Branding Expertise Matters: My background in branding helped ensure that the systems were not only functional but also deeply aligned with each brand’s identity.

Reusability Saves Time: Leveraging a shared component system significantly improved efficiency.

Gradual Rollouts Work: Phased implementation reduced friction and ensured better adoption.

TL;DR