Home

Home

Case Study

Case Study

Profile

Profile

Download CV

Download CV

FLIK O2O: Where Offline Meets Online

Role

Product Designer

Platform

Desktop and Mobile Web

Timeline

January - February 2024

Teams

CEO, Sales, Marketing, Engineer, and Product

The Situation 📝

FLIK was growing fast online, but when it came to offline stores, there was a problem: no EDC machines, no easy way to link in-store purchases to their digital system. Cashiers had to manually collect customer info, it was messy, slow, and nobody liked it. We needed to fix it and fast.

FLIK was growing fast online, but when it came to offline stores, there was a problem: no EDC machines, no easy way to link in-store purchases to their digital system. Cashiers had to manually collect customer info, it was messy, slow, and nobody liked it. We needed to fix it and fast.

What is FLIK? 🤔

FLIK is a checkout system that helps with payment processing and shipping integration for online sales through websites (Shopify and WooCommerce). Some of the merchants already using FLIK include Jamise Syar’i and ZMNow.id.

Goals 🎯

To make offline activation successful and scalable, we focused on three key objectives:

  1. Create a seamless and efficient flow that allows cashiers to complete tasks quickly with minimal friction.

  2. Ensure shoppers can be easily activated and connected to FLIK’s online platform immediately after completing an offline transaction.

  3. Motivate cashiers to engage with shoppers, not only to manage payments efficiently but also to consistently collect and link shopper data.

The Problem ‼️

To guide our problem-solving approach, we reframed the key challenges using the How Might We format:

  • How might we provide a seamless and fast flow for cashiers?

  • How might we activate shoppers online after the offline transaction?

  • How might we motivate cashier staff to handle shopper payments through FLIK Offline?

What We Found: Talking to Users 🙋

To better understand how Offline Activation would be used in real-world settings, we conducted field visits to potential merchants and observed the complete customer journey, from browsing products, queuing, to completing payment at the cashier. We also interviewed the cashiers to learn about their daily challenges and needs.

  • Cashiers are super busy — they don't have time for anything complicated.

  • Manual data collection = lots of mistakes.

  • If it's not simple and rewarding, they won't use it.

To better understand how Offline Activation would be used in real-world settings, we conducted field visits to potential merchants and observed the complete customer journey, from browsing products, queuing, to completing payment at the cashier. We also interviewed the cashiers to learn about their daily challenges and needs.

  • Cashiers are super busy — they don't have time for anything complicated.

  • Manual data collection = lots of mistakes.

  • If it's not simple and rewarding, they won't use it.

Solutions ✨

User Flow & Stakeholder Meetings 🔍

Based on the initial flow we gathered from observing and talking to cashier staff, we designed a new flow that builds on the original—this time, including steps for handling offline transactions. Of course, this updated flow was developed collaboratively with input from the CEO, Marketing, Engineering, Product, and Sales teams.

Based on the initial flow we gathered from observing and talking to cashier staff, we designed a new flow that builds on the original—this time, including steps for handling offline transactions. Of course, this updated flow was developed collaboratively with input from the CEO, Marketing, Engineering, Product, and Sales teams.

We developed the new flow to simplify and streamline the cashier process and of course we look up to common flow when our merchants using offline transaction like EDC. The previous flow was manual and inconsistent, requiring multiple steps to check memberships, apply rewards, and collect shopper data. The new flow integrates everything into one system, making it faster for cashiers, easier to collect data, and more effective in activating shoppers on FLIK’s platform.

We developed the new flow to simplify and streamline the cashier process and of course we look up to common flow when our merchants using offline transaction like EDC. The previous flow was manual and inconsistent, requiring multiple steps to check memberships, apply rewards, and collect shopper data. The new flow integrates everything into one system, making it faster for cashiers, easier to collect data, and more effective in activating shoppers on FLIK’s platform.

Introducing FLIK O2O: Bridging Offline and Online Commerce 💖

Alright, here it is, FLIK O2O (Online-to-Offline) is our way of connecting what happens in-store with what happens online. It helps shops collect data, track sales, and turn walk-ins into loyal users in the FLIK world.

To make it all work, we’ve got FLIK QRIS. Shoppers just scan a unique QR code at checkout using any mobile banking app or e-wallet. That scan instantly links to their data, so merchants can keep track of purchases and grow their biz with a smooth, connected experience.

Design - High Fidelity 🎨

From our meeting with the stakeholders, we came up with a user flow for offline transactions using FLIK. Based on that flow, we created a simple UI, which looks like this:

From our meeting with the stakeholders, we came up with a user flow for offline transactions using FLIK. Based on that flow, we created a simple UI, which looks like this:

Login Flow for Cashier

If the Cashier Web App is opened without logging in, the user gets redirected to the login page. After entering a valid email and password, the "Lanjutkan" button becomes active. On success, a session starts and the cashier is taken to the shopper’s phone number input. If login fails, an error shows up.

