Project Overview
Client: NSF International
Scope: Digital learning catalogue and future platform designs - phase 1
Timeline: Multi-phase project over 3 years
Scope: Digital learning catalogue and future platform designs - phase 1
Timeline: Multi-phase project over 3 years
My Role: Lead Designer, collaborating closely with a developer and project manager
Tools: Adobe Adobe XD, Illustrator, Photoshop, Drupal
Deliverables: High-Fidelity Accessible UI Components, Digital Brand Guidelines upgrades
Tools: Adobe Adobe XD, Illustrator, Photoshop, Drupal
Deliverables: High-Fidelity Accessible UI Components, Digital Brand Guidelines upgrades
The Challenge
NSF International needed a user-friendly, visually engaging online course catalogue and platform to serve a professional audience across food safety, water quality, and health sectors.
The catalogue and platform had to:
- Communicate technical course details clearly
- Reinforce NSF’s trusted, authoritative brand image and style guides
- Work seamlessly across devices
- Meet accessibility standards
- Communicate technical course details clearly
- Reinforce NSF’s trusted, authoritative brand image and style guides
- Work seamlessly across devices
- Meet accessibility standards
Desktop version of home page with the new image
Tablet version of course information, course registration, courses timelines, and home page
Team Collaboration
This project was a collaborative effort involving:
Project Manager: Coordinated timelines, stakeholder communication, and deliverables
Developer: Implemented the CMS integration, interactive functionality, and ensured technical accessibility compliance
Lead Visual Designer: Led UI design, prototyping, visual asset creation, and accessibility-focused styling
Regular design-development reviews and iterative feedback sessions ensured alignment across design, functionality, and accessibility requirements, resulting in a polished, user-centric platform.
Strategy and Approach
Conducted a competitive audit of elearning and professional training platforms to identify best practices and visual pitfalls
Led stakeholder interviews to clarify user needs and business goals
Reviewed NSF’s existing brand guidelines to ensure the new design extended rather than replaced the visual identity
Key Insight: The audience valued trust, clarity, and efficiency over flashy visuals. This informed a clean, structured design system with intuitive navigation.
Design Process
1. Concept Development
Created moodboards exploring typography, color balance, and iconography within NSF’s brand framework
Presented visual directions to stakeholders, grounded in brand colors but differing in tone and density
2. Wireframes & Prototypes
Developed low-fidelity wireframes to map course filtering, search, and detail page flows
Tested early layouts with stakeholders to refine hierarchy and labeling
3. Visual Design
Designed high-fidelity screens for desktop, and tablet
Introduced a modular UI component library for scalability
Incorporated icon sets for quick visual scanning of course categories
4. Accessibility Integration
Implemented high-contrast text and button styles to meet accessibility
Ensured keyboard navigation compatibility for all interactive elements
Provided alt text guidelines for all imagery
Results
The platform delivered improved usability and stronger visual engagement. Internal teams could easily customize content from the modular toolkit for global campaigns. Metrics showed learner engagement and a more polished brand presentation.
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.
