Portfolio

The Challenge

A technical prototype needed to become a production-ready system serving plant scientists, engineers, and farm staff across multiple countries and languages - all managing complex growing environments in real-time.

My Role

I owned all design and UX decisions while contributing heavily to front-end architecture. I worked closely with product owners and engineers to translate technical complexity into intuitive workflows, and wrote production Angular code that was continuously deployed globally.

The Approach

• Broke down a monolithic system into focused micro-frontends tailored to specific user workflows
• Prioritised real-time responsiveness over rigid scheduling for crop care
• Made complex growing conditions intuitive through progressive disclosure and sensible defaults
• Built a flexible notification system that cut through noise to surface what matters
• Ensured accessibility and usability across devices and languages

Key Features

• Organising, analysing, and managing up to 50,000 square meters of growing space
• Monitoring and adjusting environments in real-time
• Creating and analysing ideal growing conditions for specific crops
• User management, roles, and permissions unique to each customer
• Notifications via web, SMS, and email based on preferences

The Impact

Teams could manage thousands of devices and up to 50,000 square metres of growing space efficiently. The system scaled globally while remaining usable for diverse user groups, from farm hands to plant scientists.

The Challenge

Multiple product teams were duplicating design work and creating inconsistent user experiences. We needed a single source of truth that would work across different frameworks without locking teams into rigid patterns.

My Role

I designed and built the entire design system from scratch, including design tokens, component library, and documentation. I drove adoption across multiple product teams and established governance processes to maintain quality and consistency.

The Approach

• Built with StencilJS to create framework-agnostic web components
• Established design tokens for colour, typography, and spacing
• Implemented comprehensive accessibility standards (WCAG compliance)
• Created a dark mode that works seamlessly across all products
• Documented every decision to create shared language between design and engineering

The Impact

Developers could build features without debating design decisions. Users experienced consistency across every app. Design debt decreased while feature delivery accelerated, enabling teams to focus on solving real user problems.

The Challenge

An existing web app responsible for significant business income needed a complete refactor and redesign. Stakeholders needed confidence that the investment would deliver value.

My Role

I designed and built a working React prototype to demonstrate the viability of the refactor, working with stakeholders to validate the approach and build support for the full project.

The Approach

Created a high-fidelity prototype that demonstrated key workflows and technical feasibility, focusing on de-risking the most challenging aspects of the proposed refactor.

Key Features

• High-fidelity prototype
• Key workflow demonstrations
• Technical feasibility validation

The Impact

The prototype successfully built stakeholder confidence, leading to approval and funding for the full refactor project.

The Challenge

NBC Universal needed to coordinate journalist nominations for film press events across multiple countries and outlets, with a system that worked seamlessly across devices.

My Role

I designed and built a React web app optimised for cross-platform use, handling complex workflows for managing press event nominations at global scale.

The Approach

Focused on responsive design and performance optimisation to ensure the system worked reliably across devices and regions.

The Impact

NBC Universal could efficiently manage journalist nominations for press events worldwide, streamlining what was previously a manual and error-prone process.

The Challenge

MHG needed to track product packaging across multiple clients (Waitrose, Morrisons, John Lewis) while managing complex workflows where tasks are generated, assigned, and move through multiple departments.

My Role

I designed and built a React web application that coordinated packaging tracking and automated task management workflows across teams.

The Approach

Created an intuitive interface for tracking packaging details and implemented a sophisticated task routing system that automatically assigns tasks to staff and tracks their progression through departmental workflows.

The Impact

MHG could efficiently manage packaging data and task workflows at scale, eliminating manual coordination and reducing errors across multiple retail partnerships.

The Challenge

Maglabs needed a generic digital asset management platform that could serve multiple clients while being fully brandable. It needed to be their first React project and establish a new modern backend tech stack.

My Role

I designed and built the complete Sargasso platform, creating a flexible system that could be customized per client while maintaining a consistent core architecture.

The Approach

Built a React-based DAM system with comprehensive customization capabilities, allowing colour schemes, logos, and branding to be applied per client while sharing the underlying codebase and backend infrastructure.

The Impact

Sargasso became Maglabs' flagship product offering, successfully serving multiple enterprise clients and establishing React and a modern backend stack as the foundation for future products.

The Challenge

Before committing to the full UPI Media project, NBC Universal needed to validate the proposed aesthetic and design direction to ensure stakeholder buy-in.

My Role

I created a comprehensive styleguide during 'Sprint 0' that showcased the visual design, component patterns, and design rationale for the UPI Media project.

The Approach

Developed a high-fidelity styleguide that brought Hollywood glamour and bright, engaging colours to the professional press events domain, making the project feel more approachable and exciting.

The Impact

The styleguide successfully demonstrated the aesthetic vision and gained stakeholder approval to proceed with the full project, setting the design direction for all future UPI Media work.

The Challenge

GeckoLabs had multiple applications across the company with inconsistent styling. They needed a centralized, maintainable way to keep styling synchronized across all products.

My Role

I created and established a git submodule-based styleguide that served as the single source of truth for all visual consistency across GeckoLabs products.

The Approach

Implemented a git submodule approach that allowed the styleguide to be included in multiple repositories while maintaining a single canonical source, making updates automatic across all dependent projects.

The Impact

The styleguide became the foundation for design consistency at GeckoLabs. It has grown and been adapted since my departure, demonstrating the effectiveness of the approach.

The Challenge

Finding which acts performing at Edinburgh Fringe have appeared on favourite comedy podcasts required cross-referencing multiple data sources. An automated solution could help comedy fans discover new acts.

My Role

I designed and built an Angular web application that automatically aggregates data from the Fringe API, cross-references podcast appearances, and creates an interactive browsing experience.

The Approach

Created a programmatic pipeline that gets Fringe data, searches Soundcloud for podcast appearances, generates a JSON data file, and uses Angular to build an interactive web app for exploring the connections.

The Impact

Comedy fans can discover which Fringe acts have appeared on their favourite podcasts, creating new connections between live comedy and podcast content. The project remains ongoing and continues to be refined.

The Challenge

RightScale needed polished public-facing pages for two key products: a cloud comparison tool and a design kit, both requiring distinct approaches and design excellence.

My Role

I designed and built public-facing pages for RightScale's flagship cloud tools, creating compelling interfaces that showcase product capabilities to enterprise customers.

The Approach

Developed two distinct experiences: Cloud Comparison as an interactive tool for comparing cloud vendors, and Design Kit as an installable style guide for creating consistency across RightScale apps.

The Impact

Cloud Comparison enabled customers to evaluate cloud options and make informed decisions about vendor selection. Design Kit helped RightScale's teams maintain visual consistency while building new features.