Vivita Philippines Website
A website built three times, each version shaped by where the organization and I were at the time.
I've designed and built the Vivita Philippines website since 2021, working with the same client across three full reworks. Each version reflects a shift in the organization itself, in the technology available to me, and in how much of the process I could own. The client has consistently supplied the website's copy drafts, images, and videos — my role has been to design and build the experience around their content.
Scope:
- 2021–2022: Design, partial development (WordPress + Elementor, alongside a web developer)
- 2023–2024: Design only (React, built by a frontend developer)
- 2025–Present: Design and development, end to end (Framer)
2021–2022 — WordPress, with help
The first version. I designed the site in Figma and rebuilt it in WordPress using Elementor, with plugins like a social media feed sync to pull in Facebook posts automatically. An experienced web developer handled the technical setup; I worked alongside them, translating my own designs into the page builder myself where I could. The site centered on Vivita's mission and the Vivistop makerspace concept, with an FAQ section addressing the questions parents most often asked before signing up.
2023–2024 — Moving off WordPress
By this point, the client had developed brand guidelines of their own, and the site needed to catch up to them. We also made the call to leave WordPress behind entirely, rebuilding on React for a faster, more secure site. This version split the work cleanly: I designed it, and a frontend developer built it. The result was a cleaner, bolder layout — sharper typography, a full-bleed hero, and a simplified "by kids / with kids / for kids" framework that made Vivita's pillars easier to grasp at a glance.
2025–Present — Designer and developer, finally in one
Vivita Philippines became its own independent entity, separate from its parent organization — and the site's messaging had to shift with it, from inviting kids to sign up, to engaging the donors and partners now needed to fund and sustain the program. This time, I built the site myself, end to end, using Framer. No-code tooling meant I could finally act as both designer and developer without handing off to anyone else — closing a gap that had existed since the first version. The current site leads with video, surfaces real impact numbers, and gives partners clearer paths to support the work.
