Juni 2025
DPMA IPB Micro Business Marketplace – Institutional Platform for UMKM Product Promotion
E-Commerce Website UMKM - Strategic Collaboration with DPMA IPB
LaravelReactTailwindMySQLFilamentWirechat
Overview
DPMA Product Development SMEs
The DPMA IPB UMKM Marketplace is a centralized digital platform designed to serve as an official promotional hub for micro businesses (UMKM) under the supervision of DPMA IPB. The platform provides a structured and institution-backed space where UMKM can showcase their products collectively, leveraging DPMA IPB’s credibility to increase visibility and trust.
Unlike conventional commercial marketplaces that prioritize high-volume transactions and competition, this platform focuses on aggregation, legitimacy, and equal exposure. DPMA IPB acts as a curator and facilitator, ensuring that each UMKM is professionally represented within a unified ecosystem rather than operating independently across fragmented channels.
The project addresses both institutional needs such as centralized management and brand consistency and UMKM constraints, particularly limited digital literacy and the inability to manage complex e-commerce systems on their own.
Key Responsibilities
- Designed end-to-end marketplace experience to accommodate multiple UMKM profiles under a single institutional umbrella (DPMA IPB).
- Achieved high usability feedback from UMKM participants during internal demonstrations and early usage phases
- Collaborated with stakeholders from DPMA IPB to align platform structure with organizational and branding requirements.
- Implemented responsive frontend using React & Tailwind, ensuring consistent presentation across devices.
Impact & Results
- Successfully onboarded multiple DPMA-affiliated micro businesses into a single centralized platform without requiring individual store setup.
- Achieved high usability feedback from UMKM participants during internal demonstrations and early usage phases.
- Platform attracted 2,000+ monthly visits, primarily driven by institutional promotion and UMKM product exposure.
Challenges
What I Faced
Varying levels of digital readiness among DPMA-affiliated UMKM, requiring inclusive and low-barrier platform design. Institutional constraints related to branding, governance, and approval processes. Balancing fair product visibility across multiple micro businesses within a single centralized marketplace. Limited early-stage behavioral data, necessitating iterative validation through stakeholder feedback
Problem Illustration
Ketakutan akan Kompleksitas Digital
DPMA IPB did not yet have a centralized digital platform to aggregate, showcase, and legitimize micro businesses under its supervision.
Fragmented Promotion
UMKM memasarkan produk secara terpisah melalui media sosial pribadi, resulting in limited reach and inconsistent presentation.
Lack of Institutional Trust Signal
Potential customers had no clear indication that the products were officially affiliated with or supported by DPMA IPB.
Unequal Exposure
Some UMKM gained visibility while others remained unseen due to differences in digital literacy and marketing capability.
Operational Inefficiency
DPMA IPB lacked a structured way to manage UMKM product data, updates, and visibility from a single system.
Kenyamanan Negosiasi Melalui Chat
Designed and developed a centralized, institution-backed marketplace platform that functions as a digital aggregation and promotion hub for DPMA IPB–affiliated micro businesses.
Centralized UMKM Representation
All participating UMKM are presented under a unified DPMA IPB identity, strengthening credibility and simplifying promotion.
Standardized Product & UMKM Profiles
Created consistent UMKM and product structures to ensure fair visibility and professional presentation across all participants.
Low-Barrier Onboarding
Designed onboarding flows that allow UMKM to showcase products without managing complex store configurations.
Admin-Centric Management
Enabled DPMA IPB administrators to curate, manage, and update UMKM content from a single dashboard.
Solution Illustration
Process
Langkah Pengembangan Portal
1. Discovery & Needs Identification
In the initial phase, I conducted alignment sessions with DPMA IPB leadership to understand institutional goals, governance constraints, and branding requirements. This helped define the product vision and clarify what success looks like for both DPMA IPB administrators and UMKM partners.
Key activities:
- Stakeholder interviews to identify pain points in current UMKM promotion workflows
- Mapping institutional needs vs. UMKM expectations
- Defining product constraints and opportunity areas
2. User Research & Insight Gathering
Since many UMKM lacked digital experience, I conducted informal research with a cohort of UMKM representatives. The goal was not formal user research, but practical insight into their challenges with digital platforms.
Key activities:
- One-on-one conversations with UMKM business owners
- Observing how they currently promote products (social media, messaging apps, etc.)
- Documenting digital skill gaps and usability expectations
3. Information Architecture & UX Strategy
With goals and insights in hand, I developed a sitemap and UX strategy that focused on two core needs:
- Institutional cohesion (DPMA IPB identity and control)
- UMKM simplicity (minimal configuration required)
Instead of separate storefronts, the solution centered around a curated aggregated marketplace model.
Key outputs:
- Sitemap outlining product categories and UMKM entry points
- UX principles emphasizing clarity, fairness, and trust
4. Wireframing & Prototype Development
At this stage, I began sketching mobile-first wireframes to translate the strategy into interface ideas. I focused on:
- Clear product browsing
- Simplified UMKM profile creation
- Admin panels for centralized control
Low-fidelity wireframes evolved into clickable prototypes used for early internal validation.
5. UI Design & Iterative Refinement
After validating the structure through prototypes, I moved to high-fidelity UI design using Tailwind CSS patterns for consistency and responsiveness.
Design decisions prioritized:
- Visual hierarchy that emphasized DPMA IPB’s credibility
- Neutral yet clean product presentation
- Accessible typography and interface elements
I iterated based on feedback from DPMA IPB stakeholders and internal previews.
6. Development Integration
I collaborated closely with backend developers using Laravel and Filament to ensure the UX vision was implementable and scalable. We adopted a modular architecture to allow future expansion (e.g., analytics dashboards, automated search, filtering).
Tasks included:
- Translating UI components into reusable React modules
- Aligning design tokens and utility classes with Tailwind config
- Implementing admin views for curated content control
7. Internal Testing & Validation
Before launch, the team conducted internal walkthroughs, sanity checks, and usability reviews with actual UMKM partners. We prioritized practical ease-of-use over aspirational features.
Key checks:
- Onboarding clarity
- Content visibility logic
- Navigation intuitiveness