BPKAD Kabupaten Tanah Laut is a regional government agency responsible for financial and asset management. The old website carried essential information — profiles, news, agenda, gallery, applications, downloads, and contact — but the visual presentation was dense, outdated, and not optimized for modern user expectations.
This redesign transformed BPKAD's website from a conventional information portal into a modern digital platform that is professional, transparent, accessible, and representative of a modern public institution.
Live site: https://bpkad.tanahlautkab.go.id
The Problem
The old BPKAD website suffered from several critical issues that undermined the institution's credibility and usability.
Visual Identity Was Inconsistent and Outdated
The old website used many visual elements competing for attention: large banners, decorative backgrounds, varied colors, and dense layouts. The result was an institutional image that looked unprofessional and misaligned with modern government website expectations.
Key Information Was Hard to Scan
Content like organizational duties, news, agenda, gallery, videos, and articles were spread across many different blocks. Users had to do extensive scanning to find the primary information they needed.
Content Hierarchy Was Unclear
The website displayed many components simultaneously — featured news, popular articles, GPR articles, agenda, photos, videos, and web links. Without strong visual priority, users couldn't distinguish main information from supporting content.
User Experience Lacked Focus
The old navigation was comprehensive but didn't provide a clear flow for new visitors. Users who wanted to learn about BPKAD's profile, services, contact, or latest news had to search through many page elements on their own.
Design Didn't Reflect Transparency and Accountability
As a regional financial and asset management agency, the website needed to project trustworthiness, neatness, openness, and professionalism. The old design still felt like a generic news portal, not a regional financial institution's platform.
Design Direction
The redesign was guided by the concept:
"Transparent, Accountable, and Professional."
Design philosophy
Transparent, Accountable, Professional
Transparency
Information is presented openly and clearly. Citizens can easily find profiles, news, services, and contact details without barriers.
Accountability
Structured layout and clear content hierarchy reflect the institution's commitment to responsible financial management.
Professionalism
Dark navy palette, editorial typography, and symmetrical layout convey the formal authority of a regional financial agency.
Primary palette
Navy
Primary — formal, trustworthy
Orange
Accent — CTA, highlights
White
Background — clean, open
Gold
Secondary — institutional accent
The visual approach uses dark navy as the primary color to convey formality and trustworthiness, combined with orange accents for highlights, call-to-action elements, and interactive components. The layout is made more spacious, structured, and editorial so government content feels easier to understand.
Content Restructuring
The most significant change was reorganizing how information was presented to users.
Content restructure
From scattered blocks to clear sections
Old structure
Multiple content types competing for attention with no clear priority — users had to scan through everything.
New structure
Content reorganized by user priority — each section has a clear purpose and visual weight.
The old website scattered content across many competing blocks. The redesign groups content by user priority — each section has a clear purpose and visual weight.
Redesigned Website Sections
The new website is built around 8 carefully structured sections that guide users through the information they need:
Page architecture
Redesigned website sections
Hero Section
Office photo with large headline and CTA — establishes a strong first impression of BPKAD as a modern financial institution
Simplified Navigation
Clean menu: Home, Profile, Public Services, PPID, News, Contact — focused and easy to navigate
About Section
Institutional profile summary with staff visuals — quickly communicates BPKAD's identity and role
Visi & Misi
Visual cards separating vision and mission — makes organizational direction easy to understand at a glance
Lini Tugas
Grid of BPKAD's main functions — concisely explains the agency's core responsibilities
Bidang-Bidang
Cards for each organizational division — clarifies internal structure and available services
Berita & Kegiatan
Modern news cards with photos and dates — displays institutional updates in an engaging format
Kontak & Lokasi
Map, address, phone, email, and operating hours — makes public service access practical and direct
1. Clear Landing Experience
The homepage opens with a large headline: "Pengelolaan Keuangan yang Transparan dan Akuntabel." This immediately communicates BPKAD's positioning and reinforces its image as a regional financial management institution.
2. Simplified Navigation
The menu is made more concise and familiar. Users can directly access important sections like Profile, Public Services, PPID, News, and Contact without being distracted by too many choices.
3. Institutional Profile Section
The "About Us" section explains BPKAD as a government agency responsible for financial and asset management with principles of transparency, accountability, and professionalism.
4. Public Information Structure
Information such as vision, mission, main duties, and organizational divisions is separated into clear sections. This helps the public understand BPKAD's role without reading long texts.
5. Leadership & Organizational Profile
The redesign displays the Head of Agency and structural officials' profiles with a more formal, neat, and human-centered layout. This adds credibility and institutional proximity to the public.
6. News and Activity Updates
News and activities are displayed using modern visual cards with photos, dates, titles, and summaries. This format is easier to scan than a dense list view.
7. Contact and Service Access
The contact section is made more practical with complete address, phone number, email, operating hours, and location map. Public service information becomes easier to find.
Before vs After
Transformation
Before vs After
Visual Clutter
Competing decorative elements, large banners, varied colors
Dense Layout
Many information blocks crammed into one page
Complex Navigation
Too many menus and dropdowns overwhelming users
Unclear Hierarchy
Main and supporting information visually blended together
Hard to Scan
Users must search through dense blocks to find key info
Generic Portal Feel
Looked like a news portal, not a financial institution
The old website felt like a generic news portal — cluttered, dense, and lacking the professional identity expected from a regional financial management agency.
| Aspect | Before | After |
|---|---|---|
| Visual Style | Cluttered, decorative, outdated | Modern, clean, formal, professional |
| Layout | Many information blocks on one page | Structured sections with clear visual space |
| Navigation | Many menus and dropdowns | More concise and focused menu |
| Content Hierarchy | Main info mixed with supporting content | Clearer content priority |
| Branding | Inconsistent visual identity | Unified colors, logo, typography, and tone |
| User Experience | Users must search for information themselves | More directed information flow |
| Public Trust | Looked like a generic news portal | Looked like a modern official institution website |
Solution Architecture
System architecture
Technology stack overview
The stack was chosen for its suitability for government website needs: modern frontend, stable backend, and an admin panel that's easy for content managers to use.
Why This Stack
- Inertia + React builds a fast, modern user experience without separating frontend and backend into two separate applications
- Tailwind CSS maintains design consistency, especially for color systems, spacing, typography, cards, grids, and responsive layouts
- Livewire + FilamentPHP accelerates admin-side development, allowing content managers to independently manage news, announcements, profiles, organizational divisions, and public service information
Engineering Challenges
Managing Dynamic Government Content
Government websites have many types of constantly changing content: news, announcements, official profiles, documents, and service information. The solution uses FilamentPHP as an internal CMS so admins can manage content independently without touching code.
Combining Modern UX with Laravel Workflow
The website needed to feel modern like a SPA while remaining easy to maintain within the Laravel ecosystem. Inertia.js and React create an interactive frontend without the complexity of separating applications.
Building a Consistent Design System
The redesign required visual consistency across many sections — from hero and news cards to profiles, divisions, and contact. Tailwind CSS builds design tokens, reusable utility classes, and responsive layouts systematically.
Simplifying Admin Operations
Non-technical content managers needed to update content without developer assistance. Livewire and FilamentPHP create a fast, intuitive, and easy-to-use admin panel for daily operations.
Impact
Impact
Who benefits from the redesign
For Citizens
- Easier access to BPKAD profiles, services, and news
- Clear contact information and office location
- Faster navigation to public service information
- Professional portal builds public trust
For BPKAD Staff
- Organizational content displayed cleanly
- Easy content management via FilamentPHP
- No developer needed to update news or profiles
- Structured admin panel for daily operations
For Leadership
- Strengthened institutional image
- Transparent and accountable digital presence
- Modern representation of financial agency
- Ready for digital transformation
For the Institution
- Credible digital identity
- Aligned with modern public communication standards
- Consistent visual branding across all pages
- Foundation for future digital services
Lessons Learned
-
Government websites need clarity before decoration. Design must prioritize readability, structure, and information access before additional visual elements.
-
Strong hierarchy improves public trust. When information is displayed neatly and directionally, the institution looks more credible and professional.
-
Content grouping is as important as interface design. Redesign isn't just changing the look — it's restructuring how information is understood by users.
-
Institutional identity should feel human and accessible. Displaying office photos, staff, leadership, contact, and activities makes the website feel more real, open, and connected to the public.