VIVITA PH Website Redesign

Overview

VIVITA Philippines is a creativity accelerator and non-profit organization running makerspace programs for kids and youth across the country, from robotics competitions and prototype workshops to mobile makerspaces that travel to underserved communities. With 3,200+ youth participants and programs reaching schools, libraries, and government organizations nationwide, VIVITA had real impact to show. What they lacked was a website that showed it.

When they came to us for a redesign, the task wasn't just aesthetic, it was strategic. The site needed to work simultaneously for three very different audiences: kids and families discovering VIVITA for the first time, institutional partners like schools and government bodies, and donors and sponsors who needed to understand the mission and feel confident investing in it.

As Lead UI/UX Designer and Web Designer, I was responsible for translating that complexity into a single, coherent digital experience.

The Design Problem

VIVITA Philippines' previous web presence did not clearly communicate who they are, what they do, or how to get involved. A non-profit with this scope of programming, five distinct makerspace programs, a physical hub in Baguio City, mobile outreach, sponsorship pathways, and annual impact reports, carries a significant content challenge. The risk with any redesign was either oversimplifying the organization (losing credibility with institutional partners) or overwhelming first-time visitors with too much information before they understood why it mattered.

The core design question: how do you make a mission-driven organization feel inviting, credible, and action-oriented all at once — for audiences with completely different needs?

Understanding the Audiences

Three distinct user groups shaped every structural and visual decision:

• Kids and Families — curious about programs, likely arriving through social media or word of mouth. They need energy, visual storytelling, and a quick sense of what VIVITA actually feels like. Navigation complexity is a barrier; warmth and clarity are entry points.

• Institutional Partners — schools, LGUs, government agencies, and companies exploring collaboration. They need program specifics, credibility markers (impact data, organizational background), and a clear path to starting a conversation. For this audience, the site functions almost like a prospectus.

• Donors and Sponsors — individuals and organizations who want to understand reach and outcomes before committing support. They need transparent impact data, specific ways to contribute (scholar sponsorships, program support), and a sense of the organization's legitimacy and stewardship.

Designing for all three without fragmentation meant establishing a strong, unified visual identity and a navigation structure that let each user type self-select their path without the site ever feeling like it was built for someone else.

Key Design Challenges

1. Leading with Mission, Not Just Programs Non-profits often fall into the trap of leading with their own structure rather than their audience's emotional entry point. VIVITA's programs are genuinely exciting, but a list of program names means nothing to someone who doesn't already know the organization. I designed the homepage to open with the why the stark reality of untapped youth potential in the Philippines, and VIVITA's response to it before introducing the what.

2. Making Impact Data Feel Human VIVITA has strong numbers: 3,200+ youth visits, programs across multiple cities, partnerships with educational institutions and government bodies. Raw statistics rarely move people. I worked to integrate this data into the narrative flow of the site rather than isolating it in an "impact" section that visitors could skip. Impact counters and testimonials were placed in proximity to program descriptions, so credibility and context reinforced each other.

3. Multiple Calls to Action Without Competing The site needed to serve at least four distinct conversion goals: getting families to explore programs, getting institutions to inquire about partnerships, getting donors to contribute, and getting visitors to subscribe for updates. Too many competing CTAs create decision paralysis. I designed a hierarchy where the primary CTA shifted contextually depending on which section of the site a visitor was engaging with, using visual weight and placement to guide attention rather than repeating the same button everywhere.

4. Designing for a Mission That's Also a Place Unlike most non-profits operating purely online, VIVITA has a physical makerspace Vivistop Baguio that is central to who they are. The site needed to convey the tangible, hands-on quality of the space through imagery and layout, making users feel the energy of the environment even through a screen. This informed my approach to the photo-heavy sections, the program cards, and the overall spatial generosity of the layout.

5. Responsiveness Across a Diverse Audience VIVITA's beneficiaries come from all over the Philippines, including areas with variable internet connectivity and device quality. The site was designed with performance and mobile usability as a baseline requirement, not an afterthought ensuring the experience held up for users on mid-range Android devices just as well as desktop browsers.

Design Process

Discovery & Stakeholder Alignment

I began by mapping out the full scope of VIVITA's programs, content types, and organizational structure, understanding what existed, what needed to be communicated, and what could be simplified. I reviewed the existing site and comparable non-profit and youth organization websites in the region to identify patterns that worked and gaps to avoid.

Information Architecture

The site's content breadth, five (5) core programs, impact reports, multiple support pathways, news, and a partnership section, required careful IA work before any visual design began. I organized navigation around user intent rather than organizational hierarchy, so a first-time visitor could orient themselves within seconds while a returning donor or partner could navigate directly to what they needed.

Key navigation decisions included surfacing "Core Programs" and "Support Us" as top-level items (the two most action-oriented sections), keeping "Impact" accessible without overwhelming the primary navigation, and structuring the "About" section to serve institutional audiences who needed organizational credibility.

Visual Direction

VIVITA's brand already carried a bold, playful energy — the kind that belongs to a creativity-first organization for young people. The visual direction for the redesign needed to honor that while elevating it: making it feel polished and trustworthy to adult partners and donors, without losing the vitality that speaks to kids and families.

I worked with a layout that used generous imagery, high-contrast typographic moments, and enough white space to let the photography breathe. The result is a site that feels energetic without being chaotic — structured enough to communicate credibility, open enough to invite exploration.

Component Design & Layout

Each section of the site was designed as a distinct content moment with its own visual logic. The homepage hero leads with a bold mission statement and a video backdrop of real makerspace activity. Program cards were designed to show the essence of each program — its name, visual identity, and an entry point to learn more — without front-loading too much information. The impact section pairs quantitative data with qualitative testimonials from both educators and students, grounding the numbers in real voices.

The "Partner with Us" and "You Can Help" sections were given distinct visual treatments to signal a shift in audience and intent, while remaining visually consistent with the rest of the site.

Responsive Design

All layouts were designed mobile-first, with specific attention to how the program grid, impact counters, testimonial carousel, and support pathways adapted across screen sizes. Navigation collapses to a clean mobile menu that preserves the full site hierarchy without burying key sections.

Design Outcomes

The redesigned site launched in mid-2025 and serves as VIVITA Philippines' primary platform for community building, donor engagement, and institutional outreach. Key design outcomes include a clearly navigable structure that serves three distinct audience types without fragmentation, a homepage that communicates VIVITA's mission and scale within the first scroll, and program pages that give institutional partners the depth they need to evaluate collaboration.

The site also reflects something less quantifiable but equally important: it gives VIVITA Philippines a digital presence that matches the ambition of what they're actually doing on the ground.

Reflection

This project was a reminder that the most interesting design challenges aren't always the most technically complex ones. VIVITA's redesign was fundamentally a clarity problem, how to communicate a rich, multi-faceted mission to people with different needs, without losing anyone along the way. The design work that mattered most happened before a single pixel was placed: in the IA decisions, the audience mapping, and the choice of what to say first. When you get that right, the visual design has a foundation to stand on.