VIZCODE

UI/UXUser ExperienceWeb DesignWeb Development

The Problem

Architecture students in the Philippines studying for the board exams are often found buried under pages and pages of review materials.

With the architectural standards and codes mainly written out as text, what other methods can we use to make the study experience better?

The Solution

Combining several learning styles—text-based, visual, social, etc—often leads to deeper comprehension and stronger long-term memory. And so, VIZCODE envisioned itself to be a platform that enhances studying architectural codes with illustrated interpretations, gamified review questions, an AI study assistant, and a country-wide study community.

An online learning platform needed to be built from the ground up, and that’s where I came in.

How did we build an architectural learning platform from scratch?

Basing off of the team’s own first-hand experience of studying for the boards, we had a collection of pain points and nice-to-haves. From those, we found a common thread: that most of them wished the legal standards & codes were illustrated so they could visualize the concept better. Thus, the name “VIZCODE”.

The architects on the team handled the illustrations, while I handled the platform’s interface and experience design.

I built out the user journey & user stories that would eventually form the basis for our sketches, wireframes, initial UI design, and lo-fi prototype—all done in Figma. This included user flows from product consideration, registration, login, purchase, account management, and to actually using the different review modes.

After several rounds of design review and a final approval from the stakeholders, I started the web development of the website using WordPress, HTML / CSS / JS / PHP, and a whole lot of coffee!

When development was done, we conducted a usability testing phase for a select group of users before fully launching the site to the public in April 2025.

As of July 2026, the VIZCODE community has grown to more than 3,000 members, with several of them topping the latest Licensure Examination for Architects (LEA).

Tools

Figma

Illustrator

Photoshop

HTML / CSS / JS / PHP

WordPress

Iterating Improvements

We always strive to listen to user feedback, and so the site has gone through several iterations with refined interfaces & new features added since the initial launch. New features include things such as Review Center Partnerships, Discord Community Integrations, an AI Study Assistant, and more to come in the future!