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 Learn is NSF International’s online education and training platform for global audiences in health, safety, and quality. The goal was to improve visual engagement, streamline navigation, and elevate the platform’s professional image to match NSF’s global credibility. With over 6,000 professionals annually through hundreds of courses.
The challenge was to design a user experience that was both visually compelling and easy to navigate for a diverse audience, including corporate clients, industry professionals, and international learners. The platform also needed a cohesive marketing toolkit for promotions and course launches.
Desktop version of home page with the new image
Tablet version of course information, course registration, courses timelines, and home page
Strategy and Approach
As part of Giant Goat’s internal team, we conducting a content audit and mapping the end-to-end user journey from course discovery to checkout.
The strategy focused on:
- Leveraging the LMS API to automate course listings, pricing, and location updates
- Designing a flexible UI system to accommodate dozens of course categories and future growth
- Balancing NSF’s global brand standards with a unique visual identity for the training catalogue
- Prioritizing accessibility and responsive design to ensure usability for all audiences
Design Process
1. Concept Development
- Moodboards exploring typography, iconography, and tone within NSF’s brand framework
- Multiple visual directions grounded in brand colors but varied in density and style
2. Wireframes & Prototypes
- Low-fidelity layouts to map filtering, search, and course detail flows
- Stakeholder testing to refine hierarchy, labeling, and interactions
3. Visual Design
- High-fidelity designs for desktop, tablet, and mobile
- Modular UI library for scalability and consistency across hundreds of pages
- Iconography and color-coding for category navigation
4. Accessibility Integration
- High-contrast text and buttons
- Keyboard navigation support for all interactive elements
- Alt text guidelines for all imagery
Collaboration
As part of Giant Goat Web Development internal team,
We collaborated by:
- Integrate designs into Drupal for scalable, regional rollouts
- Implement API-driven course updates in real time
- Conduct AODA/WCAG compliance reviews at each stage
- Maintain continuous feedback loops between design, development, and stakeholders
Outcome and Impact
Designing for both scalability and accessibility was key to success.
The launch delivered:
- Mobile responsive, fully searchable course catalogue
- Streamlined registration with integrated eCommerce
- Reduced admin workload through automated LMS updates
- Scalable platform ready for rollout in Latin America and Mexico
Reflection
This project strengthened my ability to combine brand integrity with learner experience. It also reinforced my skills in building accessible, scalable digital systems in collaboration with cross functional teams.
