Project Overview
LPK UHAMKA (Lembaga Promosi dan Kemitraan) merupakan garda terdepan Universitas Muhammadiyah Prof. DR. HAMKA dalam menjalin kolaborasi strategis tingkat nasional maupun internasional serta mendukung reputasi universitas di pemeringkatan dunia (QS World University Rankings, THE Impact Rankings, dan AppliedHE).
Proyek ini berfokus pada re-design menyeluruh dan re-engineering antarmuka (UI/UX) untuk 14 halaman website utama guna menciptakan citra institusi global yang profesional, kredibel, responsif, dan mudah diakses oleh calon mitra, akademisi asing, maupun sivitas akademika.
The Challenge
Sebelum redesign dilakukan, platform menghadapi beberapa kendala krusial:
Visual & Layout Fragmentation: Desain antarmuka lama belum mencerminkan standar institusi internasional modern dan tata letak informasi antar halaman kurang konsisten.
Bilingual Gap: Informasi kemitraan internasional belum didukung sistem alih bahasa (ID/EN) yang mulus untuk audiens global.
Complex Information Architecture: Data kemitraan (MoA/IA), informasi pertukaran mahasiswa (Erasmus+ / Student Mobility), serta capaian ranking tersebar tanpa hierarki yang jelas.
Technical & Rendering Issues: Performa rendering elemen yang membutuhkan optimasi agar cepat dan stabil di berbagai perangkat.
Solutions & Key Implementation
Kami mentransformasikan seluruh ekosistem visual dan teknis website melalui pendekatan terstruktur:
1. Bespoke Institutional Design System
Membangun palet warna korporat yang harmonis (Deep UHAMKA Blue, Trust Cyan, dan Warm Amber Accent).
Tipografi modern berbasis sans-serif dengan hierarki visual yang tegas dan keterbacaan tinggi.
Desain kartu berbasis glassmorphism, micro-interaction halus, serta visualisasi data statistik yang interaktif.
2. Seamless Bilingual Architecture (ID / EN)
Mengembangkan engine alih bahasa terintegrasi berbasis client-side memory (local storage), memungkinkan pergantian bahasa instan (Indonesia ↔ English) di seluruh komponen halaman tanpa reload yang lambat.
Memastikan terminologi akademik dan institusional disajikan secara presisi untuk delegasi internasional.
3. Centralized Partnership & Ranking Hub
Ranking Division: Section khusus yang menampilkan performa universitas pada QS Asia University Rankings dan THE Impact Rankings secara terstruktur.
Collaboration Gateway: Navigasi intuitif untuk direktori mitra, template dokumen legal (MoA/IA), serta pelaporan kerja sama.
International Mobility: Halaman informatif untuk beasiswa luar negeri, program Erasmus+, dan panduan akomodasi bagi mahasiswa asing.
4. High-Performance & Responsive Engineering
Pengujian tampilan pixel-perfect di desktop, tablet, dan smartphone.
Mengeliminasi script error, mengoptimalkan tata letak DOM, dan memastikan accessibility serta keramahan SEO sesuai standar web modern.
Results & Impact
14+ Halaman Institusi Berhasil Dimodernisasi dengan konsistensi visual 100%.
Pengalaman Pengguna Global Meningkat: Navigasi informasi kemitraan kini jauh lebih cepat ditemukan oleh calon mitra asing.
Reputasi Brand Akademik Lebih Kuat: Tampilan visual merefleksikan universitas unggul bertaraf internasional yang siap menyambut kolaborasi global.
Tech Stack & Tools
Platform / CMS: WordPress Core
Frontend Architecture: Modern HTML5, Custom CSS3 Design System, Vanilla JavaScript
Design & Prototyping: Figma, UI Systems & Micro-interactions
Optimization: Responsive Web Design (RWD), Client-side Localization Engine, Performance Tuning
