Overview
In collaboration between Halosis and BCA Bank to create an event BCA UMKM Fest a virtual festival and exhibition who works alongside with the Embassy of the Republic of Indonesia to provide an end-to-end work space for MSME businesses that can showcase and sell their products (B2C) and also assistance through various webinars, mentorship, and business matching (B2B) sessions that create market access opportunities for export.
Goal
Designing a website for Business Matching (B2B) and Shop (B2C) adapting from Halosis current systems with minimum effort to develop and still aim to meet the requirements.
Target Audience
Potential buyers form local and international.
Team
Collaborate with Stakeholder, Project Manager, UX Writer.
Role & Responsibility
In this project, I contribute as a UIUX Designer in Halosis:
- I gather requirements from the stakeholder and clients, creating user flow, final mockup, and presenting the result to the stakeholders in a meeting.
- Designing interface and experience for Shop (B2C) and business matching (B2B) features.
Scope
This site focus on a mobile version first and have 2 different feature goals, these are the scope on each site:
Shop (B2C)
- Homepage B2C
- Product list and Profile list page
- Product detail and Profile detail page
- Checkout process page
(Disclaimer: for Shop (B2C) case study i just highlight the journey from homepage B2C until checkout process, because i want to focus on how to adapting Halosis solution into this project)
Business Matching (B2B)
- Homepage B2B
- Category page
- Profile Business page
- Meeting Schedule page
Process
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.
Benchmarking
To align and understand between client needs and current existing system, I analyze several their previous events and competitors:
Sitemap
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 sitemap explains to the client how Halosis current system works and also combine the requirement page.
- Business Matching's sitemap actually has a simple page, only showcases profile merchants page and the buyer can create a meeting schedule.
Exploration
During exploration I define how to adapt Halosis solutions in Shop B2C pages, and another visual for B2B pages. I ended up skipping the wireframe process due to the tight deadline and make iterations of design exploration.
- Shop (B2C)
The clients needs all merchants have a profile store that they can add some descriptions about their brand, products, and links
Based on the requirement, I do exploration only in the homepage shop, category, profile merchant and detail product. The flow checkout process still uses the same current system, only changes the style guide; font, colors and buttons.
- 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.
Struggle
Knowing the goal of the project at Shop (B2C) homepage, the client wants this site to have a flash sale feature. Unfortunately there's not enough time to develop for our tech team, so in this case I try to designing a product section for promo deals and give a small visual touch to bring a vibe flash sale without much effort to develop.
Mockup & Prototype
Shop (B2C) Mockup & Prototype
Business Matching (B2B) Mockup & Protoype
.gif)
Result
After the final meeting with some feedback and revisions, the final design is done. I handover design specs to tech teams for development phase.
Impact
After the event was held on April 16 to May 8, 2021 on the umkmfest.bca.co.id. Here are the outcomes and responses obtained:
