Projects with the thinking behind the work.

Overview

Mill-Max manufactures a wide range of precision interconnect components, making it essential for engineers to quickly identify the right part for their specific requirements. The challenge was to create an intuitive filtering experience that simplified product discovery without overwhelming users with technical complexity. The goal was not simply to display data. It was to help users confidently narrow thousands of possible combinations into the right solution.

My Role

The Challenge

Technical product catalogues often become difficult to navigate as they grow. Users are presented with large amounts of information, multiple filter combinations, and complex product specifications, making it easy to feel lost or overwhelmed. The challenge was to design a filtering experience that balanced flexibility with simplicity, allowing users to find relevant products quickly while keeping the interface approachable and easy to understand.

The Approach

Before writing code, I focused on understanding how users interacted with the catalogue and the decisions they needed to make. From there, I designed a filtering experience that progressively narrowed available options, reducing cognitive load while helping users stay oriented throughout the selection process. On the development side, I built reusable components and structured the application so it could evolve alongside future product additions without requiring significant changes to the interface.

Technologies

Key Decisions

• Designed an intuitive filtering experience for a complex product catalogue.
• Developed reusable front-end components for consistency and maintainability.
• Improved navigation through progressive filtering and clear visual hierarchy.
• Structured the front end around scalable product data and future catalogue growth.
• Prioritised WCAG-minded accessibility, usability, and performance throughout development.
• Collaborated closely with stakeholders to refine functionality based on product requirements.

Technical Highlights

Rather than treating the filter as a collection of independent controls, the application dynamically responded to user selections, presenting only the most relevant options at each step. This reduced unnecessary complexity while creating a smoother and more efficient product discovery experience. The application was built with scalability in mind, making it easier to expand the catalogue and introduce additional filtering logic as product offerings evolved.

Outcome

The final product transformed a large and technically detailed catalogue into a focused, guided experience. Users could locate relevant products more efficiently, while the modular architecture provided a solid foundation for future enhancements and ongoing maintenance. While the visual design remained intentionally understated, the strength of the project lies in the interaction design, information architecture, and technical implementation behind the experience.

What I Learned

This project reinforced that good front-end development is about far more than building interfaces. It is about understanding how people process information. By simplifying complex decision-making and designing interactions around user behaviour rather than technical constraints, it is possible to make even highly specialised tools feel approachable and intuitive.

Overview

Entenmann's is a CPG brand site that needed a cleaner, more modern digital experience on an upgraded Drupal foundation. The work focused on bringing the site up to the latest Drupal version, refining the design and front-end implementation, and making the experience feel more consistent with the company's brand.

My Role

The Challenge

The existing site needed to be modernised technically and visually. The Drupal platform required an upgrade, while the interface and front-end patterns needed to feel cleaner, easier to maintain, and more closely aligned with the established brand experience.

The Approach

I focused on translating the refreshed design direction into cleaner Drupal/Twig templates and front-end patterns. The implementation balanced brand consistency, CMS flexibility, responsive behaviour, and maintainable code so the site could support ongoing content and product updates after launch.

Technologies

Key Decisions

• Upgraded the Drupal foundation to support a more current and maintainable site.
• Built cleaner Drupal/Twig templates to make future content updates easier.
• Refined page structure and visual hierarchy to better support CPG brand storytelling.
• Used Bootstrap, SCSS, and JavaScript to create consistent front-end patterns.
• Kept semantic HTML, accessibility, and performance in mind throughout implementation.

Outcome

The final product delivered a cleaner, more maintainable CPG brand site that felt better aligned with the company identity while providing a stronger Drupal foundation for future content and product updates.

What I Learned

This project reinforced how much a successful brand site depends on both technical foundations and visual consistency. Upgrading the CMS mattered, but the experience only felt complete once the design, templates, and content structure worked together.

Overview

Little Bites needed a digital experience that could feel playful and product-focused while still making information easy to browse, update, and scale across campaign pages.

My Role

The Challenge

The product experience needed to support different user needs at once: quick product discovery, brand storytelling, campaign content, and easy content management without adding unnecessary complexity for visitors.

The Approach

I focused on reusable page patterns, clear content hierarchy, and responsive layouts that worked well on smaller screens first. The implementation balanced brand personality with practical CMS structures so the site could continue evolving after launch.

Technologies

Key Decisions

• Kept page structures modular so content could be reused across campaigns.
• Made product information scannable before adding supporting brand detail.
• Used consistent spacing and hierarchy to keep playful visuals from becoming confusing.
• Protected mobile usability by keeping key actions and content easy to reach.
• Kept the front-end implementation maintainable for future updates.

Outcome

This created a smoother browsing experience for families and gave the brand a more maintainable foundation for product content and campaign storytelling.

What I Learned

This project reinforced how small layout and interaction decisions can make a large consumer website feel simpler, calmer, and easier to navigate.