wkkf_pages.jpeg

[W.K.Kellogg Foundation] Visual Design System Update & Web UX/UI

 

Restructuring the brand visual system to remove design constraints and enable web UX/UI for W.K. Kellogg Foundation


During my time at Nclud, I led the update of the brand visual system and the redesign of the website and mobile platform for the W.K. Kellogg Foundation. As the foundation refined its long-term vision for the next decade, it sought to realign its brand image and digital presence to reflect a more forward-looking direction.

In reviewing the existing brand system, I identified structural limitations in the color palette, typography, and rules of combination that restricted flexibility and visual impact. To support the foundation’s renewed ambitions, I redefined the color architecture and clarified usage principles—preserving core brand equities while removing constraints that limited expansion and expression.

With a more adaptable and scalable visual foundation in place, I translated the refined system into a cohesive web experience. The result was a brand presence that felt younger, bolder, and more dynamic—better aligned with the foundation’s evolving goals and the energy of its next chapter.

This project was completed in collaboration with the Nclud UX team.

 

Client: W.K.Kellogg Foundation

Year: 2023-2024



My Role:

For Branding

  • Design Strategy

  • Brand Visual Language

  • Photography / Video Direction

For Website and Mobile UI Design

  • High-Fidelity Mockups

  • A/B Testing

  • UI Style Guidelines

Project Team: Nclud


 
 

Reusable Blocks / Modular System

 

Pages Built With the Reusable Blocks/Modular System

 

UI Style Guidelines