The Research & Commercial Challenge

Rural communities transitioning into digital tourism spaces face severe operational friction when introduced to complex enterprise software. For the Trombol community, UNIMAS required an online infrastructure to anchor the International Resilience Symposium 2025 (IReS'25), showcase local coastal assets, and directly empower community members to monetize their homestays and regional products.

As the webmaster, the challenge was twofold: building a complex, highly secure multi-role system (Admin, Vendor, Customer) that passed institutional grant requirements, while keeping the user interface friction-free enough for local administrators and micro-entrepreneurs transitioning into digital commerce.

The Objective

To architecture, develop, locally stage via XAMPP, and deploy a responsive web portal capable of managing international academic visibility alongside a localized multi-vendor marketplace. The system required role-based access control, localized English/Malay string translation, and modular data management for homestay inventory.

🎨 Design Approach: Responsive Auto Layout & Constraints

Because the core software engineering sprint demanded rapid local deployment, the interface architecture was systematically back-ported into Figma to stress-test layout responsiveness and establish clean UI design primitives.

The Desktop , Tablet and Phone layout of the Trombol Community Website in Figma.

Advanced Breakpoint Simulation

Using the Figma Free-Breakpoints plugin, the platform’s layout matrices were validated across three key viewport form factors: Desktop, Tablet, and Mobile.

• Fluid Component Constraints: Leveraged relative Auto Layout sizing ("Fill Container" and "Hug Contents") rather than absolute positioning. This ensured that complex UI components refactored dynamically without breaking content boundaries.

Localization Layout Safety: Text containers were mapped with strict vertical expansion rules to absorb structural discrepancies between technical English copy and conversational Bahasa Melayu strings, ensuring button containers never clipped text lines during runtime language swapping.

🛠️ Engineering & Deployment Lifecycle

The platform’s technical backend was constructed using a decoupled WordPress architecture, staged locally within a XAMPP Apache/MySQL environment before remote server provisioning.

WCFM Multivendor Architecture & Role-Based Access Control

Instead of a simple informational landing page, the platform leverages the WCFM Marketplace plugin architecture to implement a strict user management workflow dividing identities into explicit access pipelines:

1. The Customer Pipeline: Visitors register directly via the portal. Accounts are auto-provisioned instantly, granting immediate permission to track active merchandise orders and verify historical homestay reservations.

2. The WCFM Vendor Verification Pipeline: Users navigate to My Account and trigger the Become a Vendor module. This fields a structured registration form detailing their business profile.

3. The Admin Authorization Loop: Submitted vendor applications enter a structural holding state Pending Admin Audit within the WCFM gateway. Upon system administrator approval, an automated trigger dispatches a validation email to the vendor, unlocking their custom frontend portal to edit vendor landing pages and upload marketplace products.

🔗 View Production Handoff Asset

Note: System architecture successfully delivered and handed over to local community administrators in mid-2025. Current live portal reflects client-maintained post-deployment state.

📈 Validated Grant & Operational Outcomes

• Grant Fulfillment: Successfully achieved the core technical milestones set by the RIEC UNIMAS research funding body, deploying a stable live asset for the active international symposium.

• Mitigating Adoption Inertia: Observing real-world user adoption friction where initial marketplace data was restricted to onboarding samples, I authored a comprehensive operational PDF handbook. This technical documentation successfully offloaded training dependencies from the research team to local community administrators.

🧠 Post-Mortem & Future Engineering Upgrades

Solving the UX Authentication Friction

In software engineering, the primary point of system failure is often not the code, but user onboarding. The heaviest development hurdle was sourcing, configuring, and refactoring authentication plugins to yield an interface accessible to both digital natives and older, non-technical community elders.

My Engineering Roadmap for Version 2.0:

• Hyper-Localized Dialect Integration (Bahasa Sarawak): Current localized web architecture utilizes a binary English/Malay string toggle. To aggressively drop user adoption barriers for the regional Trombol workforce, Version 2.0 will introduce a third translation matrix natively supporting Bahasa Sarawak UI strings.

• Localized Audio Tooltips: To assist micro-vendors with low text literacy, the vendor onboarding dashboard will be upgraded with contextual, hover-triggered voice guides in the local dialect to explain inventory fields in real-time.

✨Like this project? Check out my other work: