Case Study
Unifying Design, Accelerating Growth:
Evolving Communic8’s UI into a Cohesive UX System
Communic8 is an enterprise SaaS provider whose products help align workforces with business goals, boost employee engagement, and provide company leaders with actionable insights.
As the platform matured, gaps between products widened - leading to fragmented, inconsistent experiences across the ecosystem.
I led an ambitious initiative to unify and elevate the user experience across every product, platform, and user context.
To comply with my non-disclosure agreement, I have omitted and obfuscated confidential information in this case study. All information in this case study is my own and does not necessarily reflect the views of Communic8.
Fragmented Foundations
In just six years since launching in 2018, Communic8 evolved from a niche employee messaging tool into a fully-fledged enterprise communications platform used by global brands. Its product ecosystem - spanning admin console, mobile app, content creation and internal social media - grew rapidly to meet the complex demands of modern organisations.
As Communic8 scaled, the cracks began to show. Each product had been designed in isolation. Visual inconsistencies multiplied. New features were layered on top of legacy interfaces.
For users, navigating the ecosystem felt disjointed. For teams, it meant slower delivery, rework, and challenges maintaining quality due to a tangle of UI debt.
Without a shared design foundation, complexity was outpacing usability.
Setting the Vision
When laying the foundation for a unified design system at Communic8, we defined a clear set of success criteria. The system needed to be:
- Cross-platform: Consistent across mobile app, web app, and admin console
- Role-aware: Flexible enough to serve both end users and administrators
- White-label ready: Able to adapt to a wide range of brand identities — fonts, colours, and logos
- Visually elegant: Clean, modern, and professional
- Scalable: Capable of growing with the product, without introducing visual debt or fragmentation
At its core, the challenge was to balance user needs, business goals, and technical constraints — particularly given our small team and fast-paced delivery environment.
Sparking Momentum
To build momentum and cultivate alignment, I created a working proof of concept that championed a “one card” philosophy
A single, flexible card component that:
- Unites disparate elements
- Works globally
- Embodies consistent structure and interaction patterns
This prototype became a rallying point for product, engineering, and leadership. It demonstrated how a unified system could solve multiple problems at once, from reducing design time to improving developer velocity, while lowering cognitive load for users.
Driving Adoption
Using the card as an anchor point, a design system was in the works, however significant implementation challenges remained, as a fundamental platform transformation carries inherent risks that could derail adoption and momentum.
To mitigate these concerns, I adopted a turnkey implementation philosophy, proactively identifying and addressing potential friction points before they could impact development velocity or team confidence in the system.
Objection
Response
Objection
Stakeholder Skepticism Regarding ROI
Response
Pre-adoption:
Regularly communicate tangible benefits e.g.
- Faster Delivery
- Reduction of Design Debt
- Redundancy - uses Material 3 as a foundation, so any missing components fall back to a harmonious default
- Reduced support burden - reduces user confusion resulting in fewer support tickets related to usability issues
Post-adoption:
Track and report on key performance indicators (KPIs) e.g.
- Design-to-development time
- Bug reduction related to UI
- User feedback on consistency
Present data-driven evidence of the system's positive impact on efficiency and quality.
Objection
Development Time and Resource Drain
Response
- Highlight how the design system's reusable components and clear guidelines drastically reduce the need for custom coding and repetitive design tasks, freeing up valuable development time and resources for more complex, impactful work.
- Quantify this by tracking component reuse and development velocity.
Objection
Difficulty in Migrating Legacy Codebases
Response
- Work with developers to develop clear migration paths and deploy scripts where possible to automate parts of the transition.
- Prioritise migration based on user impact and technical feasibility, tackling high-value areas first.
Objection
User Disorientation and Resistance to Change
Response
- Introduce changes gradually where possible, and provide clear in-app messaging and release notes explaining the improvements and benefits of the new UI.
- Conduct user testing on new designs to gather feedback and iterate before broad release.
Core Pillars
White-labelling
The design system needed to allow for white-labelling, so users across Communic8’s entire client base could benefit from their organisation’s own self-branded experience. This coverage extends to colours and typography, and works in concert with the existing customisable feature flags in use across all Communic8 instances.
Colours: Material 3 Foundation
Using Material 3 as a starting point, a colour scheme could be generated rapidly. By retaining the client’s seed colour for branding purposes, and paring back to a small subset of generated M3 colours, we soon had a workflow in place to rapidly deploy a clean and scalable colour scheme to any client instance.
Atomic Design Implementation
The system follows atomic design principles with clear hierarchical structure - allowing it to better integrate with development workflows. The logical organisation and structured inheritance delivers both versatility and consistent outcomes.
Foundational Structure (Atoms)
Typography
The design system utilises the Gordita font family by default, though the architecture allows for alternative typefaces to be assigned on a per-client basis.
The type scale includes 12 sizes, ranging from 8px to 32px, making it easy to create clear visual hierarchy across all kinds of content.
Line heights are carefully set for comfortable reading, and three font weights - Regular, Medium, and Bold - add the right balance of emphasis and contrast to keep information organised and easy to scan.
Display
Variant
Font Weight
Everyone has the right to freedom of thought, conscience and religion; this right includes freedom to change his religion or belief, and freedom, either alone or in community with others and in public or private, to manifest his religion or belief in teaching, practice, worship and observance.
Everyone has the right to freedom of thought, conscience and religion; this right includes freedom to change his religion or belief, and freedom, either alone or in community with others and in public or private, to manifest his religion or belief in teaching, practice, worship and observance.
Headline
Variant
Font Weight
Everyone has the right to freedom of thought, conscience and religion; this right includes freedom to change his religion or belief, and freedom, either alone or in community with others and in public or private, to manifest his religion or belief in teaching, practice, worship and observance.
Everyone has the right to freedom of thought, conscience and religion; this right includes freedom to change his religion or belief, and freedom, either alone or in community with others and in public or private, to manifest his religion or belief in teaching, practice, worship and observance.
Body
Variant
Font Weight
Everyone has the right to freedom of thought, conscience and religion; this right includes freedom to change his religion or belief, and freedom, either alone or in community with others and in public or private, to manifest his religion or belief in teaching, practice, worship and observance.
Everyone has the right to freedom of thought, conscience and religion; this right includes freedom to change his religion or belief, and freedom, either alone or in community with others and in public or private, to manifest his religion or belief in teaching, practice, worship and observance.
Label
Variant
Font Weight
Everyone has the right to freedom of thought, conscience and religion; this right includes freedom to change his religion or belief, and freedom, either alone or in community with others and in public or private, to manifest his religion or belief in teaching, practice, worship and observance.
Everyone has the right to freedom of thought, conscience and religion; this right includes freedom to change his religion or belief, and freedom, either alone or in community with others and in public or private, to manifest his religion or belief in teaching, practice, worship and observance.
Colour Atoms
By using Material 3 as a starting point, we could generate comprehensive colour schemes rapidly, though some curation was still in order. By retaining the client’s seed colour for branding purposes, and paring back to a small subset of generated M3 colours, we soon had a workflow in place to rapidly deploy a clean and scalable colour scheme to any client instance.
| Brand/Accent | 4% | 8% | 12% | 16% | 24% | 37% | 50% | 70% | 80% | 87% | 100% |
| On Surface | 4% | 8% | 12% | 16% | 24% | 37% | 50% | 70% | 80% | 87% | 100% |
| On Surface Variant | 4% | 8% | 12% | 16% | 24% | 37% | 50% | 70% | 80% | 87% | 100% |
| Surface Container | 4% | 8% | 12% | 16% | 24% | 37% | 50% | 70% | 80% | 87% | 100% |
| Surface Container Low | 4% | 8% | 12% | 16% | 24% | 37% | 50% | 70% | 80% | 87% | 100% |
| Surface Container Lowest | 4% | 8% | 12% | 16% | 24% | 37% | 50% | 70% | 80% | 87% | 100% |
| Inverse On Surface | 4% | 8% | 12% | 16% | 24% | 37% | 50% | 70% | 80% | 87% | 100% |
| Success | 4% | 8% | 12% | 16% | 24% | 37% | 50% | 70% | 80% | 87% | 100% |
| Error | 4% | 8% | 12% | 16% | 24% | 37% | 50% | 70% | 80% | 87% | 100% |
Spacing Atoms
- Systematic 4px-based spacing units
- 4px icon spacing with 12px left/right padding
- Consistent corner radius system (12px / 16px /24px)
Form Elements
Text fields
Checkboxes
Radio buttons
Toggle switches
Filter Chip
Navigation Elements
Tab components
View switching
The system provides toggle controls that allow users to seamlessly switch between grid and table/list view formats.
This dual approach recognises that different users and contexts benefit from different data visualisation patterns:
- Grid views - for visual scanning and pattern recognition
- Table views - for detailed data comparison, analysis and administration
Complex Organisms
Accordions
Accordions
Card System Architecture
The card system represents the most sophisticated organism-level implementation. The Card System represents a system of adaptable layouts and states that preserve consistency while allowing for contextual nuance.
Real-world Impact
UX Improvements
Consistency Across Platforms
The design system creates a genuinely unified experience across the Admin Console, Recipient Hub, and Mobile App. Users see the same patterns, typography, and visual hierarchies everywhere, which means they're not constantly relearning how things work.
The card-based architecture in use throughout keeps interactions predictable. Whether someone's an admin tracking engagement or a recipient browsing content, the experience feels familiar and intuitive.
Enhanced Accessibility
Making the design system accessible wasn't just about ticking boxes - it was about making sure everyone could actually use what we built. We baked in proper focus states and semantic tokens from the start, so users navigating by keyboard always know where they are on the page.
The color palette uses opacity-based tokens that let us create different themes while still hitting WCAG standards. And the 12-level typography scale? It gives designers real flexibility to size text appropriately, whether they're working on dense data tables or simple forms.
Every interactive element follows the same state pattern - default, hover, active, focus, and disabled. This consistency means keyboard users get a reliable experience no matter where they are in the interface.
Efficiency Gains
Accelerated Design Velocity
The component library is comprehensive enough that designers rarely need to start from scratch. They can prototype new features quickly by combining existing atoms and molecules, knowing that accessibility and interaction states are already handled.
The semantic token system is a game-changer for updates. Make a design change once, and it propagates everywhere automatically - no tedious manual updates across dozens of screens.
Development Consistency and Reusability
Clear naming conventions and structured component architecture mean developers can build with confidence. The patterns are predictable and repeatable, which makes implementation straightforward.
The behavioural token system is particularly efficient - one component can adapt to multiple contexts without duplicating code. This modular approach cuts down on bugs, reduces maintenance work, and keeps interaction states consistent across the platform.
Quality Assurance Efficiency
Standardised states and interaction patterns make testing far more efficient. QA teams can write test cases once and apply them to every implementation of that component type.
The documentation built into our Figma library clarifies expected behaviour upfront, which means fewer miscommunications between design and development. Fewer misalignments means fewer revision cycles and faster delivery.
Business Results
Improved Time-to-Market
A mature component library significantly speeds up feature development. New admin features can tap into existing patterns and simply adjust the content types. Recipient-facing features benefit from those same proven interactions and behaviours.
Since everything's built responsively from the start, mobile implementations don't need extensive additional design work - most of the heavy lifting is already done.
Platform Scalability
The context-aware architecture positions the system to scale efficiently as user bases grow or new platforms are introduced.
With a cohesive foundation established, Communic8 could now roll out visual refreshes without architectural changes, whilst feature expansion is supported by the modular component structure without system-wide refactoring.
Enhanced User Satisfaction
The component library provides a solid foundation that scales with the product. Designers can prototype quickly using building blocks that already solve for accessibility and interaction states.
Design updates flow through the system automatically thanks to semantic tokens, saving significant time. The information architecture directly supports better task completion - admins get powerful management tools with clear hierarchies, while recipients get streamlined, engagement-focused experiences.
Consistent patterns also reduce training time and support requests, which improves both user satisfaction and operational efficiency.
Operational Excellence
The design system's maturity tackles both design debt and technical debt simultaneously. The systematic approach to naming, documentation, and token management creates a sustainable foundation that doesn't require constant oversight.
Feature flags enable us to A/B test and roll out changes gradually without risking stability. This supports data-driven optimisation and reduces deployment risk, allowing Communic8 to refine experiences based on real user behaviour rather than assumptions.
Summary
Building a unified, scalable design system across the entire Communic8 ecosystem was achieved by establishing clear design principles, comprehensive component libraries, and systematic token architecture. This foundation transformed how the organisation designs, builds, and delivers product experiences.
The impact extends beyond visual consistency. Teams now ship features faster with fewer errors. Users navigate confidently across platforms without relearning interfaces. The business can scale efficiently whilst maintaining quality and accessibility standards.
Most importantly, the design system created a sustainable foundation for growth. Communic8 can now white-label experiences rapidly, introduce new features without accumulating design debt, and adapt to evolving user needs - all while maintaining the cohesive, professional experience that enterprise clients expect.
The journey from isolated product development to a unified design system demonstrates how strategic design thinking, combined with pragmatic implementation, can unlock both immediate efficiency gains and long-term competitive advantage.