✦
◈
◎
Back
Digital Transformation

PCUGlobal

Rebuilding the front door of
international education.

PCU's International Office needed more than a refresh — it needed a complete rethink. PCU Global is the ground-up redesign that answers every failure of the original site, live and open source.

UI/UX DesignFull-StackLive CMSMobile-FirstOpen Source
✦ Rebuilt from Zero·◈ Live CMS·◉ Hash Routing·⬡ Mobile-First·◎ Open Source·✺ Flask + Python·✦ 6 Core Features·✦ Rebuilt from Zero·◈ Live CMS·◉ Hash Routing·⬡ Mobile-First·◎ Open Source·✺ Flask + Python·✦ 6 Core Features·
The Build Story

A dead website.
Made live.

io.petra.ac.id — PCU's existing International Office website — was the digital front door for one of Surabaya's leading universities. It had been shipped half-built and left to decay. PCU Global is what happens when you treat that problem seriously.

"zero CTAs? not anymore." ✦
rebuilt the whole thing ◈
live & open source ◉
✦

Diagnose

Before building anything, we mapped every failure of the existing site — six systemic problems, zero assumptions.

◈

Design

Architecture for three distinct audiences. Clear visual hierarchy. Real calls to action. Mobile-first from the first commit.

◉

Deploy

Not just a design file — a live, full-stack system. Flask backend, live CMS, hash routing. Shipped and working.

The Organization

Who the IO Serves

The International Office bridges institutions, students, and cultures across Southeast Asia and beyond. This is the scale of what the old site was failing to represent.

200+

International Students Supported

30+

Partner Institutions

25+

MoU/MoA Reviews / Month

10+

Stakeholder Types

Geographic Coverage

Southeast Asia

Core focus region — coordinating with universities, immigration authorities, and government bodies across Indonesia and ASEAN partner nations.

East Asia & Pacific

Exchange programs and MoU coordination with partner institutions in Australia, Japan, South Korea, and other Indo-Pacific nations.

Europe & Americas

Institutional partnerships facilitated through PCU's global network, spanning European and North American universities.

Stakeholder Network

Multi-Stakeholder Coordination

International education requires navigating 10+ distinct institutional players — each with different protocols, priorities, and communication norms.

Faculties & Academic Units
Immigration Authorities
Hospitals & Healthcare
Banking Institutions
Scholarship Bodies (KNB & TIAS)
Vendor & Service Networks
Partner Universities
Government Bodies
Diagnostic Audit

Six Things That Were Broken

A diagnostic audit of io.petra.ac.id revealed six systemic failures — documented, diagnosed, then fixed one by one.

✕
Identity Crisis

No Value Proposition

The homepage has zero introductory text — visitors arrive to a menu of links with no explanation of who the International Office serves or why it matters.

∅
Dead Links

Incomplete Development

Multiple navigation links use javascript:void(0) as their href — shipped half-built and never finished. Dead links erode institutional trust immediately.

◻
Empty CMS

Abandoned Content Systems

"Recent Posts" and "Category" sections display 0 entries — a blog feature built into the CMS but never populated. The skeleton exists; the content never arrived.

≡
UX Overload

Redundant Navigation

The same menu structure repeats identically multiple times on a single page — cognitive overload without adding hierarchy or value.

☐
Not Responsive

No Mobile-First Design

No evidence of responsive design patterns. International students on mobile encounter a desktop-only experience — a critical gap in 2025.

→
No CTA

Zero Calls to Action

Not a single button, form, or prompt guides visitors toward any next step. A pure directory with no conversion path whatsoever.

Our Response

So we built this.

A ground-up redesign that answers every failure above — live, explorable, and open source.

Explore the Build
Live Preview

Explore the Site

The prototype is live — explore the full interface below or open it in a new tab.

zefanyakharisma-cell.github.io/international-office-website/
The Fix

Six Problems. Six Solutions.

Every failure in the diagnostic had a direct answer in the build.

Fix 01 · Architecture

Audience-First Architecture

Dedicated sections for Inbound, Outbound, Partnership, and Life at PCU — each with dynamic color theming so every visitor immediately knows where they are and what to explore.

Fix 02 · Navigation

Complete Hash-Based Routing

Every page has a real, shareable URL via client-side hash routing — enabling deep-linking, browser back/forward, and bookmarking. No placeholder links, no dead ends.

Fix 03 · Content

Live News Management System

Full admin CMS with article CRUD, trending tracking by visit count, image upload via base64, and role-based access — so the IO team keeps content fresh without touching code.

Fix 04 · Responsive

Mobile-Responsive Design

Built mobile-first with a slide-in drawer navigation, responsive grid layouts, and touch-friendly interactions — accessible to prospective students on any device.

Fix 05 · Conversion

Multi-Step Meeting Request Form

Structured multi-step form with automatic email notification to the IO team — turning passive visitors into active contacts and institutional leads.

Fix 06 · Partnership

Partnership Directory by Continent

Interactive partnership modal organized by continent and country — replacing link-lists with a visual, explorable map of PCU's full global network.

Tech Stack

What Powers It

Eight technologies, zero frontend frameworks — a deliberate choice for performance and control.

Markup

HTML5

Styling

Tailwind CSS v3.4

Logic

Vanilla JavaScript

Backend

Flask + Python 3

Database

SQLite

Server

Gunicorn

Icons

Lucide Icons

Typography

Playfair + DM Sans

No build steps, no bundlers. Just clear code that anyone on the IO team can read and modify.
Open Source

Built to be forked,
adapted, and deployed.

The full source code is on GitHub — for any international office team that wants to start from here instead of from zero.