📅 Duration: 1.5 Months (2025)
👨💻 Role: Full-stack Designer & Developer
📂 Category: Academic Website Redesign
🌐 Platform: WordPress with Elementor Pro & Crocoblock
🎨 Design Tools: Figma
🛠️ Tech Stack: WordPress, Elementor Pro, Crocoblock (JetEngine, JetSmartFilters), Google reCAPTCHA, Security Headers, SMTP
The redesign of usg.ac.id was aimed at transforming the university’s online presence into a modern, professional, and user-friendly academic website. The new design emphasizes improved usability, streamlined navigation for students and faculty, and secure infrastructure for administrative management.
The project involved not only UI/UX improvements but also the implementation of dynamic academic content (faculties, study programs, and news) using Crocoblock’s JetEngine and advanced filtering with JetSmartFilters.
- Category: Website Redesign
- Platform: WordPress with Elementor Pro + Crocoblock
- Design Tools: Figma
- Tech Stack: WordPress, Elementor Pro, JetEngine, JetSmartFilters, Google reCAPTCHA, Security Headers, SMTP
Created a full UI/UX redesign in Figma
Developed the website with Elementor Pro and Crocoblock plugins
Built custom post types & dynamic content for Faculties, Study Programs, and Announcements
Integrated JetSmartFilters for filtering study programs dynamically
Set up security headers, SMTP, and Google reCAPTCHA to enhance security and prevent spam
Delivered a tutorial guide for the university’s admin team to manage content independently
| Week | Milestone |
|---|---|
| Week 1 | Research, Content Mapping & Wireframing in Figma |
| Week 2 | High-fidelity UI Design + Design Approval |
| Week 3-4 | WordPress Development with Elementor Pro & JetEngine |
| Week 5 | Dynamic Content Integration (Faculties, Study Programs, News) |
| Week 6 | Optimization + Security Setup + Final Delivery & Training |
One of the biggest challenges was ensuring scalability for future faculty and program websites. The solution was to design a modular structure using Crocoblock’s JetEngine, so additional program or faculty pages can be created without breaking the core structure.
Another challenge was maintaining high performance despite using multiple dynamic queries. This was resolved with SpeedyCache optimization, image compression, and proper security headers setup.
Through this project, I learned how to balance UI/UX clarity, dynamic content management, and server performance in a large-scale academic website.
