Introduction

During my internship, I spearheaded the institutional website development project for Tiga Serangkai University (tsu.ac.id). An academic institution requires a reliable digital platform that balances prospective student recruitment with active student access. Operating as a web designer, researcher, and WordPress developer, I managed the project end-to-end. I conducted stakeholder interviews, created Figma prototypes, and built a custom WordPress site using Elementor and custom CSS.

Project Overview

Tiga Serangkai University needed a redesigned institutional web platform to improve campus communication and boost prospective enrollments. Their existing digital presence struggled to present academic programs and official news efficiently. Information was often difficult to locate. As the lead intern developer and designer, I was tasked with modernizing the site architecture. My main goal was to deliver an intuitive, accessible experience for students, faculty, and institutional stakeholders.

My Role

In this project, I filled a hybrid role spanning research, UI design, and front-end development.

First, I executed user and stakeholder research to uncover core navigation pain points.

Second, I translated those research insights into high-fidelity Figma designs.

Third, I stepped into my role as the WordPress developer. I converted those visual concepts into a functional, highly responsive website using Elementor and custom CSS.

Design & Development Process

My process integrated user-centered design practices with structured WordPress development.

I began with stakeholder research, interviewing campus administrators, faculty members, and prospective students. These sessions helped identify key information hierarchies and priority user journeys. Using these findings, I built interactive wireframes and UI components in Figma.

Once the designs received stakeholder approval, I initiated development in WordPress. I utilized Elementor to build flexible, component-based page layouts. Where default builder styles fell short, I wrote modular custom CSS for typography alignment, custom buttons, and micro-interactions. Finally, I thoroughly tested the layout across various screen resolutions to guarantee responsive behavior before launch.

Key Features

• Research-Backed Navigation: I structured intuitive menu paths based on user research and stakeholder interviews.
• Figma UI Design: I crafted modern, high-fidelity prototypes aligned with institutional brand guidelines.
• Dynamic Program Directory: I built accessible course listings that help prospective students evaluate academic paths.
• Mobile-First Responsiveness: I adapted every page layout to render smoothly across smartphones, tablets, and desktops.
• Custom CSS Components: I authored custom styling rules to refine card shadows, hover effects, and section padding.
• Accessible Content Architecture: I organized administrative templates so non-technical staff can post institutional updates easily.

Challenges

Executing an institutional website development project involves organizing vast amounts of information for diverse user personas. High school applicants, current undergraduates, and faculty members all require vastly different content. Presenting these varied resources on a single homepage without overwhelming visitors was a primary technical hurdle.

I solved this by creating a segmented navigation system in Figma and testing it with real users prior to coding. During development, I implemented custom CSS tab structures and dynamic display widgets in Elementor. This setup allowed visitors to filter news and academic updates instantly based on their specific persona.

Technologies Used

• User Research & Stakeholder Research: Methodologies used to collect user feedback and map informational architecture.
• Figma: Interface design tool used to prototype and test high-fidelity visual UI layouts.
• WordPress: Core content management system powering the institutional platform.
• Elementor: Page builder utilized for site assembly and layout construction.
• Custom CSS: Written to execute brand-specific styles and responsive media queries.

Project Outcome

My work provided Tiga Serangkai University with an intuitive, modern institutional platform. By combining research-driven UI design with clean WordPress development, I significantly reduced navigation friction for students and faculty. The updated architecture simplified prospective student onboarding and made institutional updates effortless. This project highlighted my ability to bridge UX research, visual design, and hands-on web development.