Industry
Non-Profit & Social Impact
Roles & Services
Web / UI Design & No-Code Development
Promise For All
Building a complete visual identity and story-driven landing page to inspire communities nationwide to launch Promise Programs.
Figma
Adobe Photoshop
Framer
The Challenge
Promise for All needed to transform an undefined landing page into a compelling platform that could inspire school districts, foundations, and civic leaders to start Promise Programs in their communities.
Key Problems
The site had no established visual identity—no color palette, typography system, or brand personality. It lacked the emotional resonance needed to convert visitors into program adopters.
Project Goals
Create a robust, story-driven platform designed to inspire external communities and funders to understand, trust, and ultimately start Promise Programs.
My Role & Approach
Starting from a blank slate, I was responsible for
Brand System Creation: Defining color palette, typography, and visual language from scratch
Visual Storytelling: Crafting a narrative-driven design that communicates impact and possibility
Responsive Design: Ensuring the experience worked seamlessly across all devices
Framer Implementation: Building the site directly in Framer for rapid iteration and launch
Visual Refinement & Grid Systems
Working from the provided Information Architecture, I used Figma to break away from the original site's restrictive layout. I began by designing wireframes to translate the content into a clear visual hierarchy. During this phase, I established a comprehensive visual system that included a new typography hierarchy, a refined color palette, and custom-selected iconography. These icons were integrated to act as visual cues, breaking up dense text and allowing users to navigate key program pillars—like funding models and student resources—intuitively.
Art Direction & Asset Polishing
To achieve a premium, editorial feel, I was highly selective with the photography. Using Photoshop, I handled complex cutouts and specific image treatments to create a sense of depth and modernism. I specifically curated and edited images to include a subtle "hint of yellow"—a nod to the original branding that provided visual cohesiveness without the previous layout's intensity.
Implementation
Once the visual direction was locked, I moved into the implementation phase using Framer. I focused on translating the Figma designs into a high-performance, responsive reality. This ensured that the "clean" vision remained consistent across all devices, providing a frictionless experience for students and a polished home for the program’s partners.
The Responsive Framework
To ensure the "Promise For All" mission was accessible to everyone, I developed a comprehensive responsive system. This involved redesigning the information architecture for smaller screens—transforming horizontal iconography layouts into scannable vertical stacks and optimizing typography for legibility on mobile. By prioritizing a "mobile-first" mindset for student-facing pages, the site remains high-caliber and functional across all devices.
Story-Driven Structure
Rather than leading with data, I structured the page to first connect emotionally—showcasing real impact, then building credibility through program details, and finally providing clear paths to action for different audience types.
Key Deliverables
Complete brand identity system (colors, typography, visual style)
Full landing page design and content structure
Responsive layouts for desktop, tablet, and mobile
Framer development and launch
The Solution
The final result is a strategic shift from information overload to intentional, accessible storytelling. Rather than abandoning the original brand identity, I refined the color palette and balanced the layout to create a sophisticated, professional atmosphere. By stripping away visual noise and implementing a seamless, multi-device framework, I delivered a platform that feels both high-energy and authoritative. The new site serves as a high-performance digital home that finally matches the scale and ambition of Pikes Peak State College and the Legacy Institute.
Industry
Non-Profit & Social Impact
Roles & Services
Web / UI Design & No-Code Development
Promise For All
Building a complete visual identity and story-driven landing page to inspire communities nationwide to launch Promise Programs.
Figma
Adobe Photoshop
Framer
The Challenge
Promise for All needed to transform an undefined landing page into a compelling platform that could inspire school districts, foundations, and civic leaders to start Promise Programs in their communities.
Key Problems
The site had no established visual identity—no color palette, typography system, or brand personality. It lacked the emotional resonance needed to convert visitors into program adopters.
Project Goals
Create a robust, story-driven platform designed to inspire external communities and funders to understand, trust, and ultimately start Promise Programs.
My Role & Approach
Starting from a blank slate, I was responsible for
Brand System Creation: Defining color palette, typography, and visual language from scratch
Visual Storytelling: Crafting a narrative-driven design that communicates impact and possibility
Responsive Design: Ensuring the experience worked seamlessly across all devices
Framer Implementation: Building the site directly in Framer for rapid iteration and launch
Visual Refinement & Grid Systems
Working from the provided Information Architecture, I used Figma to break away from the original site's restrictive layout. I began by designing wireframes to translate the content into a clear visual hierarchy. During this phase, I established a comprehensive visual system that included a new typography hierarchy, a refined color palette, and custom-selected iconography. These icons were integrated to act as visual cues, breaking up dense text and allowing users to navigate key program pillars—like funding models and student resources—intuitively.
Art Direction & Asset Polishing
To achieve a premium, editorial feel, I was highly selective with the photography. Using Photoshop, I handled complex cutouts and specific image treatments to create a sense of depth and modernism. I specifically curated and edited images to include a subtle "hint of yellow"—a nod to the original branding that provided visual cohesiveness without the previous layout's intensity.
Implementation
Once the visual direction was locked, I moved into the implementation phase using Framer. I focused on translating the Figma designs into a high-performance, responsive reality. This ensured that the "clean" vision remained consistent across all devices, providing a frictionless experience for students and a polished home for the program’s partners.
The Responsive Framework
To ensure the "Promise For All" mission was accessible to everyone, I developed a comprehensive responsive system. This involved redesigning the information architecture for smaller screens—transforming horizontal iconography layouts into scannable vertical stacks and optimizing typography for legibility on mobile. By prioritizing a "mobile-first" mindset for student-facing pages, the site remains high-caliber and functional across all devices.
Story-Driven Structure
Rather than leading with data, I structured the page to first connect emotionally—showcasing real impact, then building credibility through program details, and finally providing clear paths to action for different audience types.
Key Deliverables
Complete brand identity system (colors, typography, visual style)
Full landing page design and content structure
Responsive layouts for desktop, tablet, and mobile
Framer development and launch
The Solution
The final result is a strategic shift from information overload to intentional, accessible storytelling. Rather than abandoning the original brand identity, I refined the color palette and balanced the layout to create a sophisticated, professional atmosphere. By stripping away visual noise and implementing a seamless, multi-device framework, I delivered a platform that feels both high-energy and authoritative. The new site serves as a high-performance digital home that finally matches the scale and ambition of Pikes Peak State College and the Legacy Institute.
Industry
Non-Profit & Social Impact
Roles & Services
Web / UI Design & No-Code Development
Promise For All
Building a complete visual identity and story-driven landing page to inspire communities nationwide to launch Promise Programs.
Figma
Adobe Photoshop
Framer
The Challenge
Promise for All needed to transform an undefined landing page into a compelling platform that could inspire school districts, foundations, and civic leaders to start Promise Programs in their communities.
Key Problems
The site had no established visual identity—no color palette, typography system, or brand personality. It lacked the emotional resonance needed to convert visitors into program adopters.
Project Goals
Create a robust, story-driven platform designed to inspire external communities and funders to understand, trust, and ultimately start Promise Programs.
My Role & Approach
Starting from a blank slate, I was responsible for
Brand System Creation: Defining color palette, typography, and visual language from scratch
Visual Storytelling: Crafting a narrative-driven design that communicates impact and possibility
Responsive Design: Ensuring the experience worked seamlessly across all devices
Framer Implementation: Building the site directly in Framer for rapid iteration and launch
Creative Exploration & Visual Systems
Working from the provided Information Architecture, I used Figma to break away from the original site's restrictive layout. I began by designing wireframes to translate the content into a clear visual hierarchy. During this phase, I established a comprehensive visual system that included a new typography hierarchy, a refined color palette, and custom-selected iconography. These icons were integrated to act as visual cues, breaking up dense text and allowing users to navigate key program pillars—like funding models and student resources—intuitively.
Art Direction & Asset Polishing
To achieve a premium, editorial feel, I was highly selective with the photography. Using Photoshop, I handled complex cutouts and specific image treatments to create a sense of depth and modernism. I specifically curated and edited images to include a subtle "hint of yellow"—a nod to the original branding that provided visual cohesiveness without the previous layout's intensity.
Implementation
Once the visual direction was locked, I moved into the implementation phase using Framer. I focused on translating the Figma designs into a high-performance, responsive reality. This ensured that the "clean" vision remained consistent across all devices, providing a frictionless experience for students and a polished home for the program’s partners.
The Responsive Framework
To ensure the "Promise For All" mission was accessible to everyone, I developed a comprehensive responsive system. This involved redesigning the information architecture for smaller screens—transforming horizontal iconography layouts into scannable vertical stacks and optimizing typography for legibility on mobile. By prioritizing a "mobile-first" mindset for student-facing pages, the site remains high-caliber and functional across all devices.
Story-Driven Structure
Rather than leading with data, I structured the page to first connect emotionally—showcasing real impact, then building credibility through program details, and finally providing clear paths to action for different audience types.
Key Deliverables
Complete brand identity system (colors, typography, visual style)
Full landing page design and content structure
Responsive layouts for desktop, tablet, and mobile
Framer development and launch