Project Overview
Client: NSF International
Scope: Phase 1 – Digital Learning Catalogue
Company: Giant Goat Web Development
Role: Lead Designer
Tools: Adobe Adobe XD, Illustrator, Photoshop, Drupal 7 CMS
Deliverables: High-Fidelity Accessible UI Components, Digital Brand Guidelines upgrades
Timeline: Multi-phase project over 3 years
Scope: Phase 1 – Digital Learning Catalogue
Company: Giant Goat Web Development
Role: Lead Designer
Tools: Adobe Adobe XD, Illustrator, Photoshop, Drupal 7 CMS
Deliverables: High-Fidelity Accessible UI Components, Digital Brand Guidelines upgrades
Timeline: Multi-phase project over 3 years
The Challenge
NSF International, a global leader in food safety and quality standards, needed a scalable online course catalogue to better support the 6,000+ professionals they train each year.
Training courses were fragmented across regions and inconsistent in presentation. Learners struggled to search and register, staff spent extra time managing updates.
The team needed to consolidate training into a single global catalogue, streamline the user journey from discovery to registration, and ensure accessibility and brand trust for a global audience.
Desktop version of home page with the new image
Tablet version of course information, course registration, courses timelines, and home page
Strategy and Approach
We began with a competitive audit of learning platforms and mapped the learner journey to identify problematic points. These insights shaped our strategy to automate course updates through the LMS API, standardize the interface with reusable design patterns, and align with WCAG accessibility standards.
My contributions included developing wireframes and interactive prototypes, creating scalable UI components in Adobe XD, and documenting design patterns for consistency. Iteration with stakeholders and usability feedback ensured the platform met both user and business needs.
Design Direction
The design emphasized clarity and scalability:
Streamlined search and filter tools for faster course discovery.
Card-based layouts optimized for scanning across devices.
Reusable UI components documented in updated brand guidelines.
Professional typography, color palette, and iconography reinforcing NSF’s credibility.
Collaboration
This project was highly collaborative, involving close coordination between project manager, designer, developers, and NSF stakeholders.
I worked alongside teammates to align design decisions with technical requirements and user needs, and collaborated directly with developers to ensure smooth integration with Drupal and the LMS API.
Regular feedback sessions with stakeholders helped refine both the design direction and the user journey.
Outcome and Impact
Delivered a unified global catalogue that replaced fragmented regional systems, simplifying registration and standardizing training delivery across 10+ divisions.
Improved usability and accessibility, enabling professionals of all abilities to confidently access training and boosting course completion rates.
Reduced staff time managing updates and cut dependency on printed materials, saving time and distribution costs.
Built a scalable, branded system that expanded NSF’s training reach to 6,000+ professionals annually, strengthening its global reputation for compliance and quality.
