top of page
Create Your First Project
Start adding your projects to your portfolio. Click on "Manage Projects" to get started
Building the Foundation
Project
Designing a Scalable, Persona-Driven System for a Legacy Organisation
Problem Statement
Yell’s product teams were designing from scratch on every brief, with no shared system, standards, or reusable UI. Our legacy tech stack spanned multiple frameworks, Vue2, native mobile apps, and outdated internal tools, each using isolated component libraries, with no universal structure or visual cohesion. This fragmented landscape made consistency impossible, increased cognitive load for users, and added unnecessary friction and inefficiency for teams across the business. Engineers were reinventing UI on a per-project basis, and designers were drawing rectangles in blank Figma files.
Goal
Establish a unified, scalable, and future-proof design system that connects Yell’s consumer, business, and internal user experiences through shared patterns, visual clarity, and consistent usability. The system needed to work across web and mobile (iOS and Android), support a Vue3 migration strategy, reduce inefficiencies in design and engineering handoffs, and reflect a refreshed brand built on the heritage of Yellow Pages with a modern edge.
Process
Define Business Need → UX Discovery → Technical Alignment → Brand Collaboration → Cross-Persona Strategy → System Design & Structure → Governance → Delivery & Enablement
Discovery: Diagnosing the Fragmentation
When I joined Yell as Lead UX, I found that design was happening in silos. With no system in place, we were duplicating effort, creating inconsistent interfaces, and relying on ad-hoc component styling. I initiated deep discovery across engineering, product, and brand to understand the scale of the issue and create a business case for investment.
Workshop with Engineering: I facilitated a multi-disciplinary session with front-end, iOS, and Android engineers to determine requirements and pain points, using user behaviour data to define device targets. This helped align on Vue3 as our future state and confirmed mobile needed equal design consideration; previously, mobile engineers felt excluded and unsupported.
Audit & Analysis: We conducted a full audit of our live platforms and component libraries. The inconsistencies were widespread, from button hierarchies and naming conventions to different teams optimising for different screen sizes.
Brand Challenges: Yellow (our primary brand colour) lacked digital contrast, and blue (secondary) was often used in ways that confused hierarchy and reduced conversion. We frequently needed to break brand rules to create functional, user-friendly interfaces. This tension triggered closer collaboration with the marketing and brand team to help evolve the brand for digital contexts.
Strategy: A Unified System That Serves All Personas
Yell is a marketplace with three core personas:
- Consumers looking for trusted service providers
- Businesses needing marketing tools and leads
- Internal teams managing onboarding, support, and retention
I advocated for equal prioritisation of internal tools, arguing that their experience is just as critical; these users are problem-solving on the phone, multitasking in complex interfaces, and helping technophobic customers succeed.
To ensure clarity and quick context-switching, we applied visual language rules per persona. This made the system more intuitive and helped internal teams identify product intent at a glance.
Build: Design System Infrastructure
Design Tokens & Naming Conventions: We created atomic-level components from the ground up, aligning consistently across web and mobile. Auto-layout training and Figma file structure were introduced to upskill the team and improve delivery quality.
Platform-Ready UI: All components were designed to work across:
- Desktop, tablet, and mobile web
- iOS and Android mobile apps
- Vue3 web products and future state architecture
Core Templates Delivered:
- Persona-driven dashboards
- Table/list/map views
- Search results
- Analytics & reporting modules
- Forms, quote builders, and billing UIs
Brand Refresh Alignment: Throughout, I collaborated with brand & marketing to ensure the UI system evolved with the refreshed brand language, while upholding accessibility and usability standards.
Enablement: Collaboration & Rollout
Cross-Functional Buy-in: I proposed hiring a dedicated contractor to accelerate build-out while leading the design direction and system structure. We ensured close collaboration between designers and engineers for real-time alignment.
Storybook as Source of Truth: After a discovery comparison of Storybook vs GitHub for documentation, we launched Storybook as the central hub for all live components and design specs, now used universally across the business.
PM & Designer Enablement: I led team demos and workshops to help product managers envision what's possible and ensure all designers felt confident using the system. We embedded the system in all new work, moving to a "system-first" approach.
Case-by-Case Build Strategy: Due to limited frontend engineering resources, components are built progressively as needed, allowing legacy products to be incrementally modernised while delivering value throughout.
Outcomes & Impact
Unified UI across web, mobile, and internal systems, enabling reusable components and persona-specific theming
Storybook adoption as a live, shared reference across engineering teams, improving handoff and velocity
Design consistency increased drastically, reducing design debt and enabling rapid feature iteration
Engineering enablement led to reduced rework and better collaboration across mobile and web teams
Internal tools elevated, resulting in better support for multi-tasking agents and improved customer problem solving
Next Steps: Continued System Growth & AI Integration
Continue building out the system in collaboration with engineering
Prepare design tokens and guidelines for advanced personalisation
Integrate with AI-driven forms and interfaces to support next-gen lead generation
Expand internal tool design coverage, reducing friction and upskilling non-technical users
Final Thought
The design system isn’t just a visual framework; it’s a culture shift. We replaced fragmented, inefficient design practices with a shared foundation that unifies products, personas, and platforms. It's a living, evolving structure that strengthens every part of the business, consumer, business, and internal alike.
bottom of page