Intended Figma Design
A continuous visual field extending cleanly across sections.
UI Engineering Case Study · 2026
Impact
Humanity
Designing a modern nonprofit experience beyond the limits of a website builder.
Visit Live SiteI defined the experience in Figma first, then learned an unfamiliar production platform and adapted the implementation without abandoning the design intent.
The Starting Point
A Website Ready for Its Next Chapter
Impact Humanity had evolved, and its website needed to reflect that growth. I began by reviewing the existing experience—its content, visual language, page structure, and established brand—before deciding what should change.
The opportunity was to introduce stronger hierarchy, modernize the presentation, and make the experience work more cohesively across devices without disconnecting it from the organization people already recognized.
Design First
Before Touching Hostinger, I Designed the Experience
I did not let an unfamiliar builder define the design before I understood what the organization needed. I worked in Figma first, using Impact Humanity’s existing brand guidelines to establish the visual target for production.
The mockup brought layout, hierarchy, typography, spacing, imagery, calls to action, and cross-page consistency into one direction. Responsive behavior was part of that thinking from the beginning—not an adjustment reserved for the end.
From Figma to Hostinger
Then Came the Hard Part: Building It
I received access to Hostinger on August 1. It was my first time using Hostinger Website Builder, but the project was already moving. I learned the production environment while actively translating the approved direction into a working multi-page website.
Feedback and access shaped the schedule alongside two other active projects. The work moved from initial review, to a completed Figma direction, through final stakeholder feedback, and into production in just over six weeks.
- Project begins
- Hostinger access
- Figma finalized
- Final feedback
- Production complete
Designing Beyond the Builder
The Design Wanted Full Width. Hostinger Didn’t.
Some compositions in the Figma direction depended on continuous, full-width visual sections. Hostinger’s section structure offered less layout flexibility, and because I was not initially the site owner, custom-code access was also limited. Finalizing parts of the implementation required coordination with the organization’s president for the permissions I needed.
The engineering question became: how can the experience still feel continuous when the platform builds it in separate pieces?
Hostinger Implementation
Matched colors, gradients, imagery, and transitions hide the underlying boundaries.
Working With the Brand
Modernizing the Experience Without Losing the Organization
Impact Humanity already had an identity. My role was to carry it forward, not design over it. I used the established color palette and brand guidance as the foundation for typography, imagery, calls to action, and page-to-page consistency.
The result feels newer and more structured while remaining recognizable as Impact Humanity.
Existing identity
Responsive Engineering
Desktop Was Only Half the Job
The builder could stack a page automatically, but that did not make every section a considered mobile experience. I reviewed spacing, text wrapping, image sizing, CTA placement, section height, and visual hierarchy individually until the smaller layout felt cohesive.
View responsive comparison
Adaptability
Solving Visual Problems Outside the Browser
There were moments when the ideal CSS solution was impractical or inaccessible inside the builder. Instead of forcing Hostinger beyond what it was designed to do, I adjusted specific image assets in Photoshop before bringing them into the website.
The implementation method changed. The design goal did not. That flexibility helped preserve the intended presentation without turning the platform itself into the focus of the experience.
Design intentAsset adjustmentBuilder-ready result
Performance
Good Visuals Still Need to Load Quickly
The site relied on substantial imagery, so optimization became part of production. I compressed image assets with TinyPNG before deployment to reduce unnecessary file weight while preserving the visual quality the design depended on.
SEO & Production Readiness
Building the Site to Be Found
I treated SEO as part of finishing the website: meaningful page titles, meta descriptions, supported focus keyphrases, descriptive hierarchy, internal links, working calls to action, optimized imagery, and responsive presentation.
The project was not complete when it looked right. It was complete when it functioned as a real production website.
From Mockup to Production
One Design. Three Stages.
View the complete transformation
What I Delivered
From Redesign to Working Website
- Brand-consistent Figma redesign
- Multi-page Hostinger implementation
- Responsive layouts and mobile refinement
- Optimized production imagery
- Functional navigation and wired CTA links
- Page-level SEO and descriptive structure
- Fully functional production website
Reflection
What I Took Away
Impact Humanity reinforced something important about UI Engineering: the design environment and the production environment rarely offer the same freedom. My job was not simply to reproduce pixels. It was to understand the intent well enough to preserve the experience when technical constraints changed the implementation.
I entered the project having never used Hostinger and left having delivered a complete production website with it. The path moved through Figma, platform limitations, responsive decisions, asset optimization, SEO, stakeholder feedback, and final deployment. The result was not only a mockup—it shipped.
Define the intentLearn the platformAdapt the methodShip the experience
Continue Exploring