BCA UMKM Fest 2021
Provide white-label e-commerce design services for a virtual MSME festival, generating an IDR 100M transaction value and engaging 1.8K sellers & 12K buyers.
Role - Team
UIUX Designer - Stakeholder, PM, UX Writer.
Date
March - April 2021
Event results
Here are the outcomes and responses obtained
Launched right on schedule, the platform successfully connected sellers and buyers generated Million in direct retail transactions, and opened long-term B2B export channels for local entrepreneurs.
Buyers
Sellers (Merchants)
Products to sale
THE CONTEXT
During the height of the COVID-19 pandemic in mid-2021…
Indonesian MSMEs lost opportunities to sell products through in-person events. Bank BCA collaborated with Halosis to build a virtual exhibition platform, giving local businesses a digital stage to reach customers.
This virtual festival and exhibition provide a comprehensive workspace for MSME businesses. This platform allowed them to showcase and sell their products (B2C), while also offering assistance through various webinars, mentorship, and business matching (B2B) sessions. These initiatives were aimed at creating market access opportunities for export.
OPPORTUNITY
Hybrid B2C-B2B Ecosystem
Creating a website for Business Matching (B2B) and Shop (B2C) involved adapting from Halosis' current systems with a focus on minimizing development effort while ensuring that all requirements were met.
White-Label Component Adaptation
An opportunity to mature the Design System through a white-label approach. Instead of designing the UI from scratch, designers adapted existing Halosis UI components and harmonized them with BCA’s Brand Guidelines. The resulting design system could serve as a foundational scalable UI library for future virtual events.
Unified Dual-Persona Experience (B2C/B2B)
Designed an interface that accommodates two distinct user types everyday retail customers (B2C) and large-scale buyers or potential export partners (B2B) within a single, consistent platform.
Solution
Dual-Purpose Platform
Enterance Page
To serve two distinct user personas seamlessly, the landing screen guides visitors into two dedicated modules: a retail marketplace for individual shoppers and a B2B business matching portal for export partners.
Retail Shop (B2C)
An online marketplace where general consumers could buy local MSME products directly.
Business Matching (B2B)
A dedicated scheduling feature connecting local sellers with large buyers and international export opportunities through partners like the Indonesian Embassy.
understand user goal
The core design approach unifies these two distinct user paths into a single ecosystem:
Delivering a seamless retail shopping experience (B2C) while opening a structured channel for formal business networking (B2B) all while adapting the existing Halosis system to keep technical development fast and efficient.
Product Research
To align and understand between client needs and current existing system, I analyze several their previous events and competitors:
Product mapping
Define a big picture for easier the stakeholder and clients to have the same perspective
Create a sitemap that makes it easier for the stakeholder and clients to have the same perspective about the project, there is each site:
Shop's explains to the client how Halosis current system works and also combine the requirement page.
Business Matching actually has a simple page, only showcases profile merchants page and the buyer can create a meeting schedule.
Brand guideline
For the color, looks and feels of the site I adapted from BCA UMKM Fest style guide, all the assets like banner, illustration and icon are provided by the client.
exploration
During exploration I define how to adapt Halosis solutions in Shop B2C pages, and another visual for B2B pages.
I mapped the existing Halosis UI and conducted a component mapping exercise, then explored several layout options that required minimal changes to Halosis’s existing database/API structure, while still maintaining a seamless BCA-branded experience.
Halosis Shop System Wireframe
Business Matching
Business Matching (B2B)Because this business matching feature has never existed in Halosis, so I explore based on the client's requirements, create multiple designs before deciding which one suits the best.
Technical Challenge
The client wants this site to have a flash sale feature.. but it's time-consuming to build
Knowing the goal of the project at Shop (B2C) homepage, unfortunately there's not enough time to develop for our tech team, so in this case I try to leveraged cognitive biases through visual elements such as badges, scarcity indicators (e.g., “Jangan sampai kehabisan”), and high-contrast promotional banner cues to encourage purchase decisions and create buying urgency without relying on a backend-driven countdown timer.
Design Results Shop Page
Design Results Business Matching
Things that I learned
This project give me valuable lessons, especially when dealing with numerous requests and revisions. I discovered the importance of finding innovative solutions when technology and time constraints posed challenges.
When complex features like a Flash Sale engine required significant development effort, I used lightweight visual solutions such as promotional badges to maintain product appeal without adding development overhead. This Low-Effort, High-Impact Design approach enabled faster feature experimentation and MVP testing while working within technical constraints.
These situations pushed me to think creatively and adapt my designs to still meet user needs within the given limitations. It enhanced my problem-solving skills and reinforced the significance of effective communication with both clients and development teams.