Cashier login also helps track data and gives incentives FLIK Points worth 10% per transaction, with the maximum Rp10,000 to cashier staff.

If the Cashier Web App is opened without logging in, the user gets redirected to the login page. After entering a valid email and password, the "Lanjutkan" button becomes active. On success, a session starts and the cashier is taken to the shopper’s phone number input. If login fails, an error shows up.

Cashier login also helps track data and gives incentives FLIK Points worth 10% per transaction, with the maximum Rp10,000 to cashier staff.

Input Data (Phone Number)

The Shopper Phone Number page is the first step in the flow. When the cashier types a number, the app auto-formats it—removing "62" or "0" at the start so it begins with "8".

The number must be 7–15 digits. If it's invalid, an error shows. Once valid, the "Check" button is enabled. When clicked, the app checks if the shopper is new or existing, then redirects to the right detail page.

The Shopper Phone Number page is the first step in the flow. When the cashier types a number, the app auto-formats it—removing "62" or "0" at the start so it begins with "8".

The number must be 7–15 digits. If it's invalid, an error shows. Once valid, the "Check" button is enabled. When clicked, the app checks if the shopper is new or existing, then redirects to the right detail page.

Input Data - New Shopper

If the number belongs to a new shopper, the cashier is taken to the New Shopper page. There are three fields: full name (required), email (optional but validated), and transaction amount (required, auto-formatted with "Rp" and thousand separators).

Once all required fields are filled, the "Continue" button is enabled. Clicking it creates an order with the status “Waiting for Payment,” generates the payment, and redirects to the payment page.

If the number belongs to a new shopper, the cashier is taken to the New Shopper page. There are three fields: full name (required), email (optional but validated), and transaction amount (required, auto-formatted with "Rp" and thousand separators).

Once all required fields are filled, the "Continue" button is enabled. Clicking it creates an order with the status “Waiting for Payment,” generates the payment, and redirects to the payment page.

Input Data - Existing Shopper

If the number belongs to an existing shopper, the cashier is taken to the Existing Shopper page. It shows the shopper’s info (name, phone, email), a required transaction amount field (auto-formatted with “Rp” and thousand separators), and a rewards section with optional FLIK Rewards and mandatory Merchant Rewards.

The footer displays the total after rewards and a “Pilih Metode Pembayaran” button, which is enabled once the amount is filled in. Clicking “Continue” creates an order with “Waiting for Payment” status, generates the payment, and takes the cashier to the payment page.

If the number belongs to an existing shopper, the cashier is taken to the Existing Shopper page. It shows the shopper’s info (name, phone, email), a required transaction amount field (auto-formatted with “Rp” and thousand separators), and a rewards section with optional FLIK Rewards and mandatory Merchant Rewards.

The footer displays the total after rewards and a “Pilih Metode Pembayaran” button, which is enabled once the amount is filled in. Clicking “Continue” creates an order with “Waiting for Payment” status, generates the payment, and takes the cashier to the payment page.

Payment Flow

After clicking “Continue,” the cashier is taken to the Payment Page showing a QR code and transaction details. Clicking “Cek Status Pembayaran” checks the payment.


If successful, the order is marked “Completed,” rewards are applied, notifications sent, and cashier is redirected to the Success Page. If failed, they're redirected to the Failed Page. Both pages show payment status and key transaction info.

Payment Status

After shopper pay the payment, we defined 4 status: Success, In Progress, Expired, and Failed, to guide cashiers through each transaction outcome. Each screen uses intuitive icons, clear text, and key details to support fast, error-free decisions at checkout.

After shopper pay the payment, we defined 4 status: Success, In Progress, Expired, and Failed, to guide cashiers through each transaction outcome. Each screen uses intuitive icons, clear text, and key details to support fast, error-free decisions at checkout.

Result 🔥 🚀 📈

This project was executed within approximately 3 to 4 weeks, during which we successfully launched and implemented FLIK O2O at several promising merchants, including Erigo, Teras Jahe, and Emado's Shawarma.


In its first month, FLIK O2O generated over 6 billion rupiah in GMV, a figure that has continued to grow steadily in the months that followed.


By generating 6 billion rupiah from FLIK O2O, FLIK saw its GMV jump from 10 billion rupiah to 16 billion rupiah, which is a 60% increase in GMV after merchants started using FLIK O2O.

What’s next? 🚀

FLIK will keep improving to make offline transactions even smoother—for both shoppers and cashiers. And yep, there’s more exciting stuff coming soon, like FLIK E-Wallet and FLIK EDC 😎

FLIK will keep improving to make offline transactions even smoother—for both shoppers and cashiers. And yep, there’s more exciting stuff coming soon, like FLIK E-Wallet and FLIK EDC 😎

Thank you for reading and have a nice day! 😎🤙