LPPM Website

Corporate Website for LPPM Islamic University of Madura

Mobile App Internship

Timeline

Jan - Feb 2023

Sector

Education, University

Role

Project Leader, Front-end Developer

Tools

WordPress

Context

What is the LPPM Portal?

The Institute for Education and Community Service (LPPM) is the central academic hub responsible for managing, tracking, and publishing scientific research and community engagement initiatives at the Islamic University of Madura. This portal serves as the primary digital gateway for lectures, researchers, and stakeholders to access institutional journals, academic proceedings, and official university announcements.

Problem Statement

Situation: The Institute for Education and Community Service (LPPM) faced challenges with its existing WordPress-based website, which had an outdated template, lacked responsiveness across modern devices, and offered a suboptimal user experience. Without a fresh, user-friendly, and professional interface, the website struggled to effectively reflect the institute's vision and mission, creating a gap in communication with its stakeholders. There was a critical need to update the design, select an appropriate theme, and optimize functionality to ensure a seamless, modern, and cross-device compatible web presence.

The Process & Workflow

Task & Action: We adopted an end-to-end development approach—from analyzing the institutional requirements of the university's research division to engineering a modern, content-driven academic portal with seamless third-party journal integrations.

Q&A User Requirements

Based on the comprehensive client brief, the project requirements were systematically structured into actionable development goals:

Homepage & Visual Enhancements

Dynamic Content Slider: Implement a high-converting content slider on the homepage to highlight featured programs and announcements.
Hero & Banner Refinement: Refresh the website's visual identity by updating the primary banner photos and hero section graphics.
Modernized Login Gateway: Update the authentication/login panel with a customized, professional background image.

Information Architecture & Navigation

Menu Restructuring: Revamp, create, and optimize the main navigation menu for improved user experience (UX) and accessibility.
Widget & Footer Optimization: Tailor sidebar widgets and clean up the footer layout to ensure seamless site-wide navigation.
Strategic Vision & Mission Layout: Organize and format the "Vision and Mission" page to align with the university's corporate identity.

Academic Integration & Data Feeds

OJS Journal Integration: Establish a dedicated Journal gateway page synchronized with data from journal.uim.ac.id.
Academic Proceedings Hub: Create a dedicated Proceedings page dynamically pulling or hosting research data from prosiding.uim.ac.id.
Multimedia Hub: Embed and display institutional YouTube videos or a live channel feed to boost engagement.

Institutional Profile & Content Management

Staff Directory & Chart: Design an elegant directory to showcase LPPM staff profiles alongside a clear visual organizational chart.
Event Categorization: Introduce a specialized "Seminar" content category to streamline the publication of academic events, webinars, and workshops.

Final Result

A full demonstration of the Highking booking platform, showcasing the seamless user journey from discovery to confirming a guide for the mountain trek.