A product's tone of voice builds trust and shapes brand perception, especially for Flip, as users often hear about us through word-of-mouth. The app serves as their first impression of our brand. In this article, Hanif discusses the importance of Flip’s in-app persona and how we brought it to life.

<img src="https://tech.flip.id/content/images/2025/03/image6.png" alt="More Than Words: The Story Behind Flip&#x2019;s In-App Voice">In today&#x2019;s competitive digital landscape, an app is much more than a functional tool. It&#x2019;s like a little brand ambassador living on your phone. This makes tone of voice one of the most important representatives of any brand in the app, especially for Flip.In this article, I&#x2019;ll explain why Flip&#x2019;s in-app voice means more than the average app, I&#x2019;ll also try to make it as less boring as possible (keyword: try).&#xA0;<h3 id="tone-of-voice-in-ux-writing-a-brand%E2%80%99s-hidden-superpower">Tone of Voice in UX Writing: A Brand&#x2019;s Hidden Superpower</h3>Tone of voice is more than just the words we choose, it&#x2019;s the attitude, the personality, and the &#x2728;vibe&#x2728; that comes across every time users interact with the app. Whether it&#x2019;s through notifications, payment confirmations, error messages, or the help center, the way Flip communicates has a direct impact on how users feel about the brand. A good tone of voice, implemented correctly, can build the right relationship between the user and the app.For Flip, the tone of voice helps create a sense of approachability and ease. It reassures users and reflects the brand&apos;s values. It&#x2019;s a bridge to trust through consistency and clarity. This is particularly important in financial services, where trust and reliability are essential. Flip&#x2019;s tone of voice ensures that users feel supported, whether they&#x2019;re making their first transaction or resolving an issue.&#xA0;<h3 id="the-power-of-word-of-mouth-in-flips-success">The Power of &quot;Word of Mouth&quot; in Flip&apos;s Success</h3>Here&#x2019;s a stat to flex: Nearly 60% of Flip users heard about us from a friend, family member, or co-worker. That&#x2019;s a whole squad of unpaid brand ambassadors (we love you, loyal users&#x1FAF0;&#x1F3FB;). It&#x2019;s one of the most unique aspects of Flip&#x2019;s success.This organic form of growth makes the experience within the app even more critical. Our in-app persona becomes their first impression of Flip as a brand.Competitors might focus on catchy advertisements or high-visibility campaigns to build brand image and first impressions. However, for Flip, every user interaction within the app contributes to building its brand image, especially for new users. A helpful and friendly tone can turn a simple transaction into a moment of reassurance. A clear and direct message can reduce frustration when things go wrong. And a touch of warmth or humor can create a lasting positive impression.Since users are primarily referred by people they trust, Flip&#x2019;s tone of voice plays an important role in meeting and exceeding expectations. So if a user downloads Flip because their friend has said how great it is (it is), the app needs to meet that expectation. They expect an experience that aligns with the positive things they&apos;ve heard, whether that&#x2019;s ease of use, beneficial features, or helpful and friendly customer support. The brand&#x2019;s tone of voice must consistently reflect the values that lead to these recommendations in the first place.<h3 id="representing-flip-in-the-app">Representing Flip in the App</h3>To correctly represent Flip, we first need to really get to know Flip as a brand and the values they hold as a company. We can define Flip&#x2019;s voice into three main values: Fair, Smart, and Friendly.<h3 id="1-fair">1. Fair</h3><figure class="kg-card kg-image-card"><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXd_J9ReqqNKOcEyC0gNJC8VYmuwlKDMNvOcvSpGK8wWeB3syuLlr_c69yaYtlG0_7Thj4dqJJXQdHK96BtYaoWiPBXBWkjGcKuNHsNr1ss7voD33E8xmuI1WhuxRLLtSV0Bn5Rn1g?key=rtYSAsVNAtH9SwU9qlzHOw" class="kg-image" alt="More Than Words: The Story Behind Flip&#x2019;s In-App Voice" loading="lazy" width="543" height="277"></figure><figure class="kg-card kg-image-card"><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfR0i3mstj14mLnULidQKq7ndlJ_4JsEdTDIcU9z9E_O0WF788slTxFguQQQieOOzTkX9tDXpf9dL2Ye8xS0nashVjDcifeHs1gHvIA6gStmSIwBWwhFx4Hv8wA5AzhL8-DPtAh8w?key=rtYSAsVNAtH9SwU9qlzHOw" class="kg-image" alt="More Than Words: The Story Behind Flip&#x2019;s In-App Voice" loading="lazy" width="542" height="555"></figure><ul><li>Transparency &amp; Trust: Flip&apos;s communication is rooted in honesty and fairness. The goal is to ensure users always feel like they&#x2019;re getting clear, straightforward information. This means no hidden terms or confusing jargon, it&#x2019;s all upfront.</li><li>Equality: We&#x2019;re inclusive and treat all users equally, regardless of their experience with financial services. This fosters a sense of trust and approachability.</li><li>Benefit-Focused: We&#x2019;re not obsessed with how great our product is, we only care about what&#x2019;s in it for you.&#xA0;</li></ul><h3 id="2-smart">2. Smart</h3><figure class="kg-card kg-image-card"><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXerVUJWC93UnoGr_e_C83vQkN_qjeWODSKG8tme08y7oVjim1cAy5wbLBl3wugRrCu96XujqLpPLsHsB-YrrkKAk2ub4POCBwycWWTgJivI_THlouzMKS8Mg1IO8A4l9HCx5f81Rw?key=rtYSAsVNAtH9SwU9qlzHOw" class="kg-image" alt="More Than Words: The Story Behind Flip&#x2019;s In-App Voice" loading="lazy" width="520" height="369"></figure><figure class="kg-card kg-image-card"><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXeBqil6WMPBK4Hyud6pPVAE83MfK9_BXZEaIuJjETW3a3kpBgT4JH1kjPqZr60fW8Q_MdKT4_Lyji8XJPfJan0bgaUGeg7AFjzBKGkm7dwEyrpSG_FOToZuoskz-ckoR7ol4vUDcA?key=rtYSAsVNAtH9SwU9qlzHOw" class="kg-image" alt="More Than Words: The Story Behind Flip&#x2019;s In-App Voice" loading="lazy" width="503" height="512"></figure><ul><li>Confidence with Humility: Flip communicates with intelligence, but without arrogance. We&#x2019;re not trying too hard to sound smart. Instead, we want users to feel smart and in control of their financial choices.</li><li>Clarity in Complexity: Finance can be complicated, so the &quot;Smart&quot; aspect focuses on simplifying these complexities. Our words should educate users by breaking down complicated processes or financial terms into digestible pieces, making sure they understand and feel empowered.</li><li>Efficiency: The tone is concise and to the point. Flip respects the user&apos;s time by making the content skimmable and easy to read.</li></ul><h3 id="3-friendly">3. Friendly</h3><figure class="kg-card kg-image-card"><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdXt_-Vc9wWyFppnAzYElZOosyVMMJzYW5-oRPLPLOQtTDZpiyJ6emm27L8X_i7PgeAx4xXBmIpsbj1ZKaWkowwnz-iKtx4dHazN5nWHgaHaezbskzaLAIidYDjRbNEprcVnBaPiA?key=rtYSAsVNAtH9SwU9qlzHOw" class="kg-image" alt="More Than Words: The Story Behind Flip&#x2019;s In-App Voice" loading="lazy" width="600" height="404"></figure><figure class="kg-card kg-image-card"><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXeyMsJLdvVlih-I0E4DqBxmTyXIg02ZcBY_83iXHOzngGG3UKDLTt9GbtSx5dUe0c4rKbClxdag4FTrsq3e5Yp_kFy9VHRo6-aeh6VrxcAHIsWOnWQRRrUZU8egYHplYESOTth2?key=rtYSAsVNAtH9SwU9qlzHOw" class="kg-image" alt="More Than Words: The Story Behind Flip&#x2019;s In-App Voice" loading="lazy" width="586" height="600"></figure><ul><li>Approachable &amp; Relatable: Flip&#x2019;s voice feels like a conversation with a helpful friend. The language is warm, welcoming, and personable, designed to make users feel comfortable and understood.</li><li>Supportive: Especially in financial services, users can feel anxious or unsure. Flip&#x2019;s you&#x2019;ve-got-this attitude, reassures users, provides clear guidance, and helps them easily navigate challenges.</li><li>Positive Vibes: The friendly aspect brings lightness to the experience, using a tone that&#x2019;s uplifting without being over the top.</li></ul><h3 id="how-did-we-bring-the-voice-to-life">How did we bring the voice to life?</h3>Any UX writer will tell you that having a tone of voice is one thing, but implementing it is another. That&#x2019;s where the fun and the challenge begins.To help our writers bring Flip&#x2019;s voice to life, we created a persona. Not just any persona, but one that felt true to Flip: clear, kind, quick on its feet, and always a few steps ahead.At first, we tried to find one well-known personality that captured it all. But Flip isn&#x2019;t one-dimensional, and neither is our voice. So instead of forcing a fit, we borrowed traits from a few familiar faces. For example (this genuinely is just an example): the quick wit of Komeng, the directness of Mamah Dedeh, and the smarts of Sri Mulyani.Unfortunately, we can&#x2019;t show you our persona (top secret stuff &#x1F575;&#xFE0F;), but you get the gist &#x1F609;In the end, Flip&#x2019;s in-app voice isn&#x2019;t just about sounding nice, it carries the responsibility of shaping a user&#x2019;s very first impression of the brand, the company, and the values it holds. Every interaction becomes a moment to affirm why Flip is worth the recommendation. It needs to convey trust, reliability, and overall familiarity, like a friend you&#x2019;ve known for years.After all, you wouldn&#x2019;t trust your money with an absolute stranger, would you? &#x1F928;<hr>Hope you enjoyed the lessons learned and solution as well it will inspire you to craft your unique style.&#xA0;We&apos;re a group of passionate individuals who thrive on collaboration and pushing boundaries.<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://tech.flip.id/content/images/2025/03/image.png" class="kg-image" alt="More Than Words: The Story Behind Flip&#x2019;s In-App Voice" loading="lazy" width="1921" height="1081" srcset="https://tech.flip.id/content/images/size/w600/2025/03/image.png 600w, https://tech.flip.id/content/images/size/w1000/2025/03/image.png 1000w, https://tech.flip.id/content/images/size/w1600/2025/03/image.png 1600w, https://tech.flip.id/content/images/2025/03/image.png 1921w" sizes="(min-width: 720px) 720px"><figcaption>Illustration: Join us by applying via flip.id/career</figcaption></figure>

In today’s competitive digital landscape, an app is much more than a functional tool. It’s like a little brand ambassador living on your phone. This makes tone of voice one of the most important representatives of any brand in the app, especially for Flip.In this article, I’ll explain why Flip’s in-app voice means more than the average app, I’ll also try to make it as less boring as possible (keyword: try). 
Tone of Voice in UX Writing: A Brand’s Hidden Superpower
Tone of voice is more than just the words we choose, it’s the attitude, the personality, and the ✨vibe✨ that comes across every time users interact with the app. Whether it’s through notifications, payment confirmations, error messages, or the help center, the way Flip communicates has a direct impact on how users feel about the brand. A good tone of voice, implemented correctly, can build the right relationship between the user and the app.
For Flip, the tone of voice helps create a sense of approachability and ease. It reassures users and reflects the brand's values. It’s a bridge to trust through consistency and clarity. This is particularly important in financial services, where trust and reliability are essential. Flip’s tone of voice ensures that users feel supported, whether they’re making their first transaction or resolving an issue. 
The Power of "Word of Mouth" in Flip's Success
Here’s a stat to flex: Nearly 60% of Flip users heard about us from a friend, family member, or co-worker. That’s a whole squad of unpaid brand ambassadors (we love you, loyal users🫰🏻). It’s one of the most unique aspects of Flip’s success.
This organic form of growth makes the experience within the app even more critical. Our in-app persona becomes their first impression of Flip as a brand.
Competitors might focus on catchy advertisements or high-visibility campaigns to build brand image and first impressions. However, for Flip, every user interaction within the app contributes to building its brand image, especially for new users. A helpful and friendly tone can turn a simple transaction into a moment of reassurance. A clear and direct message can reduce frustration when things go wrong. And a touch of warmth or humor can create a lasting positive impression.
Since users are primarily referred by people they trust, Flip’s tone of voice plays an important role in meeting and exceeding expectations. So if a user downloads Flip because their friend has said how great it is (it is), the app needs to meet that expectation. They expect an experience that aligns with the positive things they've heard, whether that’s ease of use, beneficial features, or helpful and friendly customer support. The brand’s tone of voice must consistently reflect the values that lead to these recommendations in the first place.
Representing Flip in the App
To correctly represent Flip, we first need to really get to know Flip as a brand and the values they hold as a company. We can define Flip’s voice into three main values: Fair, Smart, and Friendly.
1. Fair

Transparency & Trust: Flip's communication is rooted in honesty and fairness. The goal is to ensure users always feel like they’re getting clear, straightforward information. This means no hidden terms or confusing jargon, it’s all upfront.
Equality: We’re inclusive and treat all users equally, regardless of their experience with financial services. This fosters a sense of trust and approachability.
Benefit-Focused: We’re not obsessed with how great our product is, we only care about what’s in it for you. 

2. Smart

Confidence with Humility: Flip communicates with intelligence, but without arrogance. We’re not trying too hard to sound smart. Instead, we want users to feel smart and in control of their financial choices.
Clarity in Complexity: Finance can be complicated, so the "Smart" aspect focuses on simplifying these complexities. Our words should educate users by breaking down complicated processes or financial terms into digestible pieces, making sure they understand and feel empowered.
Efficiency: The tone is concise and to the point. Flip respects the user's time by making the content skimmable and easy to read.

3. Friendly

Approachable & Relatable: Flip’s voice feels like a conversation with a helpful friend. The language is warm, welcoming, and personable, designed to make users feel comfortable and understood.
Supportive: Especially in financial services, users can feel anxious or unsure. Flip’s you’ve-got-this attitude, reassures users, provides clear guidance, and helps them easily navigate challenges.
Positive Vibes: The friendly aspect brings lightness to the experience, using a tone that’s uplifting without being over the top.


How did we bring the voice to life?
Any UX writer will tell you that having a tone of voice is one thing, but implementing it is another. That’s where the fun and the challenge begins.
To help our writers bring Flip’s voice to life, we created a persona. Not just any persona, but one that felt true to Flip: clear, kind, quick on its feet, and always a few steps ahead.
At first, we tried to find one well-known personality that captured it all. But Flip isn’t one-dimensional, and neither is our voice. So instead of forcing a fit, we borrowed traits from a few familiar faces. For example (this genuinely is just an example): the quick wit of Komeng, the directness of Mamah Dedeh, and the smarts of Sri Mulyani.
Unfortunately, we can’t show you our persona (top secret stuff 🕵️), but you get the gist 😉
In the end, Flip’s in-app voice isn’t just about sounding nice, it carries the responsibility of shaping a user’s very first impression of the brand, the company, and the values it holds. Every interaction becomes a moment to affirm why Flip is worth the recommendation. It needs to convey trust, reliability, and overall familiarity, like a friend you’ve known for years.
After all, you wouldn’t trust your money with an absolute stranger, would you? 🤨

Hope you enjoyed the lessons learned and solution as well it will inspire you to craft your unique style. 
We're a group of passionate individuals who thrive on collaboration and pushing boundaries.
Illustration: Join us by applying via flip.id/career

More Than Words: The Story Behind Flip’s In-App Voice

This blog shares how we conduct Guerilla interviews at Flip and how this method quickly generates insights from diverse users, helping us validate whether our ideas solve users' problems.

<img src="https://tech.flip.id/content/images/2025/03/image4.png" alt="Guerilla User Interview: A Quick Path to Concept Validation">Why Guess When You Can Ask?In the world of innovation, ideas are everywhere. But not every idea can solve users&apos; problem. At Flip, we love creative thinking but know the importance of checking if an idea works before investing time and money into it. The goal? Solve real problems and create products that people actually need.This is where concept evaluation comes in. It&#x2019;s all about getting feedback early to see if an idea will work. However, traditional methods can take too long and cost too much. That&#x2019;s why we use guerilla interviews&#x2014;a fast and simple way to get the insights we need within the shorter time frame.<h2 id="what-are-guerilla-interviews">What Are Guerilla Interviews?</h2>Guerilla interview is an agile approach to user research. Unlike conventional methods, which involve pre-scheduled interviews and controlled environments, guerilla interviews happen on the spot. The process involves stepping into real-world environments where target users are present, engaging with them spontaneously, and collecting actionable feedback.The approach uses the structure of conventional user interviews in the planning phase (with clear objectives and prepared questions), but the execution is more informal, flexible, and rapid. It&#x2019;s a powerful tool for teams working under tight timelines or budgets, or with limited access to niche user bases.<h2 id="why-guerilla-interviews">Why Guerilla Interviews?</h2>Based on my experience, conducting conventional concept testing often presents several challenges:<ul><li>Tight timelines: There&#x2019;s rarely enough time for extensive planning or participant recruitment. Product teams need to quickly evaluate ideas and move forward, especially since there will always be more ideas waiting to be tested.</li><li>Niche target users: When targeting new consumer segments, these audiences are often not readily available in our existing user pool.</li></ul>Guerilla interviews effectively address these challenges by enabling teams to gather valuable insights quickly and without the typical constraints of conventional research methods.<h2 id="how-we-do-it-at-a-glance">How We Do It (At A Glance)</h2>We&apos;ve conducted several guerilla interviews for concept evaluation, and one of our recent highlights was validating a product concept designed specifically for small merchants, a new and untapped segment we hadn&#x2019;t catered to before. Here&#x2019;s how we do it at a glance:Preparation<ol><li>Stimulus: We prepare materials or prototypes to present to participants. These could be sketches, mockups, or simple descriptions.</li><li>Interview Guide: A structured list of key questions ensures consistency and focus during interviews.</li><li>NDA (Non-Disclosure Agreement): To protect sensitive information, we carry NDAs for participants to sign.</li><li>Location Selection: We identify two types of environments to meet diverse merchants:<ul><li>Traditional markets: For insights from less tech-savvy merchants.</li><li>Shopping centers: To engage merchants more familiar with technology.</li></ul></li></ol>Execution<ol><li>Scan the Environment: Observe the setting and potential participants who fit the target profile.</li><li>Approach: Start with transparency&#x2014;explain who we are, our purpose, and what&#x2019;s in it for them.</li><li>Build Rapport: Speak their language and make them comfortable. This fosters trust and encourages genuine feedback.</li><li>Record and Observe: Capture their responses while observing how they interact with customers or manage tasks.</li><li>Engage:<ul><li>Ask key questions: Focus on their pain points, current solutions, and challenges.</li><li>Test the concept: Present the stimulus and ask for honest feedback.</li><li>Allow for observation: With permission, observe their work environment for contextual insights.</li></ul></li><li>Be Flexible: If they get distracted by work, pause and let them handle their customers. Use the time to observe instead.</li><li>Wrap-Up: Thank them for their time and, if possible, collect contact information for follow-up questions.</li></ol><figure class="kg-card kg-image-card"><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdph-ESlot7FFN_jPPmx0yDvbzUG2pThDckUB1AGRsMjA4CyXwliuisyI1s1qJr_399AbfFWo1r1FZePaYcQZ8UeXLwDEqi9_dkezxvccsA6XMoZUYp7woptnqcL1lf3bHhGV7rvw?key=063VTYtIW6N1hIDRwiRgKplo" class="kg-image" alt="Guerilla User Interview: A Quick Path to Concept Validation" loading="lazy" width="624" height="468"></figure><h2 id="challenges-during-interview">Challenges During Interview</h2>Even though guerilla interviews are quick and easy to execute, that doesn&#x2019;t mean they come without challenges. One common hurdle is rejection, not everyone is willing to participate. Some merchants may feel too busy, uninterested, or even skeptical about the purpose of the interview. To address this, we use the snowballing method, where we ask previous participants to refer us to others.&#xA0;Distractions are another challenge, especially when interviewing merchants who need to attend to customers. Unlike scheduled interviews, guerilla interviews happen on the spot, meaning interruptions are inevitable. Instead of seeing this as a setback, we embrace it as an opportunity to observe their work environment, interactions, and pain points in real-time. This way, even when they don&#x2019;t talk to us, we continue gathering valuable insights.Unclear insights can also arise when new questions emerge after the interview ends. In some cases, responses may be vague or lead to additional areas worth exploring. Since we can&#x2019;t always revisit the same merchants, we politely ask for their contact details to follow up later. This helps ensure we capture accurate and complete information without putting pressure on them during the initial session.Lastly, the spontaneous nature of guerilla interviews can lead to disorganized notes. Without a structured setting, insights can quickly become scattered or forgotten. To prevent this, we make it a habit to immediately jot down key takeaways after each session while the details are still fresh. This simple yet effective practice helps us maintain clarity and ensures that no valuable information gets lost.<figure class="kg-card kg-image-card"><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdummXs8NrotGhNXo9enHiLc5_248CG_aSnkflJEwt4DgM8_IRMyagi3P3ePCTmzAYjgMDVt8w57B8-N6-Ho2bfHPA1zj0LsHKQSgWUt1yBBCL82W2QXjCtTyfoQaS3jnUCgPUZrg?key=063VTYtIW6N1hIDRwiRgKplo" class="kg-image" alt="Guerilla User Interview: A Quick Path to Concept Validation" loading="lazy" width="382" height="287"></figure> <figure class="kg-card kg-image-card"><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfjJS6gDsGtd8ItybDdv-If65PtKSw4IcCbdrADp9nf4H7oL7oBmvTDeiTS8lsS_9iLuRpXtSMc0blhItOsdmEcH6_87wDtSpcc865FtCqatW_E1ex9Xw3IDFUtcwF5725RzsmF?key=063VTYtIW6N1hIDRwiRgKplo" class="kg-image" alt="Guerilla User Interview: A Quick Path to Concept Validation" loading="lazy" width="215" height="287"></figure><h2 id="what-we-gain">What We Gain</h2>Despite its informal nature, guerilla interviewing delivers powerful outcomes:<ul><li>Rapid Validation: Ideas are tested and refined quickly, keeping up with the pace of innovation.</li><li>Real-World Insights: Observing users in their natural environments uncovers pain points and behaviors that might be missed in online interviews.</li><li>Empathy: Face-to-face interactions build a deeper understanding of users&#x2019; struggles and needs.</li><li>Grounded Context: The method helps us stay grounded by immersing ourselves in the users&#x2019; world.</li></ul><h2 id="reflections">Reflections</h2>As researchers, especially for those of us who are introverted, guerilla interviews push us to step out of our comfort zones. They demand the ability to engage with strangers, build rapport within minutes, and pivot conversations effectively. The experience teaches us to listen more, talk less, and find value in every interaction.While guerilla research doesn&#x2019;t replace traditional methods, it complements them by offering speed and flexibility. For us at Flip, guerilla interviews are a vital tool to stay user-focused and agile, ensuring we innovate without losing touch with the people we serve.<hr>Hope you enjoyed the lessons learned and solution as well it will inspire you to craft your unique style.&#xA0;We&apos;re a group of passionate individuals who thrive on collaboration and pushing boundaries.<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://tech.flip.id/content/images/2024/12/Lets-Join-The-Rocketship.png" class="kg-image" alt="Guerilla User Interview: A Quick Path to Concept Validation" loading="lazy" width="1921" height="1081" srcset="https://tech.flip.id/content/images/size/w600/2024/12/Lets-Join-The-Rocketship.png 600w, https://tech.flip.id/content/images/size/w1000/2024/12/Lets-Join-The-Rocketship.png 1000w, https://tech.flip.id/content/images/size/w1600/2024/12/Lets-Join-The-Rocketship.png 1600w, https://tech.flip.id/content/images/2024/12/Lets-Join-The-Rocketship.png 1921w" sizes="(min-width: 720px) 720px"><figcaption>Illustration: Join us by applying via flip.id/career</figcaption></figure>

Why Guess When You Can Ask?
In the world of innovation, ideas are everywhere. But not every idea can solve users' problem. At Flip, we love creative thinking but know the importance of checking if an idea works before investing time and money into it. The goal? Solve real problems and create products that people actually need.
This is where concept evaluation comes in. It’s all about getting feedback early to see if an idea will work. However, traditional methods can take too long and cost too much. That’s why we use guerilla interviews—a fast and simple way to get the insights we need within the shorter time frame.
What Are Guerilla Interviews?
Guerilla interview is an agile approach to user research. Unlike conventional methods, which involve pre-scheduled interviews and controlled environments, guerilla interviews happen on the spot. The process involves stepping into real-world environments where target users are present, engaging with them spontaneously, and collecting actionable feedback.
The approach uses the structure of conventional user interviews in the planning phase (with clear objectives and prepared questions), but the execution is more informal, flexible, and rapid. It’s a powerful tool for teams working under tight timelines or budgets, or with limited access to niche user bases.
Why Guerilla Interviews?
Based on my experience, conducting conventional concept testing often presents several challenges:

Tight timelines: There’s rarely enough time for extensive planning or participant recruitment. Product teams need to quickly evaluate ideas and move forward, especially since there will always be more ideas waiting to be tested.
Niche target users: When targeting new consumer segments, these audiences are often not readily available in our existing user pool.

Guerilla interviews effectively address these challenges by enabling teams to gather valuable insights quickly and without the typical constraints of conventional research methods.
How We Do It (At A Glance)
We've conducted several guerilla interviews for concept evaluation, and one of our recent highlights was validating a product concept designed specifically for small merchants, a new and untapped segment we hadn’t catered to before. Here’s how we do it at a glance:
Preparation

Stimulus: We prepare materials or prototypes to present to participants. These could be sketches, mockups, or simple descriptions.
Interview Guide: A structured list of key questions ensures consistency and focus during interviews.
NDA (Non-Disclosure Agreement): To protect sensitive information, we carry NDAs for participants to sign.
Location Selection: We identify two types of environments to meet diverse merchants:
Traditional markets: For insights from less tech-savvy merchants.
Shopping centers: To engage merchants more familiar with technology.


Execution

Scan the Environment: Observe the setting and potential participants who fit the target profile.
Approach: Start with transparency—explain who we are, our purpose, and what’s in it for them.
Build Rapport: Speak their language and make them comfortable. This fosters trust and encourages genuine feedback.
Record and Observe: Capture their responses while observing how they interact with customers or manage tasks.
Engage:
Ask key questions: Focus on their pain points, current solutions, and challenges.
Test the concept: Present the stimulus and ask for honest feedback.
Allow for observation: With permission, observe their work environment for contextual insights.

Be Flexible: If they get distracted by work, pause and let them handle their customers. Use the time to observe instead.
Wrap-Up: Thank them for their time and, if possible, collect contact information for follow-up questions.

Challenges During Interview
Even though guerilla interviews are quick and easy to execute, that doesn’t mean they come without challenges. One common hurdle is rejection, not everyone is willing to participate. Some merchants may feel too busy, uninterested, or even skeptical about the purpose of the interview. To address this, we use the snowballing method, where we ask previous participants to refer us to others. 
Distractions are another challenge, especially when interviewing merchants who need to attend to customers. Unlike scheduled interviews, guerilla interviews happen on the spot, meaning interruptions are inevitable. Instead of seeing this as a setback, we embrace it as an opportunity to observe their work environment, interactions, and pain points in real-time. This way, even when they don’t talk to us, we continue gathering valuable insights.
Unclear insights can also arise when new questions emerge after the interview ends. In some cases, responses may be vague or lead to additional areas worth exploring. Since we can’t always revisit the same merchants, we politely ask for their contact details to follow up later. This helps ensure we capture accurate and complete information without putting pressure on them during the initial session.
Lastly, the spontaneous nature of guerilla interviews can lead to disorganized notes. Without a structured setting, insights can quickly become scattered or forgotten. To prevent this, we make it a habit to immediately jot down key takeaways after each session while the details are still fresh. This simple yet effective practice helps us maintain clarity and ensures that no valuable information gets lost.

 
What We Gain
Despite its informal nature, guerilla interviewing delivers powerful outcomes:

Rapid Validation: Ideas are tested and refined quickly, keeping up with the pace of innovation.
Real-World Insights: Observing users in their natural environments uncovers pain points and behaviors that might be missed in online interviews.
Empathy: Face-to-face interactions build a deeper understanding of users’ struggles and needs.
Grounded Context: The method helps us stay grounded by immersing ourselves in the users’ world.


Reflections
As researchers, especially for those of us who are introverted, guerilla interviews push us to step out of our comfort zones. They demand the ability to engage with strangers, build rapport within minutes, and pivot conversations effectively. The experience teaches us to listen more, talk less, and find value in every interaction.
While guerilla research doesn’t replace traditional methods, it complements them by offering speed and flexibility. For us at Flip, guerilla interviews are a vital tool to stay user-focused and agile, ensuring we innovate without losing touch with the people we serve.

Hope you enjoyed the lessons learned and solution as well it will inspire you to craft your unique style. 
We're a group of passionate individuals who thrive on collaboration and pushing boundaries.
Illustration: Join us by applying via flip.id/career

Guerilla User Interview: A Quick Path to Concept Validation

Offline user visits uncover insights beyond what online methods can provide. Meeting users in person builds empathy, reveals real needs—like a "Paylater" option and bulk payments— and strengthens trust, ensuring designs truly fit their world.

<img src="https://tech.flip.id/content/images/2025/01/image3.png" alt="Ethnographic Research with Offline User Visits: Unique Insights You Can&#x2019;t Capture Online">When we think of a Digital Product Designer (or UX Designer) the first image that usually comes to mind is someone behind a screen, crafting pixel-perfect designs. But the role is so much more than designing interfaces. A huge part of creating successful products is understanding the people who use them; their experiences, needs, and challenges.For us product designers, there&#x2019;s no better way to build empathy than by talking directly to users, listening to their stories, and observing their real-life interactions with our products. For this research, we use the ethnographic research method. These experiences shape insights that fuel future improvements.Last year, Vishal Shah(a former Product Manager) and I went on a user research mission. Our goal? Dive deep into real user experiences and gather insights that could give insight into our product journey. I collaborated with our UX Researcher to conduct this interview, who helped shape our research plan and prepared the initial interview guidelines. Although our visit was on a tight timeline, we were set with our questions and eager to meet the users in person.<figure class="kg-card kg-image-card"><img src="https://tech.flip.id/content/images/2025/01/image1.png" class="kg-image" alt="Ethnographic Research with Offline User Visits: Unique Insights You Can&#x2019;t Capture Online" loading="lazy" width="1999" height="943" srcset="https://tech.flip.id/content/images/size/w600/2025/01/image1.png 600w, https://tech.flip.id/content/images/size/w1000/2025/01/image1.png 1000w, https://tech.flip.id/content/images/size/w1600/2025/01/image1.png 1600w, https://tech.flip.id/content/images/2025/01/image1.png 1999w" sizes="(min-width: 720px) 720px"></figure><h2 id="the-interviews-what-we-learned">The Interviews: What We Learned</h2>Our first interview was with a small business owner who specializes in selling digital products, or what we call a reseller. I was amazed by his entrepreneurial spirit and resiliency in everything he did. Alongside reselling digital products, he ventured into logistics services, cat food sales, and logistic services, all while managing these different streams on his own. Meeting someone with such drive and resilience was inspiring and offered a window into the kind of challenges multi-role entrepreneurs face.He shared the challenges he encountered in expanding his business, particularly around securing funds to support his growth. From this conversation, I got one key insight: the potential need for a Paylater option specified for business owners, providing them the flexibility to manage cash flow while scaling their business. Additionally, he expressed a strong preference for a web-based platform, one that would save him time and eliminate the need to constantly switch between devices. This feedback emphasized the importance of offering flexible tools for busy users who need simplicity and efficiency.<figure class="kg-card kg-image-card"><img src="https://tech.flip.id/content/images/2025/01/image4-1.png" class="kg-image" alt="Ethnographic Research with Offline User Visits: Unique Insights You Can&#x2019;t Capture Online" loading="lazy" width="1999" height="1434" srcset="https://tech.flip.id/content/images/size/w600/2025/01/image4-1.png 600w, https://tech.flip.id/content/images/size/w1000/2025/01/image4-1.png 1000w, https://tech.flip.id/content/images/size/w1600/2025/01/image4-1.png 1600w, https://tech.flip.id/content/images/2025/01/image4-1.png 1999w" sizes="(min-width: 720px) 720px"></figure>In another interview, we met a user who regularly processes transactions on behalf of others. He highlighted the need for a &#x201C;bulk payment&#x201D; feature, which could simplify paying multiple bills at once. Teachers, for instance, often pay school fees for several students at once, and a bulk payment feature would streamline the process. Another specific request? A feature to print receipts directly from the Flip app, currently, he relies on an alternative platform for this. We listened closely and later prioritized this feature to support our reseller community, knowing it would make a meaningful difference for them.<h2 id="insights-you-can-only-get-from-offline-interviews">Insights You Can Only Get From Offline Interviews</h2>Face-to-face interviews gave us access to insights that just don&#x2019;t come through in online surveys or online calls. Meeting users in person, they share more openly like telling stories, discussing challenges, and celebrating wins that bring their experiences to life. This in-the-moment connection helped us catch details that often slip by online: body language, spontaneous ideas, and honest, unfiltered feedback.These interactions led to discoveries we hadn&#x2019;t anticipated, like a strong preference for web-based platforms, the need for bulk payment features, and even a request for an in-app print receipt feature. These kinds of insights only surface when you&#x2019;re there, face-to-face, truly listening and observing.Each conversation reminded us of the real-world impact of our designs and clarified our role as designers: bridging the gap between user needs, technology, and business goals.<h2 id="challenges-in-offline-visit-research">Challenges in Offline Visit Research</h2>While our offline interviews provided valuable insights, we encountered certain challenges during the process. One of the main difficulties was engaging users in meaningful discussions to uncover deeper insights.Given that our users have all sorts of backgrounds, they really differ in how they communicate and how comfortable they feel sharing info. Like, in one interview, we noticed the second person wasn&#x2019;t nearly as open as the first one. Even though we tried our best with open-ended questions, the chat didn&#x2019;t really give us the detailed insights we were looking for.<figure class="kg-card kg-image-card"><img src="https://tech.flip.id/content/images/2025/01/image2.gif" class="kg-image" alt="Ethnographic Research with Offline User Visits: Unique Insights You Can&#x2019;t Capture Online" loading="lazy" width="480" height="268"></figure>This experience underscored the importance of tailoring our approach to suit different personalities and levels of engagement. Moving forward, we&#x2019;re exploring ways to make participants feel more at ease and motivated to share their thoughts&#x2014;whether through adjusted question framing, icebreakers, or creating a more relaxed environment during interviews.<h2 id="final-thought-step-into-users-shoes">Final Thought: Step Into Users&apos; Shoes</h2>To truly understand users, it&#x2019;s not enough to imagine their experiences&#x2014;we need to step into their world. This means going beyond data points and usage metrics to connect with them on a human level. When we spend time listening to their stories, observing their interactions, and asking the right questions, we gain insights that can&#x2019;t be replicated in any other way.Every conversation reminds us that our designs serve real people with unique needs, preferences, and challenges. Seeing how users navigate their lives and work sheds light on how our products fit&#x2014;or don&#x2019;t fit&#x2014;into their routines. It&#x2019;s in these moments that we uncover the subtle obstacles they face and recognize the solutions that would make a meaningful difference for them.Offline visits also build trust and rapport that go beyond what digital interactions allow. Users feel seen, heard, and valued, knowing their experiences directly shape the products they use. As designers, these moments strengthen our commitment to building with empathy and purpose. Each offline visit becomes a learning experience, refining our perspective on how to bridge user needs, technology, and business goals.In the end, true user-centered design is less about assumptions and more about engagement. By stepping out from behind the screen and into users&#x2019; lives, we create products that are not only functional but truly resonate with the people who rely on them every day.<h2 id="the-role-of-designers-in-research-a-commitment-to-%E2%80%9Ccustomer-love%E2%80%9D">The Role of Designers in Research: A Commitment to &#x201C;Customer Love&#x201D;</h2>At Flip, we believe that truly understanding our users begins with active involvement in their world. One of the ways we embody this is by ensuring our designers are directly engaged in the research process, not just as observers but as active participants.In many organizations, designers might rely solely on insights handed over by researchers, missing the firsthand nuances of user interactions. At Flip, however, our designers go the extra mile&#x2014;joining interviews, discussing and analyzing findings, and even brainstorming solutions based on real user insights.By taking part in these offline visits, designers gain a deeper empathy for our users, translating into designs that genuinely reflect user needs. This approach ties directly into our &#x201C;Customer Love&#x201D; value, demonstrating our dedication to putting users at the heart of everything we create.Involving designers at this level isn&#x2019;t just about enhancing their understanding; it&#x2019;s about fostering collaboration that leads to impactful, user-centered solutions. Through active participation in research, Flip designers ensure our products aren&#x2019;t just functional but meaningful and delightful for our diverse audience.&#x2014;Hope you enjoyed the lessons learned and solution as well it will inspire you to craft your unique style.&#xA0;We&apos;re a group of passionate individuals who thrive on collaboration and pushing boundaries.&#xA0;<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://tech.flip.id/content/images/2025/01/image-1.png" class="kg-image" alt="Ethnographic Research with Offline User Visits: Unique Insights You Can&#x2019;t Capture Online" loading="lazy" width="1921" height="1081" srcset="https://tech.flip.id/content/images/size/w600/2025/01/image-1.png 600w, https://tech.flip.id/content/images/size/w1000/2025/01/image-1.png 1000w, https://tech.flip.id/content/images/size/w1600/2025/01/image-1.png 1600w, https://tech.flip.id/content/images/2025/01/image-1.png 1921w" sizes="(min-width: 720px) 720px"><figcaption>Illustration: Join us by applying via flip.id/career</figcaption></figure>

When we think of a Digital Product Designer (or UX Designer) the first image that usually comes to mind is someone behind a screen, crafting pixel-perfect designs. But the role is so much more than designing interfaces. A huge part of creating successful products is understanding the people who use them; their experiences, needs, and challenges.
For us product designers, there’s no better way to build empathy than by talking directly to users, listening to their stories, and observing their real-life interactions with our products. For this research, we use the ethnographic research method. These experiences shape insights that fuel future improvements.
Last year, Vishal Shah(a former Product Manager) and I went on a user research mission. Our goal? Dive deep into real user experiences and gather insights that could give insight into our product journey. I collaborated with our UX Researcher to conduct this interview, who helped shape our research plan and prepared the initial interview guidelines. Although our visit was on a tight timeline, we were set with our questions and eager to meet the users in person.

The Interviews: What We Learned
Our first interview was with a small business owner who specializes in selling digital products, or what we call a reseller. I was amazed by his entrepreneurial spirit and resiliency in everything he did. Alongside reselling digital products, he ventured into logistics services, cat food sales, and logistic services, all while managing these different streams on his own. Meeting someone with such drive and resilience was inspiring and offered a window into the kind of challenges multi-role entrepreneurs face.
He shared the challenges he encountered in expanding his business, particularly around securing funds to support his growth. From this conversation, I got one key insight: the potential need for a Paylater option specified for business owners, providing them the flexibility to manage cash flow while scaling their business. Additionally, he expressed a strong preference for a web-based platform, one that would save him time and eliminate the need to constantly switch between devices. This feedback emphasized the importance of offering flexible tools for busy users who need simplicity and efficiency.

In another interview, we met a user who regularly processes transactions on behalf of others. He highlighted the need for a “bulk payment” feature, which could simplify paying multiple bills at once. Teachers, for instance, often pay school fees for several students at once, and a bulk payment feature would streamline the process. Another specific request? A feature to print receipts directly from the Flip app, currently, he relies on an alternative platform for this. We listened closely and later prioritized this feature to support our reseller community, knowing it would make a meaningful difference for them.
Insights You Can Only Get From Offline Interviews
Face-to-face interviews gave us access to insights that just don’t come through in online surveys or online calls. Meeting users in person, they share more openly like telling stories, discussing challenges, and celebrating wins that bring their experiences to life. This in-the-moment connection helped us catch details that often slip by online: body language, spontaneous ideas, and honest, unfiltered feedback.
These interactions led to discoveries we hadn’t anticipated, like a strong preference for web-based platforms, the need for bulk payment features, and even a request for an in-app print receipt feature. These kinds of insights only surface when you’re there, face-to-face, truly listening and observing.
Each conversation reminded us of the real-world impact of our designs and clarified our role as designers: bridging the gap between user needs, technology, and business goals.
Challenges in Offline Visit Research
While our offline interviews provided valuable insights, we encountered certain challenges during the process. One of the main difficulties was engaging users in meaningful discussions to uncover deeper insights.
Given that our users have all sorts of backgrounds, they really differ in how they communicate and how comfortable they feel sharing info. Like, in one interview, we noticed the second person wasn’t nearly as open as the first one. Even though we tried our best with open-ended questions, the chat didn’t really give us the detailed insights we were looking for.

This experience underscored the importance of tailoring our approach to suit different personalities and levels of engagement. Moving forward, we’re exploring ways to make participants feel more at ease and motivated to share their thoughts—whether through adjusted question framing, icebreakers, or creating a more relaxed environment during interviews.
Final Thought: Step Into Users' Shoes
To truly understand users, it’s not enough to imagine their experiences—we need to step into their world. This means going beyond data points and usage metrics to connect with them on a human level. When we spend time listening to their stories, observing their interactions, and asking the right questions, we gain insights that can’t be replicated in any other way.
Every conversation reminds us that our designs serve real people with unique needs, preferences, and challenges. Seeing how users navigate their lives and work sheds light on how our products fit—or don’t fit—into their routines. It’s in these moments that we uncover the subtle obstacles they face and recognize the solutions that would make a meaningful difference for them.
Offline visits also build trust and rapport that go beyond what digital interactions allow. Users feel seen, heard, and valued, knowing their experiences directly shape the products they use. As designers, these moments strengthen our commitment to building with empathy and purpose. Each offline visit becomes a learning experience, refining our perspective on how to bridge user needs, technology, and business goals.
In the end, true user-centered design is less about assumptions and more about engagement. By stepping out from behind the screen and into users’ lives, we create products that are not only functional but truly resonate with the people who rely on them every day.
The Role of Designers in Research: A Commitment to “Customer Love”
At Flip, we believe that truly understanding our users begins with active involvement in their world. One of the ways we embody this is by ensuring our designers are directly engaged in the research process, not just as observers but as active participants.
In many organizations, designers might rely solely on insights handed over by researchers, missing the firsthand nuances of user interactions. At Flip, however, our designers go the extra mile—joining interviews, discussing and analyzing findings, and even brainstorming solutions based on real user insights.
By taking part in these offline visits, designers gain a deeper empathy for our users, translating into designs that genuinely reflect user needs. This approach ties directly into our “Customer Love” value, demonstrating our dedication to putting users at the heart of everything we create.
Involving designers at this level isn’t just about enhancing their understanding; it’s about fostering collaboration that leads to impactful, user-centered solutions. Through active participation in research, Flip designers ensure our products aren’t just functional but meaningful and delightful for our diverse audience.
—
Hope you enjoyed the lessons learned and solution as well it will inspire you to craft your unique style. 
We're a group of passionate individuals who thrive on collaboration and pushing boundaries. 
Illustration: Join us by applying via flip.id/career

Ethnographic Research with Offline User Visits: Unique Insights You Can’t Capture Online

In this blog, Product Designer Flip shares his journey of redesigning the Accept Payment product by revisiting old designs and user feedback to simplify the experience and enhance our interface.

<h3 id="where-it-all-began-%F0%9F%91%80">Where It All Began &#x1F440;</h3><img src="https://tech.flip.id/content/images/2025/01/image2.png" alt="A Fresh Look, A Better Experience: Accept Payment Design Revamp Story">The need for a revamp struck me while I was scraping through old Figma files and looking for references. As I revisited the layouts, colors, and elements of previous projects, I couldn&#x2019;t help but smile at the memories of long design sessions, debates, and too many cups of coffee &#x2615;&#xFE0F;.As I explored further, I started noticing the flaws&#x2014;buttons that were too large, forms that didn&#x2019;t flow smoothly, and layouts that felt either overcrowded or oddly spacious (large enough to park a private jet &#x1F602;). It made me question, &quot;How did I come up with this design?&quot;<figure class="kg-card kg-image-card"><img src="https://tech.flip.id/content/images/2025/01/image4.png" class="kg-image" alt="A Fresh Look, A Better Experience: Accept Payment Design Revamp Story" loading="lazy" width="1920" height="1080" srcset="https://tech.flip.id/content/images/size/w600/2025/01/image4.png 600w, https://tech.flip.id/content/images/size/w1000/2025/01/image4.png 1000w, https://tech.flip.id/content/images/size/w1600/2025/01/image4.png 1600w, https://tech.flip.id/content/images/2025/01/image4.png 1920w" sizes="(min-width: 720px) 720px"></figure>It wasn&#x2019;t just my own reflection that sparked the change. User feedback highlighted areas where the experience could be better&#x2014;complex flows, cluttered pages, and moments of friction. Their insights, paired with my review, made one thing clear: Accept Payment needed a refresh to meet current expectations.<h3 id="why-we-revamped-accept-payment-%F0%9F%94%84">Why We Revamped Accept Payment &#x1F504;</h3>The decision to revamp Accept Payment wasn&#x2019;t random&#x2014;it was driven by user feedback, a design audit, and an honest look at our competitors.<h4 id="user-feedback-drove-change">User Feedback Drove Change</h4>Our users spoke, and we listened. They loved the core functionality of Accept Payment, but consistent feedback highlighted areas where the experience wasn&#x2019;t as smooth as it could have been. Users pointed out friction such as:&#xA0;And let&#x2019;s be real&#x2014;if there&#x2019;s one thing users hate, it&#x2019;s friction. So we rolled up our sleeves and got to work. Simplifying Accept Payment was priority number one. We wanted users to zip through transactions with ease. Our goal? A smoother, cleaner, and far more intuitive experience, where everything just works the way you expect it to.<h4 id="conducting-design-audit">Conducting Design Audit</h4>We didn&#x2019;t stop there. Alongside the valuable feedback from our users, we took a closer look at Accept Payment through a thorough design audit. Turns out, some parts of the interface had been hanging out since... well, longer than we&#x2019;d like to admit. As tech advances and user behavior shifts, old design elements can start to feel like that outdated wallpaper your parents still have up. So, we took a hard look. The audit revealed a few design sins&#x2014;layouts that were less &#x201C;consistent&#x201D; and more &#x201C;all over the place&quot;, visual elements that were practically begging for an update, and usability quirks that we honestly couldn&#x2019;t ignore any longer.The result? A clear improvement plan. This wasn&#x2019;t just about making things look nicer&#x2014;we needed to overhaul the entire experience to ensure it was relevant and easy to use. The goal was to make Accept Payment both visually appealing and highly functional. After all, if users can&#x2019;t navigate the app smoothly, then we haven&#x2019;t done our job right. So, we focused on creating a cleaner, more intuitive interface that felt as seamless to use as it was to look at.Staying Ahead in a Competitive Market In today&#x2019;s fast-paced industry, staying competitive is non-negotiable. With so many payment solutions available, standing out requires more than just solid functionality. We carried out a comprehensive competitive analysis, benchmarking Accept Payment against other leading payment products in the market. This process wasn&#x2019;t just about seeing how we measured up&#x2014;it was about understanding what the best in the industry were doing right. We looked at how competitors handled user flows, design consistency, and security measures, and what became clear was that the top solutions weren&#x2019;t just beautiful&#x2014;they were seamless, intuitive, and instilled confidence in users with every interaction.The competitive analysis gave us key insights into where Accept Payment could improve and, more importantly, where we had the opportunity to surpass the competition. It was clear that to stay ahead, we needed to focus not just on aesthetics but also on performance and user trust. By refining the experience, adding layers of security, and streamlining the design, we aimed to make Accept Payment a standout in the market&#x2014;one that users not only prefer but trust implicitly.<figure class="kg-card kg-image-card"><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXeOizIABZKQjY1bd1hDDq-NDRfSTuo0P75EOz5oYkvPxmpTk_kiRZJVxU-FuxzL37XP7Tk7yxQ8UbytUYHpJ_326K1lOEtopY2GL7jD6fPf2OrZGitETIUZCbgF9p-gkpXaBoMzsg?key=qf5qdGbHn3vxULfsTuycvA" class="kg-image" alt="A Fresh Look, A Better Experience: Accept Payment Design Revamp Story" loading="lazy" width="624" height="377"></figure>What Made the Revamp Exciting &#x1F389;Despite the challenges, the process of revamping Accept Payment was incredibly exciting. Collaborating with our UX writer and fellow product designer brought new perspectives to the table, allowing us to combine creative ideas. This revamp is not only the design but also the information and content. Each brainstorming session felt like a step closer to a solution that truly resonated with our users.The iterative design process was another highlight. Refining concepts through feedback and exploring alternative approaches turned even setbacks into opportunities. Every tweak felt like progress, pushing us to create something better. Each step forward felt like a small victory, especially knowing how these improvements would directly benefit our users.Seeing ideas take shape, from initial sketches to full-fledged designs, was a thrill. Every tweak and every improvement felt like progress toward creating a product that would not only meet but exceed user expectations. Even the smallest wins, such as seeing a &#x2705;emoji response on the Slack thread about this project can put a big smile on my face &#x1F62D;And then came the best part: seeing the design come to life. After months of iteration, watching users interact with a more streamlined, intuitive Accept Payment feature was the ultimate reward. The changes we made weren&#x2019;t just visual&#x2014;they enhanced the entire user journey, making it smoother, faster, and more enjoyable. &#x2728;<h3 id="final-thoughts">Final Thoughts</h3>Revamping Accept Payment wasn&#x2019;t just about making a few tweaks&#x2014;it was about reimagining how we can deliver a better, smoother experience for our users. Every iteration brings us closer to creating a product that&#x2019;s not only functional but also enjoyable to use. And while the work is never truly finished, that&#x2019;s part of the fun. We&#x2019;re always looking for ways to improve, to simplify, and to make sure every interaction feels effortless.We&#x2019;re excited about where we&#x2019;ve landed with this revamp and even more excited about what&#x2019;s next. If you&#x2019;re as passionate about design, innovation, and creating seamless user experiences as we are, why not join us? Stay tuned for exciting job opportunities&#x2014;visit our <a href="https://career.flip.id/jobs?ref=tech.flip.id">career page</a> to see how you can be part of Flip&apos;s journey. We&#x2019;d love to have you on board!<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://tech.flip.id/content/images/2025/01/image.png" class="kg-image" alt="A Fresh Look, A Better Experience: Accept Payment Design Revamp Story" loading="lazy" width="1921" height="1081" srcset="https://tech.flip.id/content/images/size/w600/2025/01/image.png 600w, https://tech.flip.id/content/images/size/w1000/2025/01/image.png 1000w, https://tech.flip.id/content/images/size/w1600/2025/01/image.png 1600w, https://tech.flip.id/content/images/2025/01/image.png 1921w" sizes="(min-width: 720px) 720px"><figcaption>Illustration: Join us by applying via flip.id/career</figcaption></figure>

Where It All Began 👀

The need for a revamp struck me while I was scraping through old Figma files and looking for references. As I revisited the layouts, colors, and elements of previous projects, I couldn’t help but smile at the memories of long design sessions, debates, and too many cups of coffee ☕️.
As I explored further, I started noticing the flaws—buttons that were too large, forms that didn’t flow smoothly, and layouts that felt either overcrowded or oddly spacious (large enough to park a private jet 😂). It made me question, "How did I come up with this design?"

It wasn’t just my own reflection that sparked the change. User feedback highlighted areas where the experience could be better—complex flows, cluttered pages, and moments of friction. Their insights, paired with my review, made one thing clear: Accept Payment needed a refresh to meet current expectations.
Why We Revamped Accept Payment 🔄
The decision to revamp Accept Payment wasn’t random—it was driven by user feedback, a design audit, and an honest look at our competitors.
User Feedback Drove Change
Our users spoke, and we listened. They loved the core functionality of Accept Payment, but consistent feedback highlighted areas where the experience wasn’t as smooth as it could have been. Users pointed out friction such as: 
And let’s be real—if there’s one thing users hate, it’s friction. So we rolled up our sleeves and got to work. Simplifying Accept Payment was priority number one. We wanted users to zip through transactions with ease. Our goal? A smoother, cleaner, and far more intuitive experience, where everything just works the way you expect it to.
Conducting Design Audit
We didn’t stop there. Alongside the valuable feedback from our users, we took a closer look at Accept Payment through a thorough design audit. Turns out, some parts of the interface had been hanging out since... well, longer than we’d like to admit. As tech advances and user behavior shifts, old design elements can start to feel like that outdated wallpaper your parents still have up. So, we took a hard look. The audit revealed a few design sins—layouts that were less “consistent” and more “all over the place", visual elements that were practically begging for an update, and usability quirks that we honestly couldn’t ignore any longer.
The result? A clear improvement plan. This wasn’t just about making things look nicer—we needed to overhaul the entire experience to ensure it was relevant and easy to use. The goal was to make Accept Payment both visually appealing and highly functional. After all, if users can’t navigate the app smoothly, then we haven’t done our job right. So, we focused on creating a cleaner, more intuitive interface that felt as seamless to use as it was to look at.
Staying Ahead in a Competitive Market 
In today’s fast-paced industry, staying competitive is non-negotiable. With so many payment solutions available, standing out requires more than just solid functionality. We carried out a comprehensive competitive analysis, benchmarking Accept Payment against other leading payment products in the market. This process wasn’t just about seeing how we measured up—it was about understanding what the best in the industry were doing right. We looked at how competitors handled user flows, design consistency, and security measures, and what became clear was that the top solutions weren’t just beautiful—they were seamless, intuitive, and instilled confidence in users with every interaction.
The competitive analysis gave us key insights into where Accept Payment could improve and, more importantly, where we had the opportunity to surpass the competition. It was clear that to stay ahead, we needed to focus not just on aesthetics but also on performance and user trust. By refining the experience, adding layers of security, and streamlining the design, we aimed to make Accept Payment a standout in the market—one that users not only prefer but trust implicitly.

What Made the Revamp Exciting 🎉
Despite the challenges, the process of revamping Accept Payment was incredibly exciting. Collaborating with our UX writer and fellow product designer brought new perspectives to the table, allowing us to combine creative ideas. This revamp is not only the design but also the information and content. Each brainstorming session felt like a step closer to a solution that truly resonated with our users.
The iterative design process was another highlight. Refining concepts through feedback and exploring alternative approaches turned even setbacks into opportunities. Every tweak felt like progress, pushing us to create something better. Each step forward felt like a small victory, especially knowing how these improvements would directly benefit our users.
Seeing ideas take shape, from initial sketches to full-fledged designs, was a thrill. Every tweak and every improvement felt like progress toward creating a product that would not only meet but exceed user expectations. Even the smallest wins, such as seeing a ✅emoji response on the Slack thread about this project can put a big smile on my face 😭
And then came the best part: seeing the design come to life. After months of iteration, watching users interact with a more streamlined, intuitive Accept Payment feature was the ultimate reward. The changes we made weren’t just visual—they enhanced the entire user journey, making it smoother, faster, and more enjoyable. ✨
Final Thoughts
Revamping Accept Payment wasn’t just about making a few tweaks—it was about reimagining how we can deliver a better, smoother experience for our users. Every iteration brings us closer to creating a product that’s not only functional but also enjoyable to use. And while the work is never truly finished, that’s part of the fun. We’re always looking for ways to improve, to simplify, and to make sure every interaction feels effortless.
We’re excited about where we’ve landed with this revamp and even more excited about what’s next. If you’re as passionate about design, innovation, and creating seamless user experiences as we are, why not join us? Stay tuned for exciting job opportunities—visit our career page to see how you can be part of Flip's journey. We’d love to have you on board!
Illustration: Join us by applying via flip.id/career

A Fresh Look, A Better Experience: Accept Payment Design Revamp Story

A Product Designer at Flip addressed translation issues for English and Bahasa Indonesia by creating an "Annotation" component in Figma. This tool enabled UX writers to manage translations directly, leading to improved efficiency, reduced errors, and a focus on tailored solutions.

<img src="https://tech.flip.id/content/images/2024/12/image4.png" alt="How a Simple Figma Component Solved Our Translation Challenges at Flip">Working as a Product Designer at Flip since 2020, I&#x2019;ve encountered numerous design challenges, but one of the most memorable was the complex task of managing translations for both English and Bahasa Indonesia. Our goal was to create content that felt natural and localized to each audience, so relying on standard translation tools or AI wasn&#x2019;t an option. We needed localized translations that accurately captured the tone, style, and context of our app, and that meant working closely with our UX writers, who would craft custom translations for every screen in our designs.<h3 id="the-initial-approach-duplicating-designs">The Initial Approach: Duplicating Designs</h3><figure class="kg-card kg-image-card"><img src="https://tech.flip.id/content/images/2024/12/image6.png" class="kg-image" alt="How a Simple Figma Component Solved Our Translation Challenges at Flip" loading="lazy" width="1999" height="1076" srcset="https://tech.flip.id/content/images/size/w600/2024/12/image6.png 600w, https://tech.flip.id/content/images/size/w1000/2024/12/image6.png 1000w, https://tech.flip.id/content/images/size/w1600/2024/12/image6.png 1600w, https://tech.flip.id/content/images/2024/12/image6.png 1999w" sizes="(min-width: 720px) 720px"></figure>At the beginning, our approach seemed straightforward. We thought the simplest solution would be to duplicate each design&#x2014;one version in English and another in Bahasa Indonesia. This method worked well when designing only a few screens. We&#x2019;d design the Bahasa Indonesia version first, then create a copy for English, ensuring that all the text was translated by our UX writers.However, as our product grew and more features were added, the number of screens multiplied, and maintaining two separate design versions became increasingly difficult. Each time we updated a piece of copy, we had to remember to replicate the same change in both versions. This manual process was tedious, error-prone, and not efficient. It required designers to keep track of every small tweak, and the slightest oversight could lead to discrepancies between the two versions. Engineers also struggled because they had to cross-reference between the two designs to ensure everything matched, leading to more errors in the development process.<h3 id="lost-in-translation-the-figma-comments-experiment">Lost in Translation: The Figma Comments Experiment&#xA0;</h3>Recognizing that our initial approach wasn&#x2019;t sustainable in the long run, we tried using Figma&#x2019;s comment feature. UX writers would leave translations as comments directly on the design, marking where each English phrase needed to be translated into Bahasa Indonesia. This allowed us to avoid duplicating designs, but it quickly became apparent that this method had its own set of challenges.As the number of comments grew, it became increasingly difficult to manage. Conversations would often spring up around a single comment, resulting in long, tangled threads that were hard to follow. When someone needed to revise a piece of copy, finding the final, approved version became a frustrating scavenger hunt through dozens of comments and replies.<figure class="kg-card kg-image-card"><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXeURvoOynRXbbMgQHFfWsGKYZ1JGHdqEtRmBpdcW4MOBzKdkEF7ZlSlV-0TERLj6m25aQdW7yYF_E5Pza7E16HWpZMABKKahot6gvWc7Nj6sgYZmmpemnkKxGsRlmaAwg6DWUYFpw?key=fxiKk49sVIN7g15cq8xBfw" class="kg-image" alt="How a Simple Figma Component Solved Our Translation Challenges at Flip" loading="lazy" width="480" height="269"></figure>Another challenge was that it was difficult to track which translations were still under review and which ones were finalized. Overall, this solution made our workflow even messier, and it didn&#x2019;t provide the clarity we were hoping for. Final verdict: this approach didn&#x2019;t work &#x1F44E;&#x1F3FB;<h3 id="the-brainstorm-session-searching-for-a-better-solution">The Brainstorm Session: Searching for a Better Solution</h3><figure class="kg-card kg-image-card"><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXf5pPZmwpF56aP0exJzAbUz6h68FEYwhihg6-RXeOcCtSCHC5lTpRRWhC3SFNJgBHrY1_ACXj4e3o7A96mYiQgkoOQBLR5QaQdCPrWRG3g2Ks-Vh-LMStRL6Uk08al3LXfQgmTpOD8f64ibnLdVkznIRAU?key=fxiKk49sVIN7g15cq8xBfw" class="kg-image" alt="How a Simple Figma Component Solved Our Translation Challenges at Flip" loading="lazy" width="635" height="348"></figure>When our previous approach fell short, we didn&#x2019;t stop there. Instead, we regrouped to rethink our strategy. The challenge was clear: streamline the translation process without juggling multiple design files or drowning in endless comment threads.To find a solution, our design team held a brainstorming session. We explored various localization tools and plugins, including some tailored for Figma. Yet, many were either overly complex or beyond our budget. We needed something that simplified the process, not added layers of complication.After much discussion, inspiration struck. &#x201C;What if we could annotate translations directly in Figma using a single component?&#x201D; I proposed. The idea was to create a component that flagged text for translation and allowed UX writers to add translations directly within the design, with no duplication needed. The concept drew from how UX writers often include alternative copy notes and we repurposed here for translations with real-time status tracking.The team was intrigued. We decided to test this idea, excited by its potential to simplify and improve collaboration.<h3 id="experimenting-the-translation-annotation-component">Experimenting the Translation Annotation Component</h3>From this idea, we developed a custom Figma component that we eventually called the &#x201C;Annotation&#x201D; component. The concept was straightforward but powerful: instead of duplicating entire designs for different languages, the Annotation component would allow us to mark which text needed translation and display the translation right alongside it. This way, engineers could see both the English and Bahasa Indonesia text within a single design file, simplifying the implementation process.To further streamline the workflow, we added a status system to the Annotation component to track the progress of translations. The status options included:<ul><li>Draft &#x2013; For initial versions of the copy that were placeholders and still needed refinement.</li><li>On Review &#x2013; When the copy was being fine-tuned or reviewed by UX writers, translators, or other stakeholders.</li><li>Done &#x2013; When the translation was final and ready for engineers to implement.</li><li>Deprecated &#x2013; For copy that was no longer in use or needed to be removed from the design.</li></ul><figure class="kg-card kg-image-card"><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcLLTDv0X03631KGoTtcrgi_gYyKpxAcG0lVJ1GtWDF0HF6_eOwmM-GTkgBZB7Rx5Tek-1zpfSeKLGpeUav_bxkXFLhj3ph3iT_JzSzAq1Qxgiu1r8yOnov-G3_SSBx4IJaNWkSUT6NyNLKJLSvGYKbJUlx?key=fxiKk49sVIN7g15cq8xBfw" class="kg-image" alt="How a Simple Figma Component Solved Our Translation Challenges at Flip" loading="lazy" width="550" height="258"></figure>This status system became an essential feature, especially for engineers and stakeholders who needed a quick overview of the translation process. Now, instead of guessing which translations were finalized and which were still being edited, they could easily see the status of every piece of copy at a glance. This reduced the need for constant back-and-forth communication and helped keep everyone aligned.<h3 id="testing-and-refining-the-solution">Testing and Refining the Solution</h3><figure class="kg-card kg-image-card"><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXeSN4CltFnUrMyIsgIhtbOE0jR5CkKnUgeHyxa_bF2YVkylCHGTDrozR1_y3-lXj6_2U39Ug68QAglD2k6hNtYch4Z5a_HAUgRmYfH5BNEZwYinR8wnjqFEDsXuTknEePahSRLQ0AXrUjOm7NnGk1OoBAs?key=fxiKk49sVIN7g15cq8xBfw" class="kg-image" alt="How a Simple Figma Component Solved Our Translation Challenges at Flip" loading="lazy" width="606" height="295"></figure>We began by testing the Annotation component on a few small projects, and the efficiency gains were immediately apparent. There was no longer a need to maintain two separate design versions. Instead, engineers could view both language translations within a single design, and they could see exactly which copy was finalized and ready to implement. If a piece of text was still under review, the status would clearly indicate that it wasn&#x2019;t yet ready, preventing confusion and mistakes.The Annotation component also made it easier to track progress. Designers, UX writers, engineers, and stakeholders could all refer to the same design file, which meant there was no need to rely on separate communication channels to get updates. The status system provided a transparent way to monitor which translations were completed, which were in review, and which still needed work.<h3 id="overcoming-challenges">Overcoming Challenges</h3>Of course, the Annotation component wasn&#x2019;t perfect. One of the initial challenges we faced was getting everyone accustomed to the new system. Designers and UX writers had to learn how to use the component effectively, and there was a bit of a learning curve as we worked out the best practices. We also had to ensure that the status system was consistently updated; otherwise, the benefits of the system would be lost. We addressed this by holding regular syncs to review the progress of translations and ensure that everyone was using the component correctly.However, for our typical design needs, the Annotation component provided a straightforward and efficient solution that addressed most of our pain points.<h3 id="two-years-later-still-a-core-part-of-our-workflow">Two Years Later: Still a Core Part of Our Workflow</h3>Now, in 2024, two years after its creation, the Annotation component remains a core part of our design process. While it isn&#x2019;t without its limitations, it&#x2019;s fast, cost-effective, and reliable. The best part is that it has kept our workflow lean and focused, saving us time, reducing errors, and ensuring that the entire team remains on the same page&#x2014;literally and figuratively &#x1F485;.The success of the Annotation component has shown us the value of developing custom solutions tailored to our specific needs, rather than relying on off-the-shelf tools that might not fit our workflow. It&#x2019;s allowed us to manage translations efficiently, without duplicating designs or creating unnecessary complexity.<h3 id="final-thoughts-lessons-learned">Final Thoughts: Lessons Learned</h3>This experience taught us that the most effective solutions don&#x2019;t always require expensive tools or complex systems. Often, they come from a deep understanding of the specific problem and close collaboration within the team to design a solution that fits seamlessly into the workflow. In our case, the Annotation component allowed us to streamline translation management with minimal overhead and clear communication across departments.By adding a simple yet powerful status system, we further improved efficiency, ensuring that everyone involved knew the progress of the copy at any given stage. It&#x2019;s a testament to how small innovations can have a big impact, and how a collaborative, creative approach can lead to practical, lasting solutions. This project reinforced the importance of listening to feedback, iterating on ideas, and finding ways to simplify processes rather than complicate them&#x2014;Hope you enjoyed the lessons learned and solution as well it will inspire you to craft your unique style.&#xA0;We&apos;re a group of passionate individuals who thrive on collaboration and pushing boundaries.&#xA0;<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://tech.flip.id/content/images/2024/12/Lets-Join-The-Rocketship.png" class="kg-image" alt="How a Simple Figma Component Solved Our Translation Challenges at Flip" loading="lazy" width="1921" height="1081" srcset="https://tech.flip.id/content/images/size/w600/2024/12/Lets-Join-The-Rocketship.png 600w, https://tech.flip.id/content/images/size/w1000/2024/12/Lets-Join-The-Rocketship.png 1000w, https://tech.flip.id/content/images/size/w1600/2024/12/Lets-Join-The-Rocketship.png 1600w, https://tech.flip.id/content/images/2024/12/Lets-Join-The-Rocketship.png 1921w" sizes="(min-width: 720px) 720px"><figcaption>Illustration: Join us by applying via flip.id/career</figcaption></figure>

Working as a Product Designer at Flip since 2020, I’ve encountered numerous design challenges, but one of the most memorable was the complex task of managing translations for both English and Bahasa Indonesia. Our goal was to create content that felt natural and localized to each audience, so relying on standard translation tools or AI wasn’t an option. We needed localized translations that accurately captured the tone, style, and context of our app, and that meant working closely with our UX writers, who would craft custom translations for every screen in our designs.
The Initial Approach: Duplicating Designs

At the beginning, our approach seemed straightforward. We thought the simplest solution would be to duplicate each design—one version in English and another in Bahasa Indonesia. This method worked well when designing only a few screens. We’d design the Bahasa Indonesia version first, then create a copy for English, ensuring that all the text was translated by our UX writers.
However, as our product grew and more features were added, the number of screens multiplied, and maintaining two separate design versions became increasingly difficult. Each time we updated a piece of copy, we had to remember to replicate the same change in both versions. This manual process was tedious, error-prone, and not efficient. It required designers to keep track of every small tweak, and the slightest oversight could lead to discrepancies between the two versions. Engineers also struggled because they had to cross-reference between the two designs to ensure everything matched, leading to more errors in the development process.
Lost in Translation: The Figma Comments Experiment 
Recognizing that our initial approach wasn’t sustainable in the long run, we tried using Figma’s comment feature. UX writers would leave translations as comments directly on the design, marking where each English phrase needed to be translated into Bahasa Indonesia. This allowed us to avoid duplicating designs, but it quickly became apparent that this method had its own set of challenges.
As the number of comments grew, it became increasingly difficult to manage. Conversations would often spring up around a single comment, resulting in long, tangled threads that were hard to follow. When someone needed to revise a piece of copy, finding the final, approved version became a frustrating scavenger hunt through dozens of comments and replies.

Another challenge was that it was difficult to track which translations were still under review and which ones were finalized. Overall, this solution made our workflow even messier, and it didn’t provide the clarity we were hoping for. Final verdict: this approach didn’t work 👎🏻
The Brainstorm Session: Searching for a Better Solution

When our previous approach fell short, we didn’t stop there. Instead, we regrouped to rethink our strategy. The challenge was clear: streamline the translation process without juggling multiple design files or drowning in endless comment threads.
To find a solution, our design team held a brainstorming session. We explored various localization tools and plugins, including some tailored for Figma. Yet, many were either overly complex or beyond our budget. We needed something that simplified the process, not added layers of complication.
After much discussion, inspiration struck. “What if we could annotate translations directly in Figma using a single component?” I proposed. The idea was to create a component that flagged text for translation and allowed UX writers to add translations directly within the design, with no duplication needed. The concept drew from how UX writers often include alternative copy notes and we repurposed here for translations with real-time status tracking.
The team was intrigued. We decided to test this idea, excited by its potential to simplify and improve collaboration.
Experimenting the Translation Annotation Component
From this idea, we developed a custom Figma component that we eventually called the “Annotation” component. The concept was straightforward but powerful: instead of duplicating entire designs for different languages, the Annotation component would allow us to mark which text needed translation and display the translation right alongside it. This way, engineers could see both the English and Bahasa Indonesia text within a single design file, simplifying the implementation process.
To further streamline the workflow, we added a status system to the Annotation component to track the progress of translations. The status options included:

Draft – For initial versions of the copy that were placeholders and still needed refinement.
On Review – When the copy was being fine-tuned or reviewed by UX writers, translators, or other stakeholders.
Done – When the translation was final and ready for engineers to implement.
Deprecated – For copy that was no longer in use or needed to be removed from the design.

This status system became an essential feature, especially for engineers and stakeholders who needed a quick overview of the translation process. Now, instead of guessing which translations were finalized and which were still being edited, they could easily see the status of every piece of copy at a glance. This reduced the need for constant back-and-forth communication and helped keep everyone aligned.
Testing and Refining the Solution

We began by testing the Annotation component on a few small projects, and the efficiency gains were immediately apparent. There was no longer a need to maintain two separate design versions. Instead, engineers could view both language translations within a single design, and they could see exactly which copy was finalized and ready to implement. If a piece of text was still under review, the status would clearly indicate that it wasn’t yet ready, preventing confusion and mistakes.
The Annotation component also made it easier to track progress. Designers, UX writers, engineers, and stakeholders could all refer to the same design file, which meant there was no need to rely on separate communication channels to get updates. The status system provided a transparent way to monitor which translations were completed, which were in review, and which still needed work.
Overcoming Challenges
Of course, the Annotation component wasn’t perfect. One of the initial challenges we faced was getting everyone accustomed to the new system. Designers and UX writers had to learn how to use the component effectively, and there was a bit of a learning curve as we worked out the best practices. We also had to ensure that the status system was consistently updated; otherwise, the benefits of the system would be lost. We addressed this by holding regular syncs to review the progress of translations and ensure that everyone was using the component correctly.
However, for our typical design needs, the Annotation component provided a straightforward and efficient solution that addressed most of our pain points.
Two Years Later: Still a Core Part of Our Workflow
Now, in 2024, two years after its creation, the Annotation component remains a core part of our design process. While it isn’t without its limitations, it’s fast, cost-effective, and reliable. The best part is that it has kept our workflow lean and focused, saving us time, reducing errors, and ensuring that the entire team remains on the same page—literally and figuratively 💅.
The success of the Annotation component has shown us the value of developing custom solutions tailored to our specific needs, rather than relying on off-the-shelf tools that might not fit our workflow. It’s allowed us to manage translations efficiently, without duplicating designs or creating unnecessary complexity.
Final Thoughts: Lessons Learned
This experience taught us that the most effective solutions don’t always require expensive tools or complex systems. Often, they come from a deep understanding of the specific problem and close collaboration within the team to design a solution that fits seamlessly into the workflow. In our case, the Annotation component allowed us to streamline translation management with minimal overhead and clear communication across departments.
By adding a simple yet powerful status system, we further improved efficiency, ensuring that everyone involved knew the progress of the copy at any given stage. It’s a testament to how small innovations can have a big impact, and how a collaborative, creative approach can lead to practical, lasting solutions. This project reinforced the importance of listening to feedback, iterating on ideas, and finding ways to simplify processes rather than complicate them
—
Hope you enjoyed the lessons learned and solution as well it will inspire you to craft your unique style. 
We're a group of passionate individuals who thrive on collaboration and pushing boundaries. 
Illustration: Join us by applying via flip.id/career

How a Simple Figma Component Solved Our Translation Challenges at Flip

This blog showcase The Flip Tech Summit 2024 event in Jakarta united engineering leaders and tech innovators to discuss challenges and opportunities in the current "Tech Winter Era." continue reading for full insights and key takeaways from the event

<h2 id="leading-through-the-tech-winter-era-with-innovation-and-efficiency">Leading Through the Tech Winter Era with Innovation and Efficiency</h2><img src="https://tech.flip.id/content/images/2024/12/FTS-2024.png" alt="Flip Tech Summit 2024: Navigating the Future of Tech in the Winter Era">The Flip Tech Summit 2024, held in Jakarta, brought together senior engineering leaders, tech innovators, and industry professionals to address the challenges and opportunities presented by today&#x2019;s economic landscape, often referred to as the &quot;Tech Winter Era.&quot; With a focus on how&#xA0; resource efficiency and adaptability impacts business operations to software architecture, the summit provided actionable insights on how Indonesian tech startups can not only survive but thrive during times of uncertainty.<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://tech.flip.id/content/images/2024/10/Flip-Tech-Summit--4--1.png" class="kg-image" alt="Flip Tech Summit 2024: Navigating the Future of Tech in the Winter Era" loading="lazy" width="2000" height="2000" srcset="https://tech.flip.id/content/images/size/w600/2024/10/Flip-Tech-Summit--4--1.png 600w, https://tech.flip.id/content/images/size/w1000/2024/10/Flip-Tech-Summit--4--1.png 1000w, https://tech.flip.id/content/images/size/w1600/2024/10/Flip-Tech-Summit--4--1.png 1600w, https://tech.flip.id/content/images/size/w2400/2024/10/Flip-Tech-Summit--4--1.png 2400w" sizes="(min-width: 720px) 720px"><figcaption>Flip Tech Summit 2024 Session</figcaption></figure><h2 id="key-takeaways">Key Takeaways </h2><ul><li>Building Resilient Software Architecture: A robust software architecture is vital for weathering economic downturns. The panel on &quot;Thriving in the Funding Winter&quot; highlighted the need for scalable, flexible, and resilient systems that can adapt to unpredictable demands. Yudi Retanto, VP of Engineering at Flip, further elaborated on the importance of architectural shifts that support both current operations and future growth.</li><li>Cultivating a Strong Team Culture: The human element remains crucial, even in the face of technological advancements. Speakers like Ray Frederick, Venture Partner at JWC, stressed the importance of cultivating a strong team culture that fosters collaboration, innovation, and a problem-solving mindset.</li><li>Capital Efficiency as a Competitive Edge: In today&apos;s economic climate, optimizing resources is paramount. Speakers emphasized the crucial role of technology in driving capital efficiency, from automating workflows to optimizing cloud infrastructure. Ibrahim Arief, former CTO at GovTech Edu, underscored the importance of data-driven decision-making through A/B testing and analysis to ensure resources are allocated wisely.</li><li>Embracing Adaptability and Strategic Pivots: The &quot;Redefining Company Journey&quot; panel, featuring Gita Prihanto, former COO at Flip, and other industry leaders, emphasized the importance of adaptability and strategic pivots in navigating a shifting market. They urged companies to embrace change, reassess their goals, and remain agile in uncertain times.</li><li>Innovation as a Driving Force: Luqman Sungkar, CTO at Flip, set the stage for the summit by emphasizing the critical need for innovation in today&apos;s landscape. Companies must be willing to explore new technologies, rethink operational models, and optimize efficiency to remain competitive.</li></ul><h2 id="design-contest-showcase-sparking-innovation">Design Contest Showcase: Sparking Innovation</h2>The summit kicked off with an exciting Design Contest Showcase, where finalists presented their innovative ideas and solutions to a panel of judges and attendees. This session highlighted the creativity and forward-thinking approaches of talented tech professionals, demonstrating how design can play a critical role in solving real-world challenges. The competition set the stage for a day filled with inspiration and fresh perspectives, providing a glimpse into the future of tech innovation.<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://tech.flip.id/content/images/2024/09/KEVN0396.jpg" class="kg-image" alt="Flip Tech Summit 2024: Navigating the Future of Tech in the Winter Era" loading="lazy" width="2000" height="1333" srcset="https://tech.flip.id/content/images/size/w600/2024/09/KEVN0396.jpg 600w, https://tech.flip.id/content/images/size/w1000/2024/09/KEVN0396.jpg 1000w, https://tech.flip.id/content/images/size/w1600/2024/09/KEVN0396.jpg 1600w, https://tech.flip.id/content/images/size/w2400/2024/09/KEVN0396.jpg 2400w" sizes="(min-width: 720px) 720px"><figcaption>Flip UI UX Design Contest</figcaption></figure><h3 id="thriving-not-just-surviving">Thriving, Not Just Surviving</h3>The Flip Tech Summit 2024 painted a picture of a tech industry that is not just surviving the winter, but actively thriving through innovation and resilience. The summit&apos;s insights offer a blueprint for tech leaders to leverage technology strategically, build strong teams, and embrace adaptability to not only weather the storm but also emerge stronger and more prepared for the future.

Leading Through the Tech Winter Era with Innovation and Efficiency

The Flip Tech Summit 2024, held in Jakarta, brought together senior engineering leaders, tech innovators, and industry professionals to address the challenges and opportunities presented by today’s economic landscape, often referred to as the "Tech Winter Era." With a focus on how  resource efficiency and adaptability impacts business operations to software architecture, the summit provided actionable insights on how Indonesian tech startups can not only survive but thrive during times of uncertainty.
Flip Tech Summit 2024 Session
Key Takeaways

Building Resilient Software Architecture: A robust software architecture is vital for weathering economic downturns. The panel on "Thriving in the Funding Winter" highlighted the need for scalable, flexible, and resilient systems that can adapt to unpredictable demands. Yudi Retanto, VP of Engineering at Flip, further elaborated on the importance of architectural shifts that support both current operations and future growth.
Cultivating a Strong Team Culture: The human element remains crucial, even in the face of technological advancements. Speakers like Ray Frederick, Venture Partner at JWC, stressed the importance of cultivating a strong team culture that fosters collaboration, innovation, and a problem-solving mindset.
Capital Efficiency as a Competitive Edge: In today's economic climate, optimizing resources is paramount. Speakers emphasized the crucial role of technology in driving capital efficiency, from automating workflows to optimizing cloud infrastructure. Ibrahim Arief, former CTO at GovTech Edu, underscored the importance of data-driven decision-making through A/B testing and analysis to ensure resources are allocated wisely.
Embracing Adaptability and Strategic Pivots: The "Redefining Company Journey" panel, featuring Gita Prihanto, former COO at Flip, and other industry leaders, emphasized the importance of adaptability and strategic pivots in navigating a shifting market. They urged companies to embrace change, reassess their goals, and remain agile in uncertain times.
Innovation as a Driving Force: Luqman Sungkar, CTO at Flip, set the stage for the summit by emphasizing the critical need for innovation in today's landscape. Companies must be willing to explore new technologies, rethink operational models, and optimize efficiency to remain competitive.

Design Contest Showcase: Sparking Innovation
The summit kicked off with an exciting Design Contest Showcase, where finalists presented their innovative ideas and solutions to a panel of judges and attendees. This session highlighted the creativity and forward-thinking approaches of talented tech professionals, demonstrating how design can play a critical role in solving real-world challenges. The competition set the stage for a day filled with inspiration and fresh perspectives, providing a glimpse into the future of tech innovation.
Flip UI UX Design Contest
Thriving, Not Just Surviving
The Flip Tech Summit 2024 painted a picture of a tech industry that is not just surviving the winter, but actively thriving through innovation and resilience. The summit's insights offer a blueprint for tech leaders to leverage technology strategically, build strong teams, and embrace adaptability to not only weather the storm but also emerge stronger and more prepared for the future.

Flip Tech Summit 2024: Navigating the Future of Tech in the Winter Era

In this blog post, we will dive into the BTS (Behind The Scene) of flip Product Design team  build and develop illustration system

Behind-the-Scenes Progress: Build and Evolve Our Styles, Guidelines Documentation, and Develop Illustration System
In 2020, Flip decided it was time to launch its ownable and unique illustration style. They needed to refresh and realign the brand positioning since the financial sector is typically seen as serious and monotonous. 
Unlike other financial brands, Flip aimed to position itself as warm, approachable, and close to its audience and users. To achieve this goal, flip wanted to incorporate their unique illustration style within their app.
Back Story of Illustration v1.0
In the initial stages, we started to define our identity. Based on the brand's fun and casual tone, we tried many explorations to convey the intended vibrancy. Then, it all boils down to our internal company voting on what they think is the best representation.

We started with a huge gap difference between each alternative before we jumped to more similar options. At this stage, the internal design team decided which technique we wanted to use (see inside the green box in the picture below). We used the crayon technique to add uniqueness to the visual and build up the mood of a casual presence.

Adapting to these preferences, Flip Illustration Style v1.0 made its first release towards the end of the year. It was not a huge haul, instead, we released all assets one by one flow and completed all checkmarks in the first quarter of 2021.
The Illustration Style v1.0 communicated Flip's friendly presence with bright colors, personal closeness through unique brush details, and intentionally designed characters that resonated with Flip's youthful vibe, addressing users as "Kak" (a friendly term in Indonesian, akin to "bro" or "sis") to foster familiarity with the audience. 

Orange and Yellow are (both) the main colors. The shaped base is a flat vector that blends with masking brushes to add depth and dimension to the shape. The casting of light and shadow shaped from crayon effect brushes. All direction is to extract a whimsy and excited mood for every screen appearance.
Subsequently, illustrations in the same style gradually appeared in social media campaigns.

Along the way, we reflect on how we can improve our character. First released we were using the reddish skin tone, after many iterations later we introduced new skin tones to support the diversity of Flip's audience from Sabang to Merauke.

Build-Up Story
Reflecting on the journey, after a full year of greeting Flip app users, we re-evaluated the outcomes of the Illustration Style v1.0 previous year's exploration.
During this period, Flip continued to evolve and recognized shifts in our brand voice. We moved away from using "Kak" as it could be inappropriate in some financial situations, despite our efforts to keep it light-hearted.
Another significant change was the homepage and UI redesign within the Flip app, prompting us to upgrade the existing illustration style. We decided to transition the illustrations to a more mature and dependable persona, especially in financial transactions.
Through our introspection process, we identified several points for development, including:

Warm and bright colors sometimes overwhelm the contrast of primary buttons on app pages.
Character designs are intended to be friendly and playful, as we were aware of this resemblance in common children's book illustrations that might be concerned with the trustworthiness value of our presence.
Polished details complicated the potential for illustration assets to evolve technically for animation and print needs.
Excessive attributes that impacted the quality and file size of exported assets within the application.

Overall, these insights became the starting point for Product Designers to collaborate with the Creative Team in refining and developing the next iteration of the illustration style.
Weakness and Opportunity
We found that the former illustration style (v1.0) needed more depth and contrast in conveying its message. So, we conducted a brainstorming session to collect inspirations that resonated with Flip's presence: fairness, friendliness, and smartness. We compiled several mood boards for evaluation. We worked with existing briefs, exploring different options to gather feedback.
We reflected on what we liked and disliked, learning much from references, from left to right, such as Hergé (Tintin), Noritake, Okamura Yuta, and Adrianne Walujo. What their artwork styles all have in common is the way they tell the narrative, which is neat, thoughtful, and inspiring.

Extracted from all references, our main direction is influenced by key features from the Clear Line style (French: Ligne Claire) which have the characteristics of clarity of contours, scarcely any shadows, and monochromatic coloring of larger surfaces. The features suited Flip's aim to present itself as straightforward, trustworthy, and reliable. 
After several rounds of exploration and feedback, we began experimenting with three options for the proposed illustration style by previewing them on our draft landing page. Comparing the preview of the previous illustration style with proposed alternatives can help us to feel and see the overall ideas first before we consider the technical side.

The pro’s consideration of the new illustration style:

The line is a distinctive boundary between colors and contrast is well defined.
The lack of shading and bold, blocked colors achieved a vibrant look without bright colors.
Simple color means the distribution is set to use less orange to avoid overpowering the call-to-action Flip button on the screen.

Realistic proportions in character design appeared more believable and calm, an expression of a gimmick or exaggeration is less needed.
Arranging facial characteristics and skin colors according to the local community was needed to establish a personal connection with the audience. For international cases, characters were created diverse to fit the destination country.

Uncomplicated details and perspectives lightened users’ cognitive load. Combined, they visualized and narrated neat linework.
Illustrations became easier to animate.

Get Gather Together
How do we know the new illustration style will solve the pain points? It’s a long journey and back-and-forth iterations. We set up workshops between illustrators, creative designers, graphic designers, and product designers to align the art direction we wanted for future assets. We discussed the strengths and opportunities of the proposed new style, and alternative options, reviewed a few cases, and then evaluated them at the end.
We used this set of goals in each step to gather insights and understand the process.

First, we established a foundation in color, lines, and characters for the new illustration style, testing it on the onboarding and some spots that required metaphorical communication.

After completing the necessary details, we built the "Hand Drawn Flat Style" documentation guidelines to align the visuals among fellow designers and illustrators in the future. The guidelines include:

Foreground: Character-driven focus with necessary details like facial expressions, skin color, and body shape to express and simplify ideas.
Background: World-building to support the main characters.
Do’s & Don’ts: Tips for line treatments, ensuring the foreground pops against the background, and setting up scenes.

Implementing the New Illustration Style
The process of developing and exploring the new illustration style took us 3 months, and we launched it in the app at the beginning of 2022.
The cool thing about this new illustration style is its modularity; being fully vector-based makes it super easy to mix and match elements and save everything as components in our asset library.

The impact of this change cut down the time for crafting illustrations from 1-2 days per project to less than 6 hours.

Requests and searches for assets are now more organized and structured. Designers can request illustrations by filling out a form and then accessing the files directly from the component library.

Revising assets is a breeze—just change the master component and it updates all child components in the designers’ files.

With more varied needs, keyword searches make it easy to find what you need. Designers can create wireframes faster with visuals that are already halfway there. 

Revising content is quicker because assets are treated as component variants.

Users will encounter the same character in similar cases. Designers can search using the character's property.

In parallel, we update the former illustration assets with the new one, Illustration Styles v2.0 one by one as per request. As time goes on and on, we have been developing the assets library including more than 500 components from its release in 2021 (eta 30+ months!).

Last, but not least Iterations
After updating our old illustration style to the new one, the process didn’t stop there. This style was crafted collaboratively with in-house illustrators and designers at Flip, allowing for continuous feedback and evaluation. Regularly, we explore our current style redraw from other styles, as we want to evaluate and compare, keeping up with evolving illustration trends.

Guidlines & Documentation
Unlike the surface-level documentation in the 2021 brand guidelines, 18 months later, we released the 2023 Illustration Guidelines, which are much more comprehensive, covering topics like:

Illustration principles: Considerate, Confident, Consistent.
Elements: construction, color, lines, space, foreground, background.
Deeper character design: anatomy, perspective, graphic elements, and decoration.
Differences between assets: icons vs spots vs scenes, divided into 4 categories—Operative, Informative, Descriptive, and Narrative.
Best Practices with do’s and don’ts and case studies.
Technical issues like file formats, artboard sizes, exporting, and even giving structured feedback.

This documentation is essential for other illustrators and designers to get coherent and comprehensive details about the illustrations.
What’s Next?
Our journey of creating and evolving the V2 illustration style comes with several lessons:

Nothing is absolute: Proactively seeking new knowledge and continuous feedback helps connect our thoughts. The world is always changing, this project is, and always will be, an ongoing process for improvement.
Priority: Discussing and aligning milestones can help us to differentiate between what’s the first-things-first and nice-to-have initiatives.
Collaboration: Having a collaborative spirit is important, but equally important is speaking the same language as a foundation to understand the bigger picture and intentions.

When we actively look for new experiences and take the time to think about them, we learn new things and make more connections in our minds.
"You can't connect the dots looking forward; you can only connect them looking backward. So you have to trust that the dots will somehow connect in your future." ― Steve Jobs
We value the work we do, and we couldn’t have done this without the help of many Product and Creative team members.
Big thanks and credit go to these amazing people:

Wildan, and Arham from the Creative team for helping out with collaboration to complete the first phase, their ideas making all of this possible.
Aziz, Ed, and Shaflian from the Product Design team for their constant encouragement and assistance with the technical aspects.
Syifa and Gea for the invaluable feedback, direction, and insight as a guardian of this project.
Once again, thanks for being such a fantastic team. Let's keep flippin’ our creative energy!
—
Hope you enjoyed the journey of Flip Illustration’s behind story as well it will inspire you to craft your unique style. 
We're a group of passionate individuals who thrive on collaboration and pushing boundaries. 
So, why not jump in and be part of something special? We’re hiring!

Behind the Flip's Face: Storytelling and Evolving Illustration Style

In this blog post, we will dive the approach of our Flip's Design team on building custom GPT for content design.

<h2 id="the-chronicles-of-solo-ux-writer-in-the-team">The Chronicles of Solo UX Writer in The Team</h2><img src="https://tech.flip.id/content/images/2024/07/Flip_Content_Design.png" alt="From Scratch to Screen: Building Custom GPT for Content Design">Once upon a time, my manager left the company, and I found myself the only UX writer in Flip. The sudden responsibility of being the only UX writer was overwhelming. During this transition, I need to learn the product knowledge of products I haven&apos;t handled before.&#xA0;Moving from one task to another within a short amount of time was taking my energy and soul. Switching contexts is like juggling act in a circus, striving to keep all the balls of life in the air whilst maintaining my sanity. My tasks piled up and I couldn&#x2019;t decide which project I should do first. I wish Doraemon could invent a tool to help me craft copy and sweep my ClickUp card away.&#xA0;<figure class="kg-card kg-image-card"><img src="https://lh7-us.googleusercontent.com/docsz/AD_4nXc5Cq7RzzMT5gWcu__ms3_7vR2V6n-VFVLId6HIruKlkMK8R_sQ6ug0NOSm13YSm_oTS-q6spoTzmZbkC40YwebF0fQp5vBudApJdoStY-rZxgWiuDpnTWQv4R4bpSpcRNyOOAPSOgKcgC2gZvHdoi-6F4?key=kpg7Mqdk46WI6xtP_y71IA" class="kg-image" alt="From Scratch to Screen: Building Custom GPT for Content Design" loading="lazy" width="889" height="500"></figure>Writing copy is not an easy task to begin with, let alone writing high-quality copies. The writing process needs creativity and clear headspace. For persuasive writing, this process sometimes takes longer time because I need to explore more.<h2 id="the-turning-point-a-whisper-from-the-guru">The Turning Point: A Whisper from The Guru</h2><figure class="kg-card kg-image-card"><img src="https://lh7-us.googleusercontent.com/docsz/AD_4nXcLU1v0MAwM7UDKmC5T4uojDrbUG5rUofyy-SS71pUNJR0l_iW3kGAecZhg8_h5MY4te5dpwyDDJ-RPawZkFAWc49mJ1lsiIh4h_FZwH0-e3SCzfzX7EHQ55tcBx_-quvK5pKnoDu4Crp9S33FC2ENSHGv8?key=kpg7Mqdk46WI6xtP_y71IA" class="kg-image" alt="From Scratch to Screen: Building Custom GPT for Content Design" loading="lazy" width="500" height="281"></figure>During this struggle, my boss recommended that I build a custom GPT to help me write copy for a more efficient workflow. My boss explained that a Custom GPT could be trained specifically for our UX writing needs, making it more efficient and tailored to our style.&#xA0;&#xA0;At first, I was confused what was the difference between custom GPT and regular chatGPT. I had used regular chatGPT and I thought that it helped me even if I needed to refine it many times until I got the expected result.&#xA0;While I was hanging tight in power-saving mode, I needed to allocate my time and energy better during my solo days. So, it was quite a challenge to set aside time for this project. But the promise of a more efficient workflow and the potential to alleviate some of my workload was too tempting to ignore.<h2 id="the-ingredients-tutorial-content-guideline-and-writing-samples">The Ingredients: Tutorial, Content Guideline, and Writing Samples&#xA0;</h2>Despite my doubt, curiosity got the better of me. I decided to try building a Custom GPT.&#xA0; Armed with tutorials from blogs, articles, and YouTube, I plunged myself into the internet to learn how to create custom chat GPT. The process was challenging but exciting, like setting out on a quest with a treasure map in hand.I started by gathering all the essential ingredients: tutorials on how to train AI models, our company&#x2019;s content guidelines, and a vast collection of writing samples from our past projects. These samples included user interface texts, error messages, onboarding copy, and more. It was like feeding the AI a balanced diet of words and phrases specific to our brand and style.<h2 id="cooking-time-process-of-creating-custom-gpt">Cooking Time: Process of Creating Custom GPT</h2>With my ingredients in place, it was time to start the cooking process. Here&#x2019;s how I went about it:<ol><li>Create and Set Up the GPT: Using GPT Plus, I created our custom GPT by clicking the &quot;Create&quot; button on the <a href="https://chatgpt.com/gpts?ref=tech.flip.id">ChatGPT website</a>. I then configured the settings, including the name of the GPT, its description, and instructions.</li></ol><figure class="kg-card kg-image-card"><img src="https://lh7-us.googleusercontent.com/docsz/AD_4nXd5M0nowJqyUZx3HzGnk4KUwa8LGGPJ-zd5xz21abijEdkyqHjr16EVixtuebnAbr-A9qVrA_SBe0vE6cktfuig1SJbC6bn-aCIwFtFgGsW0dAvah9154XHTiOYaEDAY538lmwfjQype3wQIzN09KFnOs48?key=kpg7Mqdk46WI6xtP_y71IA" class="kg-image" alt="From Scratch to Screen: Building Custom GPT for Content Design" loading="lazy" width="960" height="720"></figure><ol start="2"><li>Import Our Style Index: I uploaded our Style Index, providing the GPT with the knowledge of our content guidelines. This step ensured that the AI understood our brand&#x2019;s voice and style requirements.</li></ol><figure class="kg-card kg-image-card"><img src="https://lh7-us.googleusercontent.com/docsz/AD_4nXccmd1Q49csI2pEkgm7MyeeIUmxtxFzR2wr9dzY_BewzkiqXpMAXIRN3z5h1hV3QMEdBaqWHAK94rXeO9Wl--pyTON5fzk25K0SfPKWM9zSa58D_pii1FUmVst8DhRIfTDN_ur05fzi3VSL7TQSsnSAdXc?key=kpg7Mqdk46WI6xtP_y71IA" class="kg-image" alt="From Scratch to Screen: Building Custom GPT for Content Design" loading="lazy" width="1506" height="854"></figure> <ol start="3"><li>Train GPT with Our Writing Samples: Finally, I trained the GPT using our collected writing samples. This training phase was critical, as it taught the AI to generate content that matched our standards and met our UX writing needs.</li></ol><h2 id="serving-the-results-the-impact-of-ai">Serving the Results: The Impact of AI</h2>To my surprise, AI-assisted writing proved to be a game-changer. The most immediate benefit was the time-saving aspect. This newfound efficiency allowed us to focus on more strategic and creative endeavors.It not only helped in generate copy faster but also provided new creative angles and ideas that I hadn&apos;t considered before. While AI did not replace our jobs, it enhanced our capabilities, making us more productive and effective in our roles.&#xA0;As a note, training GPT is a continuous process. Creating a Custom GPT is just the beginning of an ever-evolving process&#xA0;We&apos;re continually training this GPT, especially for Bahasa Indonesia, to meet our expectations and deliver the best results. It&#x2019;s a journey of constant refinement and improvement.It&apos;s important to know that our Custom GPT needs regular training and updates to keep up with our changing content guidelines. As our brand voice and style guidelines evolve, so must our AI. We&apos;re committed to constantly tweaking the model to make sure it stays top-notch and adapts to any shifts in our style index.In short, the Custom GPT is a dynamic tool that grows with us, learning and getting better to serve our needs. This commitment to ongoing training and updates ensures our AI remains a valuable part of our content creation process.<h2 id="%E2%9A%A0%EF%B8%8F-disclaimer">&#x26A0;&#xFE0F; Disclaimer</h2>This article does not endorse solely using AI to replace the UX writer job. Don&#x2019;t worry folks, AI doesn&apos;t replace the need for a skilled UX writer. We still need UX writers to judge the information scent, capture the nuance of the sentence, and apply critical thinking and design principles when writing.&#xA0;AI can&apos;t take into context all the things a human UX writer does &#x2013; and use that to solve human behavioral problems with words. It simply helps to make our work more efficient, saving us valuable time. In summary, AI is a powerful tool that enhances our workflow, but the human touch remains irreplaceable.I believe that every problem comes with solutions. The chronicle of being a solo writer doesn&#x2019;t have to stop you from producing high-quality copy. If you are a solo writer too, I hope this story can inspire you to tackle the problem.&#xA0;P.S.: Flip is hiring! If you resonate with Flip&#x2019;s values, let&#x2019;s join us!<figure class="kg-card kg-image-card"><img src="https://lh7-us.googleusercontent.com/slidesz/AGV_vUdH9RnnnIEqjIwyGuyV_MVmpFEKtRxzeOWP0PFH7ho1amcZsRBpxi2LcLtnFUfPYPkl5qJtmzBlO5s1u0sjjEnn-cFU0P5s7uVzPTFTvk8gLFoDxTl-PhknGhj640oHak0lDJJHCdJaSslUJZwwRvtavC1dRsY=s2048?key=dQtQ0hgGW2YBIqljAzgMLg" class="kg-image" alt="From Scratch to Screen: Building Custom GPT for Content Design" loading="lazy" width="1600" height="900"></figure>

The Chronicles of Solo UX Writer in The Team

Once upon a time, my manager left the company, and I found myself the only UX writer in Flip. The sudden responsibility of being the only UX writer was overwhelming. During this transition, I need to learn the product knowledge of products I haven't handled before. 
Moving from one task to another within a short amount of time was taking my energy and soul. Switching contexts is like juggling act in a circus, striving to keep all the balls of life in the air whilst maintaining my sanity. My tasks piled up and I couldn’t decide which project I should do first. I wish Doraemon could invent a tool to help me craft copy and sweep my ClickUp card away. 

Writing copy is not an easy task to begin with, let alone writing high-quality copies. The writing process needs creativity and clear headspace. For persuasive writing, this process sometimes takes longer time because I need to explore more.

The Turning Point: A Whisper from The Guru

During this struggle, my boss recommended that I build a custom GPT to help me write copy for a more efficient workflow. My boss explained that a Custom GPT could be trained specifically for our UX writing needs, making it more efficient and tailored to our style. 
 At first, I was confused what was the difference between custom GPT and regular chatGPT. I had used regular chatGPT and I thought that it helped me even if I needed to refine it many times until I got the expected result. 
While I was hanging tight in power-saving mode, I needed to allocate my time and energy better during my solo days. So, it was quite a challenge to set aside time for this project. But the promise of a more efficient workflow and the potential to alleviate some of my workload was too tempting to ignore.

The Ingredients: Tutorial, Content Guideline, and Writing Samples 
Despite my doubt, curiosity got the better of me. I decided to try building a Custom GPT.  Armed with tutorials from blogs, articles, and YouTube, I plunged myself into the internet to learn how to create custom chat GPT. The process was challenging but exciting, like setting out on a quest with a treasure map in hand.
I started by gathering all the essential ingredients: tutorials on how to train AI models, our company’s content guidelines, and a vast collection of writing samples from our past projects. These samples included user interface texts, error messages, onboarding copy, and more. It was like feeding the AI a balanced diet of words and phrases specific to our brand and style.
Cooking Time: Process of Creating Custom GPT
With my ingredients in place, it was time to start the cooking process. Here’s how I went about it:

Create and Set Up the GPT: Using GPT Plus, I created our custom GPT by clicking the "Create" button on the ChatGPT website. I then configured the settings, including the name of the GPT, its description, and instructions.

Import Our Style Index: I uploaded our Style Index, providing the GPT with the knowledge of our content guidelines. This step ensured that the AI understood our brand’s voice and style requirements.



Train GPT with Our Writing Samples: Finally, I trained the GPT using our collected writing samples. This training phase was critical, as it taught the AI to generate content that matched our standards and met our UX writing needs.


Serving the Results: The Impact of AI
To my surprise, AI-assisted writing proved to be a game-changer. The most immediate benefit was the time-saving aspect. This newfound efficiency allowed us to focus on more strategic and creative endeavors.
It not only helped in generate copy faster but also provided new creative angles and ideas that I hadn't considered before. While AI did not replace our jobs, it enhanced our capabilities, making us more productive and effective in our roles. 
As a note, training GPT is a continuous process. Creating a Custom GPT is just the beginning of an ever-evolving process 
We're continually training this GPT, especially for Bahasa Indonesia, to meet our expectations and deliver the best results. It’s a journey of constant refinement and improvement.
It's important to know that our Custom GPT needs regular training and updates to keep up with our changing content guidelines. As our brand voice and style guidelines evolve, so must our AI. We're committed to constantly tweaking the model to make sure it stays top-notch and adapts to any shifts in our style index.
In short, the Custom GPT is a dynamic tool that grows with us, learning and getting better to serve our needs. This commitment to ongoing training and updates ensures our AI remains a valuable part of our content creation process.
⚠️ Disclaimer
This article does not endorse solely using AI to replace the UX writer job. Don’t worry folks, AI doesn't replace the need for a skilled UX writer. We still need UX writers to judge the information scent, capture the nuance of the sentence, and apply critical thinking and design principles when writing. 
AI can't take into context all the things a human UX writer does – and use that to solve human behavioral problems with words. It simply helps to make our work more efficient, saving us valuable time. In summary, AI is a powerful tool that enhances our workflow, but the human touch remains irreplaceable.
I believe that every problem comes with solutions. The chronicle of being a solo writer doesn’t have to stop you from producing high-quality copy. If you are a solo writer too, I hope this story can inspire you to tackle the problem. 
P.S.: Flip is hiring! If you resonate with Flip’s values, let’s join us!

From Scratch to Screen: Building Custom GPT for Content Design

In this blog post, we will dive on how Flip Design Department committed to one of core value: Customer Love.

<img src="https://tech.flip.id/content/images/2024/07/Cover-Customer-Love_Dea.png" alt="How Flip&apos;s Design Department Shows Our Customer Love Obsession">At Flip, customer love isn&apos;t just a buzzword; it&apos;s our mantra. Our design department lives and breathes this value, and we&apos;re excited to share how we make it happen.So, grab a cup of coffee (or tea, if that&apos;s your jam), and let us take you behind the scenes of our design team. We&#x2019;re here to spill the tea on how our team&#x2019;s obsession with users drives us to build products that our customers love and use every day to save money through transactions. At Flip, it&#x2019;s not just about making money as a business; it&#x2019;s about helping our users save money and supporting this as a lifestyle &#x2013; it&#x2019;s a win-win business, which makes our work even more exciting!Here&#x2019;s how we keep the user&apos;s love alive and kicking.&#xA0;<h2 id="casual-talks-monthly-conversations-with-users">Casual Talks: Monthly Conversations with Users</h2>Imagine sitting down with your friends, having a relaxed conversation and chit-chat. That&#x2019;s the vibe of our Casual Talks, where we get to know our users better. Every month, we host these laid-back conversations to dive deep into how folks use Flip and what could be better. These aren&#x2019;t your run-of-the-mill surveys; we&#x2019;re talking real conversations. We want to know how you&#x2019;re using Flip, what&#x2019;s working for you, and where we can step up our game. It&apos;s like a coffee date where we listen more than we talk.Even though the event is arranged by the research team, the session is not only attended by researchers, designers, and writers&#x2014;it&#x2019;s a full house with folks from product, business, and even the big execs. We&#x2019;re all ears, and ready to turn your feedback into action. The goal? To keep a constant pulse on user happiness and spot those golden opportunities for improvement.<h2 id="comprehensive-csat-studies-quarterly-check-ups">Comprehensive CSAT Studies: Quarterly Check-Ups</h2>Just like a regular health check-up, we conduct comprehensive Customer Satisfaction (CSAT) studies every quarter. These studies are our way of taking the temperature of user satisfaction and figuring out what needs tweaking. The feedback we gather is our secret sauce, helping us prioritize changes that will make the biggest splash. This way, we keep our users grinning from ear to ear and ensure Flip runs like a well-oiled machine.Our CSAT studies aren&apos;t just data points; they&#x2019;re the cheat sheet for our product roadmap. Every quarter and semester, we use these insights to shape our plans and improvements. It&#x2019;s proof of how seriously we take user feedback and our commitment to continuously leveling up Flip. By turning user insights into action, we&#x2019;re dedicated to keeping our users happy and our app top-notch.<h2 id="co-creation-workshop-designing-together">Co-Creation Workshop: Designing Together</h2>We believe in the magic of co-creation. Why design in a vacuum when you can team up with the very people who use your product every day? That&#x2019;s why we regularly collaborate with our users to test and validate design concepts and copy. This hands-on approach ensures that what we build isn&apos;t just good on paper but works wonders in the real world.As designers, we know that we aren&apos;t our users. Our users come from all walks of life, each with their own unique ways of using Flip. This co-creation process lets us validate our ideas with real people who interact with our app daily, ensuring we don&#x2019;t make decisions based solely on assumptions. By iterating with direct feedback, we craft experiences that truly resonate.<figure class="kg-card kg-image-card"><img src="https://lh7-us.googleusercontent.com/docsz/AD_4nXcsr7ZeOP8EM3RS_mAKNpJ4hHkR6cV1Xtqvbj7IDYoIFhbxsaAfDOKS2y1dmYlLHLTMPIkFxIBeP1GgSAeIRXG2u5r3PfRzHU-Q517rGOXNt4JGttSpHuA_hKE6V7R2eYzKJEd0-SEKuUIK_r-ws8gjk3VV?key=hVk_Jd-X_pr5KQoNnfptDA" class="kg-image" alt="How Flip&apos;s Design Department Shows Our Customer Love Obsession" loading="lazy" width="837" height="521"></figure><h2 id="power-users-our-greatest-allies">Power Users: Our Greatest Allies!</h2>Every superhero team has its trusted allies, and for us, they are our power users. This close-knit group of Flip enthusiasts helps us fine-tune our designs before they hit the mainstream. Their insights are pure gold, allowing us to catch potential issues early and polish our products to perfection.Here&#x2019;s a fun fact: Flip was born because our founder saw an opportunity to save people from paying Rp6.500 for interbank transfers. Back in college, our founder and a small team created a solution to offer this service for free. And guess what? It all started with a simple Typeform! The journey from this hacky way of requesting money to the trusted app we have today is insane. From just a form to a mobile app that lets users make daily transactions, pay bills, request money, transfer internationally, and even provide solutions for businesses and corporations&#x2014;we&#x2019;ve come a long way.But through it all, we&#x2019;ve stayed connected with our loyal customers who have been with us from the start, even before we had our first app. These early adopters, along with many others from various use cases, are our greatest allies in product creation. Their continuous feedback and support help us ensure that Flip remains user-centric and continuously evolving.<h2 id="design-metrics-and-user-impact-measuring-what-matters">Design Metrics and User Impact: Measuring What Matters</h2>At Flip, we believe that great design isn&#x2019;t just about aesthetics; it&#x2019;s about making a tangible impact on our users&apos; lives. That&#x2019;s why we&#x2019;re all about Design Metrics and User Impact. By closely monitoring key metrics, we ensure our designs are not only beautiful but also functional and user-friendly.Design Metrics: The Numbers GameTo keep our designs on point, we track a variety of design metrics. These include:<ul><li>User Engagement: How often are users interacting with our features? Are they coming back regularly?</li><li>Task Success Rate: Are users able to complete their tasks without hiccups?</li><li>Time on Task: How long does it take for users to accomplish what they set out to do?</li><li>Usability Scores: What are users saying about their experience?</li></ul>By analyzing these metrics, we gain valuable insights into what&#x2019;s working and what needs improvement. This data-driven approach helps us make informed design decisions that enhance user experience.User Impact: Real Stories, Real ChangeMetrics are essential, but they&#x2019;re just one side of the coin. We also focus on the real-world impact our designs have on our users. This means listening to user stories and understanding how Flip makes a difference in their daily lives.For instance, when we hear that our app has helped someone save money for their family or made it easier for a small business owner to manage transactions, it reaffirms the importance of our work. These stories drive us to keep innovating and improving.<figure class="kg-card kg-image-card"><img src="https://tech.flip.id/content/images/2024/07/3-my-heart-is-full.gif" class="kg-image" alt="How Flip&apos;s Design Department Shows Our Customer Love Obsession" loading="lazy" width="480" height="268"></figure>Continuous Improvement: The Flip WayOur commitment to design metrics and user impact ensures we&#x2019;re always striving for the better. We regularly review our performance and iterate on our designs based on feedback and data. This continuous improvement mindset is what keeps Flip evolving and our users happy.By balancing quantitative metrics with qualitative insights, we create designs that are not only effective but also deeply meaningful. At Flip, it&#x2019;s all about making a real difference&#x2014;one design at a time.<h2 id="in-the-end-we-know-it-takes-a-village-that%E2%80%99s-why-we-embrace-cross-functional-collaboration%E2%80%94to-ignite-our-collective-spirit-and-bring-our-vision-to-life">In the end, we know it takes a village. That&#x2019;s why we embrace cross-functional collaboration&#x2014;to ignite our collective spirit and bring our vision to life.</h2>Our design department doesn&#x2019;t work in silo. We&#x2019;re in constant collaboration with writers and researchers, forming a dream team dedicated to delivering top-notch user experiences. This synergy ensures that every pixel, word, and interaction is thoughtfully crafted to meet our users&#x2019; needs. Together, we build products that are not only beautiful but also incredibly functional and move the business forward.<figure class="kg-card kg-image-card"><img src="https://tech.flip.id/content/images/2024/07/4-cat-work.gif" class="kg-image" alt="How Flip&apos;s Design Department Shows Our Customer Love Obsession" loading="lazy" width="500" height="281"></figure>At Flip, our obsession with users is more than a company value&#x2014;it&#x2019;s our passion. By engaging with our users, conducting deep-dive research, and fostering a culture of collaboration, we consistently push the envelope to improve our products.Our design department&apos;s dedication to understanding and delighting our users is what makes Flip strive and stand out. Thanks for joining us on this journey&#x2014;we can&#x2019;t wait to keep innovating with you!Stay tuned for another tea!<hr>Ps: We&#x2019;re hiring!Check out our career page here: <a href="https://career.flip.id/jobs?ref=tech.flip.id">https://career.flip.id/jobs</a>&#xA0;<figure class="kg-card kg-image-card"><img src="https://lh7-us.googleusercontent.com/slidesz/AGV_vUdH9RnnnIEqjIwyGuyV_MVmpFEKtRxzeOWP0PFH7ho1amcZsRBpxi2LcLtnFUfPYPkl5qJtmzBlO5s1u0sjjEnn-cFU0P5s7uVzPTFTvk8gLFoDxTl-PhknGhj640oHak0lDJJHCdJaSslUJZwwRvtavC1dRsY=s2048?key=dQtQ0hgGW2YBIqljAzgMLg" class="kg-image" alt="How Flip&apos;s Design Department Shows Our Customer Love Obsession" loading="lazy" width="1600" height="900"></figure>

At Flip, customer love isn't just a buzzword; it's our mantra. Our design department lives and breathes this value, and we're excited to share how we make it happen.
So, grab a cup of coffee (or tea, if that's your jam), and let us take you behind the scenes of our design team. We’re here to spill the tea on how our team’s obsession with users drives us to build products that our customers love and use every day to save money through transactions. At Flip, it’s not just about making money as a business; it’s about helping our users save money and supporting this as a lifestyle – it’s a win-win business, which makes our work even more exciting!
Here’s how we keep the user's love alive and kicking. 
Casual Talks: Monthly Conversations with Users
Imagine sitting down with your friends, having a relaxed conversation and chit-chat. That’s the vibe of our Casual Talks, where we get to know our users better. Every month, we host these laid-back conversations to dive deep into how folks use Flip and what could be better. These aren’t your run-of-the-mill surveys; we’re talking real conversations. We want to know how you’re using Flip, what’s working for you, and where we can step up our game. It's like a coffee date where we listen more than we talk.
Even though the event is arranged by the research team, the session is not only attended by researchers, designers, and writers—it’s a full house with folks from product, business, and even the big execs. We’re all ears, and ready to turn your feedback into action. The goal? To keep a constant pulse on user happiness and spot those golden opportunities for improvement.
Comprehensive CSAT Studies: Quarterly Check-Ups
Just like a regular health check-up, we conduct comprehensive Customer Satisfaction (CSAT) studies every quarter. These studies are our way of taking the temperature of user satisfaction and figuring out what needs tweaking. The feedback we gather is our secret sauce, helping us prioritize changes that will make the biggest splash. This way, we keep our users grinning from ear to ear and ensure Flip runs like a well-oiled machine.
Our CSAT studies aren't just data points; they’re the cheat sheet for our product roadmap. Every quarter and semester, we use these insights to shape our plans and improvements. It’s proof of how seriously we take user feedback and our commitment to continuously leveling up Flip. By turning user insights into action, we’re dedicated to keeping our users happy and our app top-notch.
Co-Creation Workshop: Designing Together
We believe in the magic of co-creation. Why design in a vacuum when you can team up with the very people who use your product every day? That’s why we regularly collaborate with our users to test and validate design concepts and copy. This hands-on approach ensures that what we build isn't just good on paper but works wonders in the real world.
As designers, we know that we aren't our users. Our users come from all walks of life, each with their own unique ways of using Flip. This co-creation process lets us validate our ideas with real people who interact with our app daily, ensuring we don’t make decisions based solely on assumptions. By iterating with direct feedback, we craft experiences that truly resonate.

Power Users: Our Greatest Allies!
Every superhero team has its trusted allies, and for us, they are our power users. This close-knit group of Flip enthusiasts helps us fine-tune our designs before they hit the mainstream. Their insights are pure gold, allowing us to catch potential issues early and polish our products to perfection.
Here’s a fun fact: Flip was born because our founder saw an opportunity to save people from paying Rp6.500 for interbank transfers. Back in college, our founder and a small team created a solution to offer this service for free. And guess what? It all started with a simple Typeform! The journey from this hacky way of requesting money to the trusted app we have today is insane. From just a form to a mobile app that lets users make daily transactions, pay bills, request money, transfer internationally, and even provide solutions for businesses and corporations—we’ve come a long way.
But through it all, we’ve stayed connected with our loyal customers who have been with us from the start, even before we had our first app. These early adopters, along with many others from various use cases, are our greatest allies in product creation. Their continuous feedback and support help us ensure that Flip remains user-centric and continuously evolving.
Design Metrics and User Impact: Measuring What Matters
At Flip, we believe that great design isn’t just about aesthetics; it’s about making a tangible impact on our users' lives. That’s why we’re all about Design Metrics and User Impact. By closely monitoring key metrics, we ensure our designs are not only beautiful but also functional and user-friendly.
Design Metrics: The Numbers Game
To keep our designs on point, we track a variety of design metrics. These include:

User Engagement: How often are users interacting with our features? Are they coming back regularly?
Task Success Rate: Are users able to complete their tasks without hiccups?
Time on Task: How long does it take for users to accomplish what they set out to do?
Usability Scores: What are users saying about their experience?

By analyzing these metrics, we gain valuable insights into what’s working and what needs improvement. This data-driven approach helps us make informed design decisions that enhance user experience.
User Impact: Real Stories, Real Change
Metrics are essential, but they’re just one side of the coin. We also focus on the real-world impact our designs have on our users. This means listening to user stories and understanding how Flip makes a difference in their daily lives.
For instance, when we hear that our app has helped someone save money for their family or made it easier for a small business owner to manage transactions, it reaffirms the importance of our work. These stories drive us to keep innovating and improving.

Continuous Improvement: The Flip Way
Our commitment to design metrics and user impact ensures we’re always striving for the better. We regularly review our performance and iterate on our designs based on feedback and data. This continuous improvement mindset is what keeps Flip evolving and our users happy.
By balancing quantitative metrics with qualitative insights, we create designs that are not only effective but also deeply meaningful. At Flip, it’s all about making a real difference—one design at a time.

In the end, we know it takes a village. That’s why we embrace cross-functional collaboration—to ignite our collective spirit and bring our vision to life.
Our design department doesn’t work in silo. We’re in constant collaboration with writers and researchers, forming a dream team dedicated to delivering top-notch user experiences. This synergy ensures that every pixel, word, and interaction is thoughtfully crafted to meet our users’ needs. Together, we build products that are not only beautiful but also incredibly functional and move the business forward.

At Flip, our obsession with users is more than a company value—it’s our passion. By engaging with our users, conducting deep-dive research, and fostering a culture of collaboration, we consistently push the envelope to improve our products.
Our design department's dedication to understanding and delighting our users is what makes Flip strive and stand out. Thanks for joining us on this journey—we can’t wait to keep innovating with you!
Stay tuned for another tea!

Ps: We’re hiring!
Check out our career page here: https://career.flip.id/jobs

How Flip's Design Department Shows Our Customer Love Obsession

In this blog post, we will dive into the organizing Figma Files with Pizard plugin, explaining how it works, and highlighting the benefits it offers to Figma designers.

<img src="https://tech.flip.id/content/images/2024/04/Creative-Platform---Request-Visual-Banner-for-Flip-Blog-1.png" alt="Organizing Figma Files with custom plugin">In digital design, it&apos;s important to keep things consistent and efficient. Sometimes, designers struggle with organizing pages in Figma projects, which can make things harder for everyone involved.&#xA0;<h2 id="a-designers-dilemma">A Designer&apos;s Dilemma</h2>Each designer has their own way of organizing Figma pages, making it confusing for everyone. When one designer looks at another&apos;s project or a stakeholder opens a Figma file, and it&apos;s messy with different setups on different pages, it makes everything confusing. Let&apos;s take a peek at how these designers handle their projects:<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://tech.flip.id/content/images/2024/04/image6.png" class="kg-image" alt="Organizing Figma Files with custom plugin" loading="lazy" width="1168" height="739" srcset="https://tech.flip.id/content/images/size/w600/2024/04/image6.png 600w, https://tech.flip.id/content/images/size/w1000/2024/04/image6.png 1000w, https://tech.flip.id/content/images/2024/04/image6.png 1168w" sizes="(min-width: 720px) 720px"><figcaption>Sample Figma Designer dilemma on managing various projects</figcaption></figure>Not quite organized, is it?When we had this problem back then&#xA0; there wasn&apos;t a&#xA0; solution for us to solve it. We have a set of Figma standard pages that need to be followed for each project, and the standard pages are as follows:<ol><li>Cover (for thumbnail)</li><li>Project requirements (to document project requirements or metrics we aim to achieve in the project)</li><li>Discovery (containing the results of discovery, data, or research conducted to support design decisions, like funnel data, benchmark, user journey mapping, etc..)</li><li>Design (where the actual design is placed)</li><li>Archive (a place for designs or other elements not used, as deleting is not recommended in Flip to preserve historical design)</li></ol><figure class="kg-card kg-image-card"><img src="https://tech.flip.id/content/images/2024/04/pages-image.png" class="kg-image" alt="Organizing Figma Files with custom plugin" loading="lazy" width="2000" height="826" srcset="https://tech.flip.id/content/images/size/w600/2024/04/pages-image.png 600w, https://tech.flip.id/content/images/size/w1000/2024/04/pages-image.png 1000w, https://tech.flip.id/content/images/size/w1600/2024/04/pages-image.png 1600w, https://tech.flip.id/content/images/2024/04/pages-image.png 2121w" sizes="(min-width: 720px) 720px"></figure>To create these pages, designers would need to manually generate them one by one, a process that is exceedingly time-consuming &#x1F62E;&#x200D;&#x1F4A8;.<figure class="kg-card kg-image-card"><img src="https://tech.flip.id/content/images/2024/04/image1.gif" class="kg-image" alt="Organizing Figma Files with custom plugin" loading="lazy" width="800" height="403" srcset="https://tech.flip.id/content/images/size/w600/2024/04/image1.gif 600w, https://tech.flip.id/content/images/2024/04/image1.gif 800w" sizes="(min-width: 720px) 720px"></figure>So, picture this: designers are buzzing with awesome ideas, ready to slap them onto the Figma canvas. But bam! They hit a roadblock &#x2013; creating each page individually is a total energy drain.&#xA0;Then designers lose those killer ideas because they are too tired from crafting pages one by one. Copy-pasting template files? Yeah, not much better.We saw this problem and decided to fix it. We wrote some code, and boom &#x2013; made a custom plugin. Now, designing is easy-peasy, and we can keep being creative without getting tired from making pages manually. &#x1F3A8;&#x2728;<h2 id="introducing-pizard">Introducing Pizard</h2><figure class="kg-card kg-image-card"><img src="https://tech.flip.id/content/images/2024/04/image2.png" class="kg-image" alt="Organizing Figma Files with custom plugin" loading="lazy" width="1299" height="473" srcset="https://tech.flip.id/content/images/size/w600/2024/04/image2.png 600w, https://tech.flip.id/content/images/size/w1000/2024/04/image2.png 1000w, https://tech.flip.id/content/images/2024/04/image2.png 1299w" sizes="(min-width: 720px) 720px"></figure>Here comes Pizard, the Page Initial Wizard, to tackle the messy and inconsistent ways designers organized Figma projects. Before Pizard came along, every designer did things differently, which made reviewing projects a pain for stakeholders. Without a standard way of doing things, it was tough to go through Figma files. That&apos;s why there was a need for a solution.<h2 id="after-pizard-mission-accomplished">After Pizard: Mission Accomplished</h2>We had an idea to fix this problem by automating it and no more manual work for this. With some coding skills, we tried making our own plugin, and that&apos;s how Pizard came to be. Now, after using the Pizard plugin, our design files are neat and tidy, like chapters in a storybook. This plugin makes sure all our pages have the same structure, making our design process much easierStarting a new project is now just a click away for designers.<figure class="kg-card kg-image-card"><img src="https://tech.flip.id/content/images/2024/04/image8.gif" class="kg-image" alt="Organizing Figma Files with custom plugin" loading="lazy" width="800" height="403" srcset="https://tech.flip.id/content/images/size/w600/2024/04/image8.gif 600w, https://tech.flip.id/content/images/2024/04/image8.gif 800w" sizes="(min-width: 720px) 720px"></figure>So far, this plugin has been super helpful for the design team. Since we started using it, inconsistency is no longer an issue; designers can now directly pour their design ideas into Figma without the added burden of creating initial pages first. Stakeholders find it much easier to provide reviews since each design project adheres to the same structure and standards. With the presence of this plugin, not only does it improve efficiency, but it also creates a positive experience for both designers and stakeholders.By the way, this is not the only plugin that the Flip design team has to address the challenges they face. Previously, we developed FlipDager, which also focuses on enhancing productivity without being burdened by manual tasks. If you&apos;re interested in learning how we create plugins in Figma, you can read about it in this blog [<a href="https://tech.flip.id/streamline-flip-design-workflow-with-flipdager-a-figma-data-generator-plugin/">link here</a>], where we provide a summary of how we develop our own plugins.We hope this blog can inspire you because everyone encounters problems, but what sets people apart is the initiative to solve those problems, not just staying silent and letting the wound remain open without taking action to heal it.<hr>We hope that our plugin and this article serve as an inspiration, encouraging you to consistently pursue excellence in your design work.Let&apos;s join forces to create a positive influence and craft valuable solutions for the design community. Through collaboration, we can elevate the design standards and breathe life into our shared passion.PS: If you resonate with our vision for the future of work, we invite you to join the Flip family &#x1F64C;&#x1F3FB;.<figure class="kg-card kg-image-card"><a href="https://career.flip.id/?ref=tech.flip.id"><img src="https://lh4.googleusercontent.com/XEONVBW1L-C9vfV1NrLNjWhvGBYk5lQfl10op5oDD8W5LroGTfPcAs-gpZNg1scAwhryGmPjPZAmgd7AlU-0yAmC4C4pPMEHaUM7lzWTss7DwB1kgXa56MPtliYLFxYXNIuQhhiusxcsvRrCzg42JAY" class="kg-image" alt="Organizing Figma Files with custom plugin" loading="lazy" width="1600" height="900"></a></figure>

In digital design, it's important to keep things consistent and efficient. Sometimes, designers struggle with organizing pages in Figma projects, which can make things harder for everyone involved. 
A Designer's Dilemma
Each designer has their own way of organizing Figma pages, making it confusing for everyone. When one designer looks at another's project or a stakeholder opens a Figma file, and it's messy with different setups on different pages, it makes everything confusing. Let's take a peek at how these designers handle their projects:
Sample Figma Designer dilemma on managing various projects
Not quite organized, is it?
When we had this problem back then  there wasn't a  solution for us to solve it. We have a set of Figma standard pages that need to be followed for each project, and the standard pages are as follows:

Cover (for thumbnail)
Project requirements (to document project requirements or metrics we aim to achieve in the project)
Discovery (containing the results of discovery, data, or research conducted to support design decisions, like funnel data, benchmark, user journey mapping, etc..)
Design (where the actual design is placed)
Archive (a place for designs or other elements not used, as deleting is not recommended in Flip to preserve historical design)

To create these pages, designers would need to manually generate them one by one, a process that is exceedingly time-consuming 😮‍💨.

So, picture this: designers are buzzing with awesome ideas, ready to slap them onto the Figma canvas. But bam! They hit a roadblock – creating each page individually is a total energy drain. 
Then designers lose those killer ideas because they are too tired from crafting pages one by one. Copy-pasting template files? Yeah, not much better.
We saw this problem and decided to fix it. We wrote some code, and boom – made a custom plugin. Now, designing is easy-peasy, and we can keep being creative without getting tired from making pages manually. 🎨✨
Introducing Pizard

Here comes Pizard, the Page Initial Wizard, to tackle the messy and inconsistent ways designers organized Figma projects. Before Pizard came along, every designer did things differently, which made reviewing projects a pain for stakeholders. Without a standard way of doing things, it was tough to go through Figma files. That's why there was a need for a solution.

After Pizard: Mission Accomplished
We had an idea to fix this problem by automating it and no more manual work for this. With some coding skills, we tried making our own plugin, and that's how Pizard came to be. Now, after using the Pizard plugin, our design files are neat and tidy, like chapters in a storybook. This plugin makes sure all our pages have the same structure, making our design process much easier
Starting a new project is now just a click away for designers.

So far, this plugin has been super helpful for the design team. Since we started using it, inconsistency is no longer an issue; designers can now directly pour their design ideas into Figma without the added burden of creating initial pages first. Stakeholders find it much easier to provide reviews since each design project adheres to the same structure and standards. With the presence of this plugin, not only does it improve efficiency, but it also creates a positive experience for both designers and stakeholders.
By the way, this is not the only plugin that the Flip design team has to address the challenges they face. Previously, we developed FlipDager, which also focuses on enhancing productivity without being burdened by manual tasks. If you're interested in learning how we create plugins in Figma, you can read about it in this blog [link here], where we provide a summary of how we develop our own plugins.
We hope this blog can inspire you because everyone encounters problems, but what sets people apart is the initiative to solve those problems, not just staying silent and letting the wound remain open without taking action to heal it.

We hope that our plugin and this article serve as an inspiration, encouraging you to consistently pursue excellence in your design work.
Let's join forces to create a positive influence and craft valuable solutions for the design community. Through collaboration, we can elevate the design standards and breathe life into our shared passion.
PS: If you resonate with our vision for the future of work, we invite you to join the Flip family 🙌🏻.

Organizing Figma Files with custom plugin

In this blog post, we will dive into the development process of the FlipDager plugin, explaining how it works, and highlighting the benefits it offers to Figma designers.

<img src="https://tech.flip.id/content/images/2023/09/cover-flip-dager_magician_logo.png" alt="Streamline Flip Design Workflow with FlipDager: A Figma Data Generator Plugin">As designers, our primary focus centers on enhancing the core usability and aesthetics of our products, ensuring they offer a seamless and visually appealing experience for users. But we&apos;ve also realized how crucial it is to incorporate real user data into our designs. This helps us truly understand how users interact with our products in everyday situations.. Through our observations, we&apos;ve noticed that many designers often utilize generic placeholders like &quot;Lorem Ipsum&quot; or made up names such as &quot;John Doe,&quot; or even humorous names like &quot;Edwardo Cullen,&quot; often drawn from team members, which may not accurately represent our local user base. By overlooking the integration of authentic user data into our designs, we run the risk of creating blind spots that could potentially compromise the usability and overall effectiveness of our products.<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://tech.flip.id/content/images/2023/09/image_1-1.gif" class="kg-image" alt="Streamline Flip Design Workflow with FlipDager: A Figma Data Generator Plugin" loading="lazy" width="800" height="450" srcset="https://tech.flip.id/content/images/size/w600/2023/09/image_1-1.gif 600w, https://tech.flip.id/content/images/2023/09/image_1-1.gif 800w" sizes="(min-width: 720px) 720px"><figcaption>Changing this data one by one is such a hassle!</figcaption></figure>Consider these scenarios:<ul><li>What if a user&apos;s name is longer than expected and doesn&apos;t fit in the designated space?</li><li>What if the address field proves too short to adequately accommodate real addresses conforming to local formats?</li><li>How should the design handle multiple bank accounts or contacts with similar names?</li><li>What if there&apos;s a need to display dozens or even hundreds of data points on a single page? </li></ul>These are just a few examples that highlight the importance of when realistic data is not considered during the design process. In addition to that, generating our own realistic data manually is a tedious process, time-consuming, and prone to bias. To address the need for more accurate and meaningful design representations, we came up with the idea to create a Data Generator for Figma Plugin called FlipDager. This plugin aims to assist designers in visualizing how users would truly interact with their products by generating realistic user data directly into the design with only a few clicks. In this blog post, we will dive into the development process of the FlipDager plugin, explaining how it works, and highlighting the benefits it offers to Figma designers. By using this plugin, designers can focus more on crafting, allowing them to have more time to create user-centric designs. We also strive to extend our knowledge and help designers beyond the Flip community empowering them to elevate their design process and produce designs that make a lasting impact. <h1 id="flip-data-generator-aka-flipdager">Flip Data Generator a.k.a FlipDager </h1>Curious about FlipDager? Allow us to introduce it to you. FlipDager is a dynamic plugin designed to harness data gathered from diverse sources, encompassing both the internet and our internal Flip dataset. Its primary function is to seamlessly fill text elements within your design with contextually relevant information. With just a simple click of a button, FlipDager empowers you to effortlessly generate lifelike dummy data, including: <ul><li>Individual names</li><li>Names of Indonesian banks</li><li>Indonesian addresses</li><li>And much more&#x2026;</li></ul><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://tech.flip.id/content/images/2023/09/image_2-1.gif" class="kg-image" alt="Streamline Flip Design Workflow with FlipDager: A Figma Data Generator Plugin" loading="lazy" width="800" height="1444" srcset="https://tech.flip.id/content/images/size/w600/2023/09/image_2-1.gif 600w, https://tech.flip.id/content/images/2023/09/image_2-1.gif 800w" sizes="(min-width: 720px) 720px"><figcaption>FlipDager&apos;s UI design: sleek, straightforward, and seriously handy</figcaption></figure>As a result, our design time has been significantly reduced, because we no longer have to manually gather and input data. This plugin simplifies the entire process, enabling us to quickly and effectively integrate pertinent data into our designs. The plugin is designed to work seamlessly with our existing design workflows. We created this in our design kitchen so that it is fully customizable, allowing us to manage the data that we want to display in our designs. We can add any data that we want to add by creating a set of data and putting it into an array, then calling it randomly to make variations when it is implemented on the design.<h1 id="interesting%E2%80%A6-but-how-to-make-it">Interesting&#x2026; But how to make it?</h1>Creating the Flip Dagger plugin is quite straightforward, especially if you have a basic knowledge of JavaScript programming and are familiar with the Figma API. The essential process involves collecting the required data and organizing it into an array, then we automate the unique population of this data through buttons. Here&apos;s how it works:<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://tech.flip.id/content/images/2023/09/image_3-1.png" class="kg-image" alt="Streamline Flip Design Workflow with FlipDager: A Figma Data Generator Plugin" loading="lazy" width="2000" height="1632" srcset="https://tech.flip.id/content/images/size/w600/2023/09/image_3-1.png 600w, https://tech.flip.id/content/images/size/w1000/2023/09/image_3-1.png 1000w, https://tech.flip.id/content/images/size/w1600/2023/09/image_3-1.png 1600w, https://tech.flip.id/content/images/2023/09/image_3-1.png 2000w" sizes="(min-width: 720px) 720px"><figcaption>No rocket science here, just hunt for the data within the array.</figcaption></figure> No worries if a few lines of code make you break a sweat. You can always seek assistance from your friendly engineering teammate. The great news is that we&apos;ve made the code open source, to provide you with the chance to improve and refine it even more. Check out the code: <a href="https://github.com/flip-id/FllipDager.git?ref=tech.flip.id">https://github.com/flip-id/FllipDager.git</a><h1 id="the-impact">The Impact</h1>Imagine having to write unique names on a design in Figma like this:<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://tech.flip.id/content/images/2023/09/image_4-1.png" class="kg-image" alt="Streamline Flip Design Workflow with FlipDager: A Figma Data Generator Plugin" loading="lazy" width="2000" height="1124" srcset="https://tech.flip.id/content/images/size/w600/2023/09/image_4-1.png 600w, https://tech.flip.id/content/images/size/w1000/2023/09/image_4-1.png 1000w, https://tech.flip.id/content/images/size/w1600/2023/09/image_4-1.png 1600w, https://tech.flip.id/content/images/size/w2400/2023/09/image_4-1.png 2400w" sizes="(min-width: 720px) 720px"><figcaption>Perhaps you&apos;re dealing with a hefty dose of input and crafting custom data like this.</figcaption></figure>The process would involve clicking on the text component and typing each name one by one, repeating the process until all the data is filled. Under normal typing conditions, within approximately 1 minute, we can only input around 16 unique name data into the design. Using FlipDager is a breeze for designers. Just choose the text component you want to populate with data, and with a simple click of the FlipDager button, voila! All the data is filled in automatically.<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://tech.flip.id/content/images/2023/09/image_5-1.gif" class="kg-image" alt="Streamline Flip Design Workflow with FlipDager: A Figma Data Generator Plugin" loading="lazy" width="800" height="527" srcset="https://tech.flip.id/content/images/size/w600/2023/09/image_5-1.gif 600w, https://tech.flip.id/content/images/2023/09/image_5-1.gif 800w" sizes="(min-width: 720px) 720px"><figcaption>With FlipDager, everything becomes effortless with just a single click!</figcaption></figure>When using FlipDager, you can generate 90 data entries in just one minute. If you do the math, FlipDager significantly boosts productivity compared to the time-consuming manual data input method. This means designers can direct their focus to more critical tasks that truly matter. If you&apos;re interested in learning how to create a custom Figma plugin, you can find detailed information in the Figma documentation at this link: <a href="https://www.figma.com/plugin-docs/plugin-quickstart-guide?ref=tech.flip.id">https://www.figma.com/plugin-docs/plugin-quickstart-guide</a> <hr>We hope that our plugin and this article serve as an inspiration, encouraging you to consistently pursue excellence in your design work. At Flip, our core values of Customer Love and Ownership are held in high regard, driving us to serve our users with integrity and dedication. Let&apos;s join forces to create a positive influence and craft valuable solutions for the design community. Through collaboration, we can elevate the design standards and breathe life into our shared passion. PS: If you resonate with our vision for the future of work, we invite you to join the Flip family &#x1F64C;&#x1F3FB;.<figure class="kg-card kg-image-card"><a href="https://career.flip.id/?ref=tech.flip.id"><img src="https://lh4.googleusercontent.com/XEONVBW1L-C9vfV1NrLNjWhvGBYk5lQfl10op5oDD8W5LroGTfPcAs-gpZNg1scAwhryGmPjPZAmgd7AlU-0yAmC4C4pPMEHaUM7lzWTss7DwB1kgXa56MPtliYLFxYXNIuQhhiusxcsvRrCzg42JAY" class="kg-image" alt="Streamline Flip Design Workflow with FlipDager: A Figma Data Generator Plugin" loading="lazy" width="1600" height="900"></a></figure>

As designers, our primary focus centers on enhancing the core usability and aesthetics of our products, ensuring they offer a seamless and visually appealing experience for users. But we've also realized how crucial it is to incorporate real user data into our designs. This helps us truly understand how users interact with our products in everyday situations.. Through our observations, we've noticed that many designers often utilize generic placeholders like "Lorem Ipsum" or made up names such as "John Doe," or even humorous names like "Edwardo Cullen," often drawn from team members, which may not accurately represent our local user base.

By overlooking the integration of authentic user data into our designs, we run the risk of creating blind spots that could potentially compromise the usability and overall effectiveness of our products.
Changing this data one by one is such a hassle!
Consider these scenarios:

What if a user's name is longer than expected and doesn't fit in the designated space?
What if the address field proves too short to adequately accommodate real addresses conforming to local formats?
How should the design handle multiple bank accounts or contacts with similar names?
What if there's a need to display dozens or even hundreds of data points on a single page?


These are just a few examples that highlight the importance of when realistic data is not considered during the design process. In addition to that, generating our own realistic data manually is a tedious process, time-consuming, and prone to bias.

To address the need for more accurate and meaningful design representations, we came up with the idea to create a Data Generator for Figma Plugin called FlipDager. This plugin aims to assist designers in visualizing how users would truly interact with their products by generating realistic user data directly into the design with only a few clicks.

In this blog post, we will dive into the development process of the FlipDager plugin, explaining how it works, and highlighting the benefits it offers to Figma designers. By using this plugin, designers can focus more on crafting, allowing them to have more time to create user-centric designs. We also strive to extend our knowledge and help designers beyond the Flip community empowering them to elevate their design process and produce designs that make a lasting impact. 

Flip Data Generator a.k.a FlipDager

Curious about FlipDager? Allow us to introduce it to you. FlipDager is a dynamic plugin designed to harness data gathered from diverse sources, encompassing both the internet and our internal Flip dataset. Its primary function is to seamlessly fill text elements within your design with contextually relevant information. With just a simple click of a button, FlipDager empowers you to effortlessly generate lifelike dummy data, including:


Individual names
Names of Indonesian banks
Indonesian addresses
And much more…
FlipDager's UI design: sleek, straightforward, and seriously handy
As a result, our design time has been significantly reduced, because we no longer have to manually gather and input data. This plugin simplifies the entire process, enabling us to quickly and effectively integrate pertinent data into our designs.

The plugin is designed to work seamlessly with our existing design workflows. We created this in our design kitchen so that it is fully customizable, allowing us to manage the data that we want to display in our designs. We can add any data that we want to add by creating a set of data and putting it into an array, then calling it randomly to make variations when it is implemented on the design.
Interesting… But how to make it?
Creating the Flip Dagger plugin is quite straightforward, especially if you have a basic knowledge of JavaScript programming and are familiar with the Figma API.

The essential process involves collecting the required data and organizing it into an array, then we automate the unique population of this data through buttons.

Here's how it works:
No rocket science here, just hunt for the data within the array.
No worries if a few lines of code make you break a sweat. You can always seek assistance from your friendly engineering teammate. The great news is that we've made the code open source, to provide you with the chance to improve and refine it even more.
Check out the code: https://github.com/flip-id/FllipDager.git
The Impact
Imagine having to write unique names on a design in Figma like this:
Perhaps you're dealing with a hefty dose of input and crafting custom data like this.
The process would involve clicking on the text component and typing each name one by one, repeating the process until all the data is filled. Under normal typing conditions, within approximately 1 minute, we can only input around 16 unique name data into the design.

Using FlipDager is a breeze for designers. Just choose the text component you want to populate with data, and with a simple click of the FlipDager button, voila! All the data is filled in automatically.
With FlipDager, everything becomes effortless with just a single click!
When using FlipDager, you can generate 90 data entries in just one minute. If you do the math, FlipDager significantly boosts productivity compared to the time-consuming manual data input method. This means designers can direct their focus to more critical tasks that truly matter.

If you're interested in learning how to create a custom Figma plugin, you can find detailed information in the Figma documentation at this link: https://www.figma.com/plugin-docs/plugin-quickstart-guide

We hope that our plugin and this article serve as an inspiration, encouraging you to consistently pursue excellence in your design work.

At Flip, our core values of Customer Love and Ownership are held in high regard, driving us to serve our users with integrity and dedication.

Let's join forces to create a positive influence and craft valuable solutions for the design community. Through collaboration, we can elevate the design standards and breathe life into our shared passion.

PS: If you resonate with our vision for the future of work, we invite you to join the Flip family 🙌🏻.

Streamline Flip Design Workflow with FlipDager: A Figma Data Generator Plugin

The journey of how we started Mobile Automation Testing to minimize our regression testing time.

<h3 id="starting-out-with-mobile-automation-testing">Starting out with Mobile Automation Testing</h3><img src="https://tech.flip.id/content/images/2023/01/cover-1189x622-1.png" alt="Flip Mobile Automation Testing Journey">We wanted to share the experience of how we are improving our mobile app automation strategy over time. It&#x2019;s been a learning experience for us, despite the fact that we have several tasks to deliver. Meanwhile, we still need to keep maintaining our mobile automation tests. When we first embarked on our mobile automation journey in March 2020, Flip had 50 employees and was struggling with the flow of testing. At that time, we did not have much experience in developing mobile automation and we ran most of the test cases manually. As the time went on, Flip grew faster with many product initiatives and features, and the number of Test Engineers (TE) and Mobile Engineers also increased, but we still focused on doing manual testing to keep up with the product release scope, and we didn&#x2019;t allocate enough time to write automated tests. As a result, our regression time got longer in every release. We even reached 3 weeks in one cycle, so we wanted to reduce the manual effort for testing by ensuring all test cases that can be automated will be automated. Our challenge had just started as we didn&#x2019;t have enough experience and time in developing the mobile automation, and most of our time was spent to complete the feature testing and regression. In order to achieve the scale needed to grow through this phase, we must start utilizing mobile automation tests and having collaboration with Mobile Engineers. Soon after, we started experimenting with some tools. We found a way to set up mobile automation testing with a comprehensive tool and framework built using <a href="https://webdriver.io/docs/frameworks/?ref=tech.flip.id">WebdriverIO</a>. In the first phase, we started exploring ways to run the mobile automation tests. We found 2 options (<a href="https://appium.io/?ref=tech.flip.id">Appium</a> and <a href="https://wix.github.io/Detox/?ref=tech.flip.id">Detox</a>) and decided to go with Appium because of the following reasons:<ul><li>Appium supports JavaScript. It was important for our team to have tests written in JavaScript because it is our main programming language for Mobile and Test Engineers.</li><li>Open source, as well as frequently maintained.</li><li>Many communities. </li></ul>Next, once automation had been added, our next target was to run the mobile automation tests on a schedule using cloud devices. At this stage, we needed to research cloud devices for mobile apps and determined the criteria that meet our requirements. We did a comparison and comprehensive analysis during PoC with selected vendors, and here are some of our criteria:<ul><li>Reliable and scalable</li><li>Easier and faster way to set up with our mobile automation framework</li><li>Cost-effective pricing</li><li>Strong customer support team focused on solving issues</li></ul>Based on those, we made a decision to choose <a href="https://www.lambdatest.com/?ref=tech.flip.id">LambdaTest</a>, and set up our test environment to reduce our manual testing process. In the end, by starting mobile automation testing and also running those tests on a schedule using cloud devices, there are several benefits we gain, including:<ul><li>Allowing Mobile Engineers to create the automation tests based on JavaScript independently without the involvement of the Test Engineers.</li><li>Simplifying the test interaction with the application by using WebdriverIO and providing a set of plugins to help create scalable and robust end-to-end test scenarios on mobile devices.</li><li>Creating readable test cases using <a href="https://jasmine.github.io/?ref=tech.flip.id">Jasmine</a> so that non-engineers can also understand our test cases.</li><li>Reducing the regression time by covering more test cases in our end-to-end test.</li><li>Having integrated with cloud devices, we can have a more scalable way to run the automation tests reliably and get the test execution results faster. </li></ul><h3 id="challenges-and-obstacles">Challenges and Obstacles</h3>As we progressed in our journey, we faced several challenges and obstacles along the way:
<ol>
<li>Flip users who use Google TalkBack get misleading information from our application.</li>
<li>We could not identify some elements on iOS, such as the <code>getText()</code> value. As a result, we couldn&#x2019;t use it for assertion in our automation tests.</li>
<li>Sometimes we needed to redefine a similar component multiple times, since we had different teams involved working on the same element, and it caused high maintenance, such as:
<ul>
<li>Page elements inconsistency</li>
<li>Unstructured scenarios (in the Jasmine test specification)</li>
<li>Too many imported files</li>
<li>A similar function that can actually be reused</li>
</ul>
</li>
</ol>
After trying to identify the challenges and obstacles, we tried to make some improvements. First, we wanted to fix the first and second issues. We used `accessibilityLabel` as the selector for identifying elements in automation tests, and this caused several problems:<ol><li>The `accessibilityLabel` is used in Google TalkBack, the accessibility service for the Android operating system that helps blind and visually impaired users to interact with their devices. In our case, they would have challenges in identifying the UI elements to press. For example, the application will read &quot;LOGIN_SCENE-BUTTON-LOGIN&quot;, while it should be called &quot;Login Button&quot;.</li></ol><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://lh3.googleusercontent.com/8gd-vNcXzb1T-skdTB4MxJUTsonFn5cSlw5blAWBmOPNw1xL4nqM_zp5DoRcJbiWQTqTxnHyjXxd-9tw2suKfF5oYqKgYPD5jcbiVo45-e2_7RZRdP86KXQz07leONDz1mzxkknuHHViJen3He5DFHRPQNvVENa_My9Mu4K_2LMO_uRDnWOhkyF9RXtBEA" class="kg-image" alt="Flip Mobile Automation Testing Journey" loading="lazy" width="818" height="1388"><figcaption>Illustration: Login scene elements</figcaption></figure>2. The `getText()` function doesn&#x2019;t work in iOS and it always returns the value of the `accessibilityLabel` instead of the text value of the element. We had several options to solve this at that time. First, by changing the `accessibilityLabel` to text information for more readability, for example, our previous `accessibilityLabel` had the attribute name: BUTTON_UPLOAD_RECEIPT_COMPONENT-BUTTON-UPLOAD_RECEIPT, and we changed it to &#x201C;Upload Receipt Button&#x201D;. So, users who use Google TalkBack will listen to the correct description of the element. However, problem number two was still not resolved, because the `accessibilityLabel` still replaces both the name and label attributes. Another solution is to use the `testID` attribute on each element to ensure that the element is always findable via Appium and also readable by Google TalkBack. In the past, we only used `accessibilityLabel`, also known as `accessibility-id` without combining `resource-id` with content-description. We have tried to switch to using `testID` before and found this change was straightforward. On iOS, both the `testID` and `accessibilityLabel` attributes work in the same way. They first try to match the name attribute and then fall back to the label attribute. If we want to use both the `testID` and `accessibilityLabel` attributes, we know that they correspond to the label and name element attributes respectively. This can be easily verified using Appium Desktop. On Android, the `testID` and `accessibilityLabel` attributes work differently than on iOS. Instead of using the `accessibility-id` strategy to try to find elements that match the content-desc attribute, the `id` strategy should be used to try to match the `resource-id` element attribute. And this is how we declare it. For example, from previous content description ONBOARDING_SCENE-VIEW-START_USING_FLIP, we combine the resource id with content description to become &#x201C;id.flip.staging:id/ONBOARDING_SCENE-VIEW-START_USING_FLIP&#x201D;. <figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://tech.flip.id/content/images/2023/01/Tabel-1-.png" class="kg-image" alt="Flip Mobile Automation Testing Journey" loading="lazy" width="1000" height="523" srcset="https://tech.flip.id/content/images/size/w600/2023/01/Tabel-1-.png 600w, https://tech.flip.id/content/images/2023/01/Tabel-1-.png 1000w" sizes="(min-width: 720px) 720px"><figcaption>Illustration: Before and after of onboarding scene view</figcaption></figure>As a result, with this implementation, Flip users who use Google TalkBack will get the correct text information from the screen reader and interact well with the Flip application on their devices. We also have a unique identifier for getting the element via a selector. We can also solve the issue of `getText()` value on iOS and perform more assertions in the automation tests.After we solved the first and second challenges, we then tried to solve the last one. The last challenge came up since Flip was growing fast with a significant addition of Test Engineers and we needed to maintain our mobile automation tests for each squad. During the development of the mobile automation tests, sometimes we used different practices, and each squad had an independent package folder of their page elements which resulted in page elements or flows (e.g. login flow) to be developed in silos and might end up as duplicates.To solve it, we implemented the Page Object Model (POM), a design pattern in an automation framework that creates an object repository for storing mobile elements. Using the Page Object Model, each page of an application is represented as a class. Each class contains only the corresponding page elements. Test Engineers then perform test operations using these elements in the application under test.For some end-to-end test cases that involve repetitive steps, such as Login flow or Registration flow, we also adopt the Facade pattern as an extension of the Page Object Model pattern. <figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://lh4.googleusercontent.com/JFP0slvHvw1nQwCkt2ourijAeyA21AreGDqgAEXqryRnAW3Hws42TFnkbJMDMN5V9wEDJGa2XicYBZ1WSq_DTCWhHWZrvcZy352AJBHaDW5FJBPPqTKCMYd9bubQkhvjktsCnnpf8PetVFWM52jTADUYYPW64BvxQGXaiNIyaXiT3eD_btNShxHRMPrumQ" class="kg-image" alt="Flip Mobile Automation Testing Journey" loading="lazy" width="1151" height="468"><figcaption>Illustration: Login Flow in Flip App</figcaption></figure><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://tech.flip.id/content/images/2023/01/Bagan.png" class="kg-image" alt="Flip Mobile Automation Testing Journey" loading="lazy" width="1000" height="523" srcset="https://tech.flip.id/content/images/size/w600/2023/01/Bagan.png 600w, https://tech.flip.id/content/images/2023/01/Bagan.png 1000w" sizes="(min-width: 720px) 720px"><figcaption>Illustration: Extend Each Page Object into Facade Class</figcaption></figure>As an example, we commonly use Login flow as a precondition when executing test cases across all teams. By implementing the Facade pattern, we don&#x2019;t need to deal with each Page Object class individually in our test case. Instead, we can interact directly with the Facade class. In the end, the POM pattern helped us to enhance our test maintenance, reduce code duplication, allow us to easily update page element locators without affecting our test cases, and solve the third challenge that we faced in our mobile test automation journey. <h3 id="summary">Summary</h3><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://lh5.googleusercontent.com/rD23-SfbRdQ805_qCQuTqiCpmUR22gYBdAeiFI1SPkePwBtEB3qyjcvfPz47SWVeFzY6C1rh_5Zmko1t7beC-W_LPHTW7RWVjFraDiGTO6Vjd-MQpjVRLGw5DIy50ukmC5wu5hO__DIFyEl6sQZ5WHriZP5l0HU8JL-VDuNhmxkE4LAQDWDOvtspftA2yQ" class="kg-image" alt="Flip Mobile Automation Testing Journey" loading="lazy" width="1200" height="628"><figcaption>Illustration: Flip Mobile Automation Impact</figcaption></figure>Before the start of our journey, our regression testing cycle required three weeks to finish and our mobile automation test case coverage was still low below 10%. After some improvements that we have made as part of our journey, now we can shorten our regression testing cycle into seven days and increase the automated test case coverage to 40%, while manual testing covers the rest. With `TestID`, Google TalkBack runs correctly to help the blind and visually impaired users interact with Flip on their devices. Finally, implementing mobile automation with the POM design pattern reduces our code duplication and improves the test case maintenance. For those who just started your mobile automation journey, full automation may seem a far-off goal. Certainly, it would not be possible to achieve it overnight. Test automation is not a rocket science and its success depends on our strategy to solve problems gradually and tackle the challenges and bottlenecks effectively. All decisions will have pros and cons, but we should choose wisely the solution that is right for the problem we face. Testing using automated testing is easier, faster, and saves time compared to manual testing. The test code is reusable, and we can easily execute the test cases over and over again. So, what are you waiting for? Let&#x2019;s start replacing your repeating manual test cases (e.g. in regression phase) with automation tests! Note: If you want to be a part of us to improve our mobile automation testing, you can find the opportunities <a href="https://flip.id/en/karir?ref=tech.flip.id">here</a> &#x1F41E;&#x1F3C6;

Starting out with Mobile Automation Testing

We wanted to share the experience of how we are improving our mobile app automation strategy over time. It’s been a learning experience for us, despite the fact that we have several tasks to deliver. Meanwhile, we still need to keep maintaining our mobile automation tests.

When we first embarked on our mobile automation journey in March 2020, Flip had 50 employees and was struggling with the flow of testing. At that time, we did not have much experience in developing mobile automation and we ran most of the test cases manually. As the time went on, Flip grew faster with many product initiatives and features, and the number of Test Engineers (TE) and Mobile Engineers also increased, but we still focused on doing manual testing to keep up with the product release scope, and we didn’t allocate enough time to write automated tests.

As a result, our regression time got longer in every release. We even reached 3 weeks in one cycle, so we wanted to reduce the manual effort for testing by ensuring all test cases that can be automated will be automated. Our challenge had just started as we didn’t have enough experience and time in developing the mobile automation, and most of our time was spent to complete the feature testing and regression. In order to achieve the scale needed to grow through this phase, we must start utilizing mobile automation tests and having collaboration with Mobile Engineers.

Soon after, we started experimenting with some tools. We found a way to set up mobile automation testing with a comprehensive tool and framework built using WebdriverIO. In the first phase, we started exploring ways to run the mobile automation tests. We found 2 options (Appium and Detox) and decided to go with Appium because of the following reasons:

Appium supports JavaScript. It was important for our team to have tests written in JavaScript because it is our main programming language for Mobile and Test Engineers.
Open source, as well as frequently maintained.
Many communities.

Next, once automation had been added, our next target was to run the mobile automation tests on a schedule using cloud devices. At this stage, we needed to research cloud devices for mobile apps and determined the criteria that meet our requirements. We did a comparison and comprehensive analysis during PoC with selected vendors, and here are some of our criteria:

Reliable and scalable
Easier and faster way to set up with our mobile automation framework
Cost-effective pricing
Strong customer support team focused on solving issues

Based on those, we made a decision to choose LambdaTest, and set up our test environment to reduce our manual testing process. 

In the end, by starting mobile automation testing and also running those tests on a schedule using cloud devices, there are several benefits we gain, including:

Allowing Mobile Engineers to create the automation tests based on JavaScript independently without the involvement of the Test Engineers.
Simplifying the test interaction with the application by using WebdriverIO and providing a set of plugins to help create scalable and robust end-to-end test scenarios on mobile devices.
Creating readable test cases using Jasmine so that non-engineers can also understand our test cases.
Reducing the regression time by covering more test cases in our end-to-end test.
Having integrated with cloud devices, we can have a more scalable way to run the automation tests reliably and get the test execution results faster.

Challenges and Obstacles
As we progressed in our journey, we faced several challenges and obstacles along the way:
Flip users who use Google TalkBack get misleading information from our application.
We could not identify some elements on iOS, such as the getText() value. As a result, we couldn’t use it for assertion in our automation tests.
Sometimes we needed to redefine a similar component multiple times, since we had different teams involved working on the same element, and it caused high maintenance, such as:

Page elements inconsistency
Unstructured scenarios (in the Jasmine test specification)
Too many imported files
A similar function that can actually be reused
After trying to identify the challenges and obstacles, we tried to make some improvements. First, we wanted to fix the first and second issues. We used `accessibilityLabel` as the selector for identifying elements in automation tests, and this caused several problems:

The `accessibilityLabel` is used in Google TalkBack, the accessibility service for the Android operating system that helps blind and visually impaired users to interact with their devices. In our case, they would have challenges in identifying the UI elements to press. For example, the application will read  "LOGIN_SCENE-BUTTON-LOGIN", while it should be called "Login Button".
Illustration: Login scene elements
2. The `getText()` function doesn’t work in iOS and it always returns the value of the `accessibilityLabel` instead of the text value of the element. 

We had several options to solve this at that time. First, by changing the `accessibilityLabel` to text information for more readability, for example, our previous `accessibilityLabel` had the attribute name:   BUTTON_UPLOAD_RECEIPT_COMPONENT-BUTTON-UPLOAD_RECEIPT, and we changed it to “Upload Receipt Button”. So, users who use Google TalkBack will listen to the correct description of the element. However, problem number two was still not resolved, because the `accessibilityLabel` still replaces both the name and label attributes. 

Another solution is to use the `testID` attribute on each element to ensure that the element is always findable via Appium and also readable by Google TalkBack. In the past, we only used `accessibilityLabel`, also known as `accessibility-id` without combining `resource-id` with content-description. We have tried to switch to using `testID` before and found this change was straightforward.

On iOS, both the `testID` and `accessibilityLabel` attributes work in the same way. They first try to match the name attribute and then fall back to the label attribute. If we want to use both the `testID` and `accessibilityLabel` attributes, we know that they correspond to the label and name element attributes respectively. This can be easily verified using Appium Desktop.

On Android, the `testID` and `accessibilityLabel` attributes work differently than on iOS. Instead of using the `accessibility-id` strategy to try to find elements that match the content-desc attribute, the `id` strategy should be used to try to match the `resource-id` element attribute.

And this is how we declare it. For example, from previous content description ONBOARDING_SCENE-VIEW-START_USING_FLIP, we combine the resource id with content description to become “id.flip.staging:id/ONBOARDING_SCENE-VIEW-START_USING_FLIP”.
Illustration: Before and after of onboarding scene view
As a result, with this implementation, Flip users who use Google TalkBack will get the correct text information from the screen reader and interact well with the Flip application on their devices. We also have a unique identifier for getting the element via a selector. We can also solve the issue of `getText()` value on iOS and perform more assertions in the automation tests.
After we solved the first and second challenges, we then tried to solve the last one. The last challenge came up since Flip was growing fast with a significant addition of Test Engineers and we needed to maintain our mobile automation tests for each squad. During the development of the mobile automation tests, sometimes we used different practices, and each squad had an independent package folder of their page elements which resulted in page elements or flows (e.g. login flow) to be developed in silos and might end up as duplicates.
To solve it, we implemented the Page Object Model (POM), a design pattern in an automation framework that creates an object repository for storing mobile elements. Using the Page Object Model, each page of an application is represented as a class. Each class contains only the corresponding page elements. Test Engineers then perform test operations using these elements in the application under test.
For some end-to-end test cases that involve repetitive steps, such as Login flow or Registration flow, we also adopt the Facade pattern as an extension of the Page Object Model pattern.
Illustration: Login Flow in Flip App
Illustration: Extend Each Page Object into Facade Class
As an example, we commonly use Login flow as a precondition when executing test cases across all teams. By implementing the Facade pattern, we don’t need to deal with each Page Object class individually in our test case. Instead, we can interact directly with the Facade class. In the end, the POM pattern helped us to enhance our test maintenance, reduce code duplication, allow us to easily update page element locators without affecting our test cases, and solve the third challenge that we faced in our mobile test automation journey.

Summary
Illustration: Flip Mobile Automation Impact
Before the start of our journey, our regression testing cycle required three weeks to finish and our mobile automation test case coverage was still low below 10%. After some improvements that we have made as part of our journey, now we can shorten our regression testing cycle into seven days and increase the automated test case coverage to 40%, while manual testing covers the rest. With `TestID`, Google TalkBack runs correctly to help the blind and visually impaired users interact with Flip on their devices. Finally, implementing mobile automation with the POM design pattern reduces our code duplication and improves the test case maintenance. 

For those who just started your mobile automation journey, full automation may seem a far-off goal. Certainly, it would not be possible to achieve it overnight. Test automation is not a rocket science and its success depends on our strategy to solve problems gradually and tackle the challenges and bottlenecks effectively. All decisions will have pros and cons, but we should choose wisely the solution that is right for the problem we face.

Testing using automated testing is easier, faster, and saves time compared to manual testing. The test code is reusable, and we can easily execute the test cases over and over again. So, what are you waiting for? Let’s start replacing your repeating manual test cases (e.g. in regression phase) with automation tests!

Note: If you want to be a part of us to improve our mobile automation testing, you can find the opportunities here 🐞🏆

Flip Mobile Automation Testing Journey

A design system is a necessary component for a digital product startup to scale up its performance. While it deals mostly with how the product looks, it also affects how fast we can launch new improvements to stay relevant to the new challenges, and how well performing the new product will be.

<h1 id="background">Background</h1><img src="https://tech.flip.id/content/images/2022/08/header.png" alt="How we built our Design System at Flip">Back in 2019, when our design team only consisted of one of the co-founders and one designer, the thought of having a design system didn&#x2019;t cross our mind as we focused on understanding the basic question, &#x201C;What kind of design would be delightful for our users?&#x201D;We tried different styles&#x2014;applying patches and a Frankenstein-ish design approach as needed to meet the product-market fit quickly. This was also the time before the pandemic when everyone was working in the same room which made communication and collaboration simply a breeze.<h1 id="what-was-the-problem">What was the problem?</h1>While fulfilling our vision of being the fairest and most customer-centric fintech company in Indonesia, we took the necessary steps of improving and diversifying Flip products. The product offerings expanded and so did our design team. We multi-tasked, meta-tasked, or whatever you&#x2019;d like to call it.Along with that, we noticed signs of change in the way we worked, for example:<ul><li>We used to give designers freedom about the UI design, except for colors, fonts, and button style that we&apos;d agreed on previously; as long as it solved users&apos; problems and was aesthetically pleasing. Unfortunately, when we put different designers&#x2019; work on the same platform, it lacked coherence due to an inconsistent design.</li><li>As our products grew, we produced hundreds of designs every few months. However, we also spent significant hours going back and forth to ensure design consistency across different products. In other words, we were productively inefficient, to say the least.</li><li>Often we created completely new components, while not fully knowing whether they were duplicates of components somewhere in our past designs. This replication absorbed our design capacity, added development time, and also, increased the app size.</li></ul>Not only did the design process take longer, but the situation also burdened our development team as well as our users. It made us come to the realization that if we didn&#x2019;t start to think about having a design system, we&#x2019;d risk a creeping issue that would lead to bigger problems down the road. Therefore, though we were already waist-deep in work and aware that we lacked the capacity to create a new system, we just had to create one anyway.As a start, we assigned one designer from each platform, both B2C and B2B, to be responsible for creating and leading the initiative. Conversely, the design system would be owned by all designers, so everyone was encouraged to actively contribute, question, and challenge the design decisions put into the system.<h1 id="what-we-did-to-answer-the-problem">What we did to answer the problem</h1>In October 2020, we created our first design system. Despite the rudimentary result, the experience and struggle when building and using the first system helped us plan more effectively on what to do to build the more scalable version.The second design system was accomplished a year later, September 2021. Below is the process; the steps we took upon building the second design system and evolved from lessons learned from the first version.<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://lh3.googleusercontent.com/hzaq6qTs2W7pvSSFz1MqUSf1Wnv1J3ESJWZekZ4DMbLVDbBljeSsr3d7YwNYqp1Kkx2i8vj3UUPFXwB_8L8ZKMi5CN8IoVf1-De4nBT9hazE7bB9QdjsLY3J4nXzdqTrdcNRpfe1QxfTQD6qts3Vkw" class="kg-image" alt="How we built our Design System at Flip" loading="lazy" width="1600" height="620"><figcaption>Illustration: The process of second design system</figcaption></figure> 1. Took a step back and evaluated what we had Before starting off everything, we needed to reflect on all the components used in our products.We listed everything and deliberately discussed with the team if we needed to keep a certain component or if we could toss it off and replace it with another component that had a similar purpose.This step helped us to get an overview of what we&#x2019;d had, how we had been designing things, and what we could improve from each component. For instance, we had these similar alerts with no clear guideline on when to use one over another.<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://tech.flip.id/content/images/2022/08/alerts.png" class="kg-image" alt="How we built our Design System at Flip" loading="lazy" width="762" height="124" srcset="https://tech.flip.id/content/images/size/w600/2022/08/alerts.png 600w, https://tech.flip.id/content/images/2022/08/alerts.png 762w" sizes="(min-width: 720px) 720px"><figcaption>Illustration: Both alerts using info icon, but different color background</figcaption></figure> We&#x2019;ve always believed even small things can create inconsistency in our design. That&#x2019;s why we discussed how we wanted to move forward, set some rules, and changed the design to have a more clear usage for us and a more consistent experience for our users. <figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://lh3.googleusercontent.com/Xbf28OQBU3-Ts0-sC3pFIieMjgNiXBdoPQJL5p2jK38SD_9K6yLpOShy9_Br5vs1nwDGnJpKtiqSV5bznq4DDC6ZrSbZrpw-m8pdOZ2foIEvGdcX5Xqq3y_SbPuOFzmbNjNRClA4TAdZeJlV8ZvGMA" class="kg-image" alt="How we built our Design System at Flip" loading="lazy" width="762" height="224"><figcaption>Illustration: Example of how rules are applied in a component</figcaption></figure> 2. Categorized and structured the components We chose <a href="https://atomicdesign.bradfrost.com/chapter-2/?ref=tech.flip.id">Atomic Design</a> as our method. Atomic Design is a design system with complex components made out of smaller components principle. There are five elements in Atomic Design: Atoms, Molecules, Organisms, Templates, and Pages. <figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://lh5.googleusercontent.com/ACrkEr7A0oNiUS5yuWtrsv7zCTF6Sqc5WGjW1vi32cd6aDQh-4gqMHNSD8pIXgkM3ewh4jOHc6U85Z3sZSYCeUtCLrVlLPgt2oFbP85_FCvYFcE9IDPRdQTXmsQwrtMegGHdtyX6mVW6X6TdrDolMQ" class="kg-image" alt="How we built our Design System at Flip" loading="lazy" width="1600" height="500"><figcaption>Illustration: Atomic Design elements</figcaption></figure> This method promotes consistency and cohesion across the entire experience and serves as a friendly foundation for teams to modify, extend, and improve on over time. Moreover, it allows us to shift between abstract and concrete elements quickly. We can simultaneously see our interfaces broken down to their atomic elements and how those elements combined to form the final experiences. In practice, constructing the components using atomic design (and using the right tool that can support it such as Figma&#x2014;its components and variants feature are amazing!) boosted up or UI design crafting process. <figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://lh5.googleusercontent.com/fipxq4ZXtWwipJK3TKgUHvFJ4GxBkgmw0NYA1CpzwzWb0u5peBn3S8OzAUOw2mZDwQFCSbFdmrbDwdKGVlfoem_DrkJ8cVRvhhtazMDYa66sEIn54kUgvcphW1cXYCYJ_GFBO7rfEE7Y7xEE9WE7OQ" class="kg-image" alt="How we built our Design System at Flip" loading="lazy" width="600" height="351"><figcaption>Illustration: A sample of how we could easily &#x201C;break down&#x201D; and edit smaller components in the bigger ones.</figcaption></figure>To do that, first we needed to make a list of components for each element. This is a small example of our components.<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://tech.flip.id/content/images/2022/08/table-rev.png" class="kg-image" alt="How we built our Design System at Flip" loading="lazy" width="2000" height="1046" srcset="https://tech.flip.id/content/images/size/w600/2022/08/table-rev.png 600w, https://tech.flip.id/content/images/size/w1000/2022/08/table-rev.png 1000w, https://tech.flip.id/content/images/size/w1600/2022/08/table-rev.png 1600w, https://tech.flip.id/content/images/size/w2400/2022/08/table-rev.png 2400w" sizes="(min-width: 720px) 720px"><figcaption>Illustration: Example of design components we have in Flip</figcaption></figure> Through this component categorization, we could discover where to start&#x2014;which components to build first so we could support and form bigger components. However, building a design system is not a linear process.It&#x2019;s completely okay not to figure out all the atomic elements in the beginning. We can add new components as we go or as new needs come up. What&#x2019;s important is to know how we should construct that component based on this atomic design method.Here is the illustration of how the atomic elements are combined to form a complete page.<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://lh3.googleusercontent.com/wNJkiZHheCX-cIK20dkxP59fGY1l893fdmQB9Mop-KHUviDRAEjvyk3tInizZ0xf0LMshXB8Yw3maj2PXT-1Uy1Ee9BvDYPk1EQYVO2mLeBECJ4Gy__ODFBLdgUXmKVcem_U2VJZycv7qJ-5vJpHUg" class="kg-image" alt="How we built our Design System at Flip" loading="lazy" width="1600" height="1129"><figcaption>Illustration: How the atomic elements are combined to form a complete page</figcaption></figure>3. Started crafting Once the list of components was ready, we proceeded to craft the components, starting from Atoms since it served as the foundation to comprise all our interfaces. Atoms can be:<ul><li>Basic components that can&#x2019;t be broken down any further without ceasing to be functional, e.g. avatar, icons, dividers, supergraphic, etc.</li><li>Base styles to establish a shared guideline, e.g. colors, typography, drop shadows, grids, etc.</li></ul>In our adoption, Atoms are not limited to components; we use them all across the app, like layout grids, page transitions, etc. The goal is to make our design and behavior consistent as well. We wanted our design system file neat and easy to access for every stakeholder. Thankfully, Figma has a cool feature: unlimited pages in a file, so we used it to make an index of a folder for each component. We ordered it alphabetically in every type of atomic structure (atoms, molecules, so on).<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://lh6.googleusercontent.com/zkmbJl_gaij235Aj2f4jW_VsKmResReSjsfe49BRmVy0_FuCvwp5-PFqAK6RyT7w9CUZPVodQI5nDajmGhbgnrTMo4Ls24Z4kzqu8yXzN8ABN1F0rTmcfTYOOlXZzWAEZcl2TeKKlILyk2ATbh8FwDc" class="kg-image" alt="How we built our Design System at Flip" loading="lazy" width="1600" height="1238"><figcaption>Illustration: Example of how we categorize &amp; order the components</figcaption></figure> We assured all components were connected and nested well. We didn&#x2019;t create new components until the smaller elements in every component had been stated. <figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://lh4.googleusercontent.com/cqrs4KgcTtMWn66G7EXdu8QD40e1q2XVOB3vAeEv9SHOjUXLdL24tSBggO2H1B-9OKBQDuvksn7Cd4KRpBdQcAUnLYJyyT93iquJwlfLecTY6QR7goPnsrYANk1FR3lXK9JSROvDa5D1MHLKIm0cejM" class="kg-image" alt="How we built our Design System at Flip" loading="lazy" width="765" height="382"><figcaption>Illustration: This coachmark is made of smaller components that we&apos;ve previously created</figcaption></figure>4. Discussed and aligned together with all related designers and engineersOnce we had a draft with enough content to be discussed, we pulled our designers and engineers for a walkthrough of the design system. This process ensured minimum friction down the road, as both designers and engineers would be the main users of the system.As a result, we created clear communication channels and cadences to ensure there was a clear alignment amongst various stakeholders as we proceeded.5. Launched, learned, iteratedAfter covering the basic components and styles for our products, we published the Design System &amp; UI Kit Library and started taking notes of its implementation to understand what to improve in our next iteration.The launch was just the first step. For our design system to be relevant in the long term, it was essential for us to constantly review and update it over time to ascertain its relevance. We held regular meetings with designers to review all components to confirm that everything was updated.The biggest learning from this process was that creating the design system was not only challenging, but most importantly, it was fun.<h1 id="epilogue-learnings">Epilogue: Learnings</h1>The process of building the design system wasn&apos;t smooth sailing. However, this was something we anticipated from the start. We also had expected some unidentified challenges to come up midway as follows:<ul><li>As we didn&#x2019;t use the atomic design structure from the beginning, midway through the initiative, we needed to break down all components to the smallest atoms, made sure they were all connected, and rebuilt them using the new structure. This included removing useless layers, adding auto layout, fixing the responsiveness, etc.</li><li>Confirming all use cases were identified and facilitated in the design system required extensive communication with all the contributors. Finding a common spec for each component to assure all components would be reusable for current and future use-cases.</li><li>Component naming became another challenge for us. We had to ensure all stakeholders were aligned with the component names to comply good usability.</li><li>We made sure all existing components were proportional to the page it belonged to.</li><li>Timing was vital, as we built this design system in parallel with ongoing projects. </li></ul>On the brighter side, here are some positive outcomes from this initiative:<ul><li>More consistent design across products offers a consistent experience to users.</li><li>Using available components speeds up turnaround time in design conceptualization.</li><li>Engineering team can implement the design faster.</li><li>Having the design system as SSOT (single Source of Truth) makes it easier to check the accuracy of implementation.</li><li>Design system becomes the common language for all stakeholders. </li></ul>That&#x2019;s it, folks! Hopefully, this will help you in creating your own Design System. Should you have any interest to be part of us, check out our openings and <a href="http://flip.id/career?ref=tech.flip.id" rel="noopener noreferrer">join our organization</a>!<figure class="kg-card kg-image-card"><a href="https://flip.id/career?ref=tech.flip.id"><img src="https://tech.flip.id/content/images/2022/08/image-3.png" class="kg-image" alt="How we built our Design System at Flip" loading="lazy" width="1600" height="900" srcset="https://tech.flip.id/content/images/size/w600/2022/08/image-3.png 600w, https://tech.flip.id/content/images/size/w1000/2022/08/image-3.png 1000w, https://tech.flip.id/content/images/2022/08/image-3.png 1600w" sizes="(min-width: 720px) 720px"></a></figure>

Background

Back in 2019, when our design team only consisted of one of the co-founders and one designer, the thought of having a design system didn’t cross our mind as we focused on understanding the basic question, “What kind of design would be delightful for our users?”
We tried different styles—applying patches and a Frankenstein-ish design approach as needed to meet the product-market fit quickly. This was also the time before the pandemic when everyone was working in the same room which made communication and collaboration simply a breeze.
What was the problem?
While fulfilling our vision of being the fairest and most customer-centric fintech company in Indonesia, we took the necessary steps of improving and diversifying Flip products.  The product offerings expanded and so did our design team. We multi-tasked, meta-tasked, or whatever you’d like to call it.
Along with that, we noticed signs of change in the way we worked, for example:

We used to give designers freedom about the UI design, except for colors, fonts, and button style that we'd agreed on previously; as long as it solved users' problems and was aesthetically pleasing. Unfortunately, when we put different designers’ work on the same platform, it lacked coherence due to an inconsistent design.
As our products grew, we produced hundreds of designs every few months. However, we also spent significant hours going back and forth to ensure design consistency across different products. In other words, we were productively inefficient, to say the least.
Often we created completely new components, while not fully knowing whether they were duplicates of components somewhere in our past designs. This replication absorbed our design capacity, added development time, and also, increased the app size.

Not only did the design process take longer, but the situation also burdened our development team as well as our users. It made us come to the realization that if we didn’t start to think about having a design system, we’d risk a creeping issue that would lead to bigger problems down the road. Therefore, though we were already waist-deep in work and aware that we lacked the capacity to create a new system, we just had to create one anyway.
As a start, we assigned one designer from each platform, both B2C and B2B, to be responsible for creating and leading the initiative. Conversely, the design system would be owned by all designers, so everyone was encouraged to actively contribute, question, and challenge the design decisions put into the system.
What we did to answer the problem
In October 2020, we created our first design system. Despite the rudimentary result, the experience and struggle when building and using the first system helped us plan more effectively on what to do to build the more scalable version.
The second design system was accomplished a year later, September 2021. Below is the process; the steps we took upon building the second design system and evolved from lessons learned from the first version.
Illustration: The process of second design system
1. Took a step back and evaluated what we had
Before starting off everything, we needed to reflect on all the components used in our products.
We listed everything and deliberately discussed with the team if we needed to keep a certain component or if we could toss it off and replace it with another component that had a similar purpose.
This step helped us to get an overview of what we’d had, how we had been designing things, and what we could improve from each component.
For instance, we had these similar alerts with no clear guideline on when to use one over another.
Illustration: Both alerts using info icon, but different color background
We’ve always believed even small things can create inconsistency in our design. That’s why we discussed how we wanted to move forward, set some rules, and changed the design to have a more clear usage for us and a more consistent experience for our users.
Illustration: Example of how rules are applied in a component
2. Categorized and structured the components
We chose Atomic Design as our method. Atomic Design is a design system with complex components made out of smaller components principle. There are five elements in Atomic Design: Atoms, Molecules, Organisms, Templates, and Pages. 
Illustration: Atomic Design elements
This method promotes consistency and cohesion across the entire experience and serves as a friendly foundation for teams to modify, extend, and improve on over time. Moreover, it allows us to shift between abstract and concrete elements quickly. We can simultaneously see our interfaces broken down to their atomic elements and how those elements combined to form the final experiences.
In practice, constructing the components using atomic design (and using the right tool that can support it such as Figma—its components and variants feature are amazing!) boosted up or UI design crafting process.
Illustration: A sample of how we could easily “break down” and edit smaller components in the bigger ones.
To do that, first we needed to make a list of components for each element. This is a small example of our components.
Illustration: Example of design components we have in Flip
Through this component categorization, we could discover where to start—which components to build first so we could support and form bigger components. However, building a design system is not a linear process.
It’s completely okay not to figure out all the atomic elements in the beginning. We can add new components as we go or as new needs come up. What’s important is to know how we should construct that component based on this atomic design method.
Here is the illustration of how the atomic elements are combined to form a complete page.
Illustration: How the atomic elements are combined to form a complete page
3. Started crafting
Once the list of components was ready, we proceeded to craft the components, starting from Atoms since it served as the foundation to comprise all our interfaces. Atoms can be:

Basic components that can’t be broken down any further without ceasing to be functional, e.g.  avatar, icons, dividers, supergraphic, etc.
Base styles to establish a shared guideline, e.g. colors, typography, drop shadows, grids, etc.

In our adoption, Atoms are not limited to components; we use them all across the app, like layout grids, page transitions, etc. The goal is to make our design and behavior consistent as well.

We wanted our design system file neat and easy to access for every stakeholder. Thankfully, Figma has a cool feature: unlimited pages in a file, so we used it to make an index of a folder for each component. We ordered it alphabetically in every type of atomic structure (atoms, molecules, so on).
Illustration: Example of how we categorize & order the components
We assured all components were connected and nested well. We didn’t create new components until the smaller elements in every component had been stated.

Illustration: This coachmark is made of smaller components that we've previously created
4. Discussed and aligned together with all related designers and engineers
Once we had a draft with enough content to be discussed, we pulled our designers and engineers for a walkthrough of the design system. This process ensured minimum friction down the road, as both designers and engineers would be the main users of the system.
As a result, we created clear communication channels and cadences to ensure there was a clear alignment amongst various stakeholders as we proceeded.
5. Launched, learned, iterated
After covering the basic components and styles for our products, we published the Design System & UI Kit Library and started taking notes of its implementation to understand what to improve in our next iteration.
The launch was just the first step. For our design system to be relevant in the long term, it was essential for us to constantly review and update it over time to ascertain its relevance. We held regular meetings with designers to review all components to confirm that everything was updated.
The biggest learning from this process was that creating the design system was not only challenging, but most importantly, it was fun.
Epilogue: Learnings
The process of building the design system wasn't smooth sailing. However, this was something we anticipated from the start. We also had expected some unidentified challenges to come up midway as follows:

As we didn’t use the atomic design structure from the beginning, midway through the initiative, we needed to break down all components to the smallest atoms, made sure they were all connected, and rebuilt them using the new structure. This included removing useless layers, adding auto layout, fixing the responsiveness, etc.
Confirming all use cases were identified and facilitated in the design system required extensive communication with all the contributors. Finding a common spec for each component to assure all components would be reusable for current and future use-cases.
Component naming became another challenge for us. We had to ensure all stakeholders were aligned with the component names to comply good usability.
We made sure all existing components were proportional to the page it belonged to.
Timing was vital, as we built this design system in parallel with ongoing projects.

On the brighter side, here are some positive outcomes from this initiative:

More consistent design across products offers a consistent experience to users.
Using available components speeds up turnaround time in design conceptualization.
Engineering team can implement the design faster.
Having the design system as SSOT (single Source of Truth) makes it easier to check the accuracy of implementation.
Design system becomes the common language for all stakeholders.

That’s it, folks!
Hopefully, this will help you in creating your own Design System. Should you have any interest to be part of us, check out our openings and join our organization!

How we built our Design System at Flip

The journey of how we enabled International Transfers to support our customers' global transactions

In line with our vision to be the most customer centric company in the world, we are constantly looking out for new ways to add value to our customer offerings. Our International Transfer feature is one of the results of our efforts towards continuous value addition.

What got us thinking about this?
The earliest discussion to develop Flip Globe for Business a.k.a International Transfer in Flip for Business happened in January 2020. At that time Flip Globe had been recently launched and was well received by our users and showed good growth.

An intermezzo for those of you who don’t know what Flip Globe is…

Flip Globe is one of Flip’s fintech solutions that helps individuals transfer money abroad, such as sending money to families back home, etc. At first, Flip Globe only provided international remittance from individuals in Indonesia to individuals (C2C) in 7 destination countries abroad. It now supports transactions from individuals to businesses (C2B) and has over 40 available international transfer corridors.
Flip Globe Consumer App illustration
The success of Flip Globe got us thinking that we can also replicate this success story for our business clientele by introducing the international transfer feature to Flip for Business, formerly known as Big Flip. 

There was a requirement for such a solution in the market but the options available to customers were too far and too few with just the banks and a few other service providers. When we reached out to our business customers, several expressed their interest to use this service for their business needs. They were in need of a more cost-effective and fast international transfer solution compared to the conventional methods which had high transaction fees and long processing time.

Additionally, we also identified companies who wanted to facilitate international transfer for their users, such as remittance companies and other money transfer operators. In this case, the original sender of the money is not the company itself but its user (C2B2C and C2B2B).

Answering the big question (and the decision)
The new chapter of International Transfer for Business began in Q2 2021. 

As we were preparing the Q3 roadmap, we performed an analysis on Flip for Business’ standing in the current market. Based on this analysis, we found that international transfer was something that only a few other players in the B2B payments space provided. We had the opportunity to become an early-mover in providing a low fee international transfer feature with an added advantage of the existing infrastructure from Flip Globe in the Flip Consumer App.

We then started building the business case to analyze the opportunities, the alternatives, and to provide the rationale for this initiative. Basically, we first tried to decide if it was worthwhile working on this initiative. To answer that big question, we first broke it down into several sub questions.
Illustration for business case plan
First, why did we want to do this?
We wanted to seize the opportunity to become an early mover in the market players in Indonesia to provide international transfer service for businesses. Also, based on the market research and our existing data from Flip Globe, we projected that the revenue potential was high.

Next, we had the most important question to answer: what problem will this solution solve?
This product would address the need for a reliable international transfer service for our customers and would also help us in moving towards building a holistic money transfers solution. We not only had a set of prospects in the market looking for such a solution but also our existing customers who were using our domestic Money Transfer solution wanted an easy-to-use and robust solution for international transfers. The international transfer feature would make us a one-stop solution for all the money transfer needs for customers. 

We knew that business users had international money transfer needs. However, the options in the market had some distinct disadvantages:

High transaction fee. The existing options charged around 1-3% of the transaction value or fixed amount at around $25-30 per transaction.
Long processing time. The available options such as internet banking, foreign exchange specialist, and other alternatives could take up to 2-5 days to process the transactions.
Ease of use. Most of the options at that time were built for individual users. So it remained a pain point for business users, who needed to process a large number of transactions in bulk but were stuck using options meant for individuals.

In a nutshell, we discussed and answered a lot more questions. It was documented on our International Transfer for Business Product Requirements Document (of course after a long revision history and hundreds of comments from various stakeholders) and many meeting notes. The conclusion was solid: International Transfer for Business is one of our key initiatives for Quarter 3 2021.

So many options, what was the priority?
Once the decision was made and the overall product strategy was finalized, here came one of the most challenging aspects as a product manager: prioritization. Which solution do we want to launch first? How do we phase out the features in the upcoming releases?

For International Transfer for Business, we came up with two ideas: a) a dashboard solution and b) an API solution. This is similar to our existing domestic money transfer solution that provides both options. In case of international transfer, we planned the solutions based on the different use cases that we wanted to cater to, which were:

C2B2C and C2B2B. This use case was for remittance companies or money transfer operators who want to facilitate international transfer for their individual users. This segment needs the API solution for a quicker and automated transaction process which they would integrate into their systems.
B2B2C and B2B2B. This use case was for companies who need money transfer for payment to their suppliers, vendors, partners, and other third parties abroad. This segment could use the dashboard solution that requires no code (zero integration effort).

Considering that we were only a small team and wanted to optimize the resource allocation, we used the simple Value vs. Effort framework to prioritize the backlog.
Image Source: https://www.mindtheproduct.com/enter-matrix-lean-prioritisation/
How much value will this product bring?

We compared both solutions using the quantified business value (potential revenue) and user value qualitatively.

How much effort is required to build it?

These included the UI/UX Design & Research and Engineering efforts to develop the product.

Both solutions were estimated to require relatively the same development efforts, while UI/UX efforts were considerable for the dashboard but not applicable for the API solution. Furthermore, the API solution was estimated to generate higher revenue in the first few months post launch vis-à-vis the dashboard solution.

So, we decided to build the API solution for the C2B2C/C2B2B first.

We were also in a quandary to prioritize the international transfer destination countries for both use cases. The thing with international transfer transactions is that each destination country has different requirements in terms of sender and beneficiary data. For example, transfer to the United Kingdom will require the IBAN and Sort Code in addition to the Bank Account Number. Australia has its own special identifier named by BSB Number. In Japan, one requires a Branch Number, and so on.

Technical implementation efforts were almost proportional to the number of destination countries that we would add. Luckily, our Flip Globe in consumer app had set a benchmark for us. For the C2B2C/C2B2B use cases, we took a look at several data points from Flip Globe:

Transaction count data. We first prioritized the countries that have more frequent transactions.
SLA/transaction processing time performance data. As we wanted to provide the service for business users, processing time must be taken into account as it is one of the pain points for them. We wanted to make sure that the prioritized destination corridors have good SLA.

Besides that, we also took inputs from the prospective business customers on their preferred destination countries. Singapore, Malaysia, Japan, United Kingdom, Australia, and Turkey were then decided to be the prioritized corridors for International Transfer for Business API (C2B2C/C2B2B use cases).

The same approach was taken for choosing the countries for the Dashboard (B2B2C/B2B2B use cases). We also considered the business and market trend data in Indonesia for the B2B/B2C transactions. We decided to have Singapore, Malaysia, Thailand, Japan, China, Australia, United Kingdom, and Germany for the first release.
Putting it all in motion
One of the product principles at Flip is the focus on reusability. This was our compass in developing the International Transfer for Business. We wanted to reduce the development time so that we could launch and solve our customers' problems faster. In order to do that, we made use of the existing infrastructure of Flip Globe consumer app for the International Transfer for Business.

This initiative then became a collaboration across various teams at Flip. We used the existing Flip Globe services with some adjustments, so that the services could support transactions from business users along with individual users that was already done as part of Flip Globe for the consumer app.
Architecture Diagram of International Transfer for Business (Dashboard)
The current Flip Globe infrastructure was a plus point for us since we didn’t have to work on the code from a scratch. Despite this, it was not free from the hurdles either. In fact, it had its own challenges. Especially during this pandemic situation where we had to work hard on overcoming the remote-working challenges.

During the API solution development, it was difficult to align the priorities between the different teams and manage the timeline. There was a time when we had to put some tasks on-hold and wait for other teams to finish their tasks first. It resulted in some delay which we hadn’t foreseen. We learned that we could have planned our collaboration and communication better with other teams.

We overcame this challenge by creating a contract document as a shared guideline. That document detailed out every step of the implementation, to-do list, the person in charge, and the estimated timeline. We also blocked each other's calendar to have a regular weekly sync up and alignment to facilitate better communication.

As per the plan, we continued working on the dashboard solution after the API solution. All the learnings and experiences from building the API solution were valuable lessons for us to develop the dashboard solution. This time, we had a better plan and the journey of developing the dashboard was relatively bump-free.
International Transfer for Business dashboard which can be accessed via https://business.flip.id
Going live and beyond
After all the sweat and efforts from the whole team, we were finally ready to launch International Transfer for Business API in November 2021. In the very first release, we did not have the sandbox for the users yet. But, a temporary staging environment was provided in case the users were ready to test the APIs before the sandbox was live. 

After that, we then started discussions with some prospects for the integration process. From several qualified leads, we have the first company fully integrated to the International Transfer for Business API in February 2022. This was another lesson we learnt, that early alignment with the Sales and Marketing team will help to fasten the product’s adoption. 

In most cases, selling B2B products can be especially challenging compared to B2C products (the user adoption may need a month, a quarter, or even an entire year! Or more….). So, approaching prospects and existing customers in advance is a must in order to start the integration process quickly after going live.
Illustration of Sales Plan/Go-to-Market Plan
The continuous alignment is also applied during the development itself. Even during execution, every information should be cascaded to all the relevant stakeholders (Sales, Marketing, Business Development, Engineering, Operation Support, etc.), so that they can quickly pivot if required. It is better to over-communicate than under-communicate everything.

Specifically in our journey, one of the examples was when we learnt in the middle of the dashboard solution’s development that our third party partner didn’t allow the China B2B corridor for us so we must adjust the code to drop China from the corridor list. Despite that, we quickly pivoted and released the International Transfer for Business dashboard in March 2022 as scheduled.

So, we are now having both solutions: the API and the dashboard, live in production. Yet, the product launch was just the beginning of our journey to introduce the international transfer in Flip for Business. 

What is next?
Today, we are closely tracking the usage of this product, especially the transaction SLAs since customer experience is paramount to us. We intend to scale the product here by adding more countries. This will be another step in the direction to make Flip for Business a one stop solution for all money transfer and payment needs.

We are still continuously improving this product and do our best to help as many business customers to go international. Yes, we are on the right track to accomplish our mission to build the fairest financial product in the world!

You can also be part of us, check out our openings and join our organization! #FlipBuatSemua

Helping Flip for Business customers go global

Story of how we revamped our KYC journey to make it seamless…

<h3 id="kyc-and-customer-experience-two-sides-of-the-same-coin">KYC and Customer Experience: Two sides of the same coin</h3><img src="https://tech.flip.id/content/images/2022/05/KYC-Cover-Blog-1-1.png" alt="A tale of two KYCs by Flip team">Well! This is no news that a financial institution needs to collect the user&apos;s data and do verification to establish the legitimacy of customers&apos; identity before they can use the services. This is required not only to avoid product and service abuse but also to abide by the law of the land.KYC is a precursor for users to obtain value from Flip or for that matter any financial product and is an essential part of the user onboarding journey. But, often, it can add friction to the onboarding journey. &#xA0;According to a <a href="https://www.signicat.com/blog/the-battle-to-onboard-2020-the-impact-of-covid-19-and-beyond?ref=tech.flip.id">recent study</a>, for many financial institutions, although onboarding is not a showstopper, it&#x2019;s fragmented with too many customer touchpoints. The result is frustrated customers and a &#x201C;leaky funnel&#x201D;&#x2014; 64% of account applicants abandoned the process in 2020&#x2015;an all-time high.Most financial institutions face the problem of providing a seamless onboarding experience while ensuring the users are genuinely who they claim to be. This is the same problem that we were facing at Flip. Though we had our KYC process in place, there were some legacy issues and limitations in our product and services&#x2026; &#xA0;let&apos;s put it like this &#x201C;it did not provide the experience we wanted our customers to have.&#x201D;In order to achieve our vision of being the most customer-centric financial services product, we took up the challenge to solve friction points in the KYC process&#x2026;and here&#x2019;s how it all started&#x2026;<h3 id="existing-challenges">Existing challenges</h3>To begin with, our current process had a long verification time, and as we scaled, the need to add more operations agents started to increase. The growth of operations along with our user growth wasn&apos;t scalable. We also found that many of our customers were abandoning the KYC application process. On a high level, our process had these steps: <ul><li>Users completed the registration and started with the KYC process &#x2013; users needed to add their details, followed by their id picture, selfie, and ID + selfie picture, and then wait for the approval process.</li><li>Pretty standard, but it typically would take around 24 hours to complete the approval (we were really checking the patience of our users here.. &#x2639;&#xFE0F;). </li></ul>All this when they just wanted to complete the job for which they had installed our product.Too much hard work, right?In the era of Instagram and Snapchat, where people are used to instant gratification, this was indeed a lengthy process.<h3 id="problem-discovery">Problem Discovery</h3>Before starting to think about the solutions, we wanted to dig into the problems further and we started with well, listening to our customers. <blockquote>&#x201C;If you understand the customer problem you dramatically improve your odds of successful innovation.&#x201D; &#x2013; Clayton Christensen, author of The Innovator&#x2019;s Dilemma</blockquote>We were all ears to our customers... Our teams started doing surveys, interviews, and focus group discussions to get their valuable feedback. We wanted to hear them and understand their pain points, concerns, and motivations!This is what our customers said&#x2026;<ul><li>They did not feel confident about how the process needed to be done.</li><li>Clicking pictures made them frustrated, most of them had to retry multiple times and still got rejected.</li><li>Most users just wanted to give our product a try but the lengthy application process was a big problem. They often sought help while filling out the application.</li><li>Users who got rejected did not know what needed to be done after that.</li><li>They contacted customer service and searched YouTube videos for help while filling out the application</li><li>Users had to wait ~24 hours to know the KYC application status. Most times they would forget or didn&#x2019;t feel the need to use the application after that long. </li></ul>Not just our customers, we also talked to our KYC rangers( the team that takes care of back-office work related to KYC review and remediation) to get their perspective and learn about their pain points, their concerns. We sat with them and observed how they reviewed the applications and noted the to-and-fro that used to happen during this process, some of us even tried to review the details ourselves. To build further on these insights, we looked into our data:<ul><li>KYC completion rate, approval rate</li><li>Major drop points in the funnel</li><li>Rejection reasons</li><li>Percentage of customers who retried after being rejected</li><li>Verification SLAs</li><li>Complaints that our customer agents got</li><li>App/product reviews on different platforms</li><li>&#x2026; and more </li></ul>Finally, after spending time talking to our users, and looking into the data and customer complaints, we figured out the key problem areas in our current processes and journey. The problem statement was clear &#x2014; how do we make customer onboarding a quick and seamless experience while ensuring that we do our due diligence and control risks?We then broke down our problem into smaller problems that needed to be solved together:<ul><li>Simplify the experience for users to do KYC</li><li>Keep them motivated and help them generate value early on</li><li>Do all this while being compliant and mitigating risk</li></ul><figure class="kg-card kg-image-card"><img src="https://tech.flip.id/content/images/2022/05/Problem-Statement.png" class="kg-image" alt="A tale of two KYCs by Flip team" loading="lazy" width="2000" height="1125" srcset="https://tech.flip.id/content/images/size/w600/2022/05/Problem-Statement.png 600w, https://tech.flip.id/content/images/size/w1000/2022/05/Problem-Statement.png 1000w, https://tech.flip.id/content/images/size/w1600/2022/05/Problem-Statement.png 1600w, https://tech.flip.id/content/images/2022/05/Problem-Statement.png 2000w" sizes="(min-width: 720px) 720px"></figure><h3 id="principles-behind-the-revamp">Principles behind the revamp</h3>We had these core guiding principles to solve the key problems that were identified: <ul><li>Consider the customer experience: Make customers happier and motivated from the onset of the onboarding journey and get them closer to leveraging the product value.</li><li>Build for scale: As we grow and add more offerings to our platform, we need to build our KYC platform for scale so that we can plug and play in the future.</li><li>Measure everything: The only way to understand when a change, big or small, results in a positive impact is to measure it. Like all complex processes, if you don&#x2019;t measure it, you cannot effectively change it.</li><li>Drive automation: Automation can come in different forms, so any investment needs to be evaluated from the perspective of its ability to improve efficiency and reduce regulatory risk.</li><li>Make customers self-serve: Reduce the touchpoints required and make the onboarding process self-serve. </li></ul><h3 id="brainstorming-solution">Brainstorming solution</h3>At the end of the problem discovery, we got our team together and used this knowledge to frame design challenges.However, to prevent individuals from suggesting their preferred solutions, which might have little resemblance to the problems found, we did a How might we workshop that helped frame the problem(s) for <a href="https://www.nngroup.com/articles/ux-ideation/?ref=tech.flip.id">ideation</a>.The team came up with many &#x201C;How Might We&#x201D; (HMW) notes, and more &#x201C;How Might We&#x201D; questions created more opportunities for solution exploration.The activity started with each participant coming up with a &#x2018;how might we&#x2026;&#x2019; question related to our gathered insights and problems. Bonus Tip: Avoid Suggesting a Solution in Your HMW Question! Example:Insight: Users often reach out to our agents because they&#x2019;re uncertain about the KYC application process.How might we make users confident that they can complete the journey in a self-serve manner?These statements were then grouped based on similarity and then voted by all the participants. <figure class="kg-card kg-image-card"><img src="https://tech.flip.id/content/images/2022/05/Blur-image-_1.png" class="kg-image" alt="A tale of two KYCs by Flip team" loading="lazy" width="2000" height="1125" srcset="https://tech.flip.id/content/images/size/w600/2022/05/Blur-image-_1.png 600w, https://tech.flip.id/content/images/size/w1000/2022/05/Blur-image-_1.png 1000w, https://tech.flip.id/content/images/size/w1600/2022/05/Blur-image-_1.png 1600w, https://tech.flip.id/content/images/2022/05/Blur-image-_1.png 2000w" sizes="(min-width: 720px) 720px"></figure><h4 id="idea-generation">Idea generation</h4>Once we got clarity and alignment on what we wanted to solve, we continued to brainstorm ideas for potential solutions.We identified many changes that we needed to make-The critical point is to help users achieve the jobs to be done as soon as possible so that they can experience the value our product provides and take benefit from it. These are some of the changes we did:<ul><li>Removed certain redundant steps: As we already capture a selfie + id combination picture, we did not need a separate selfie from the user.</li></ul><figure class="kg-card kg-image-card"><img src="https://tech.flip.id/content/images/2022/05/From-this-to-this-2.png" class="kg-image" alt="A tale of two KYCs by Flip team" loading="lazy" width="2000" height="1125" srcset="https://tech.flip.id/content/images/size/w600/2022/05/From-this-to-this-2.png 600w, https://tech.flip.id/content/images/size/w1000/2022/05/From-this-to-this-2.png 1000w, https://tech.flip.id/content/images/size/w1600/2022/05/From-this-to-this-2.png 1600w, https://tech.flip.id/content/images/2022/05/From-this-to-this-2.png 2000w" sizes="(min-width: 720px) 720px"></figure><ul><li>Optimized KYC-related activities and minimized unnecessary back and forth with customers. Removed the hassle of filling in the identity details by adding OCR integration.</li></ul><figure class="kg-card kg-image-card"><img src="https://tech.flip.id/content/images/2022/05/From-this-to-this-3.png" class="kg-image" alt="A tale of two KYCs by Flip team" loading="lazy" width="2000" height="1125" srcset="https://tech.flip.id/content/images/size/w600/2022/05/From-this-to-this-3.png 600w, https://tech.flip.id/content/images/size/w1000/2022/05/From-this-to-this-3.png 1000w, https://tech.flip.id/content/images/size/w1600/2022/05/From-this-to-this-3.png 1600w, https://tech.flip.id/content/images/2022/05/From-this-to-this-3.png 2000w" sizes="(min-width: 720px) 720px"></figure><ul><li>Provided in-app help to make users self-serve</li><li>Provided clear rejection reasons with the CTA of what needs to be done next to re-apply/provide additional information.</li><li>Automated the manual workflows our KYC rangers used to perform. </li></ul>Our solution did not just make life easier for our customers, it also took the workload off our KYC rangers as well. <h3 id="we-started-sketching-the-solution">We started sketching the solution</h3>To get a quick alignment and not invest too much time in doing high fidelity design, we built user flows and wireframes first. Feedback and discussion took place and we iterated the design on medium-fidelity to explore finer details of content and layout. <h3 id="and-did-usability-testing">And did usability testing...</h3>We built a prototype and did usability testing by conducting interviews with our respondents via online video calls. Our researcher interviewed the participant to find out pain points while using the prototype. This usability testing revealed certain pain points and we used that to iterate our solution and make adjustments. We scrapped some ideas and came up with a simple flow that could help us create happier customer journeys from the outset. <h3 id="defined-metrics-created-prd-and-decided-on-our-mvp%E2%80%A6">Defined metrics, created PRD, and decided on our MVP&#x2026;</h3>As a culture, we believe in outcome-driven development. We don&#x2019;t celebrate the launch of the products, we celebrate their success, and the only way to measure the product&apos;s success is to have clearly defined metrics. Hence, we defined the metrics we wanted to move and the ones we wanted to keep a check on. While we do strive for excellence, we understand that we need to move fast so we sat with our engineering team to define the scope of our MVP.<h3 id="development-started%E2%80%A6">Development started&#x2026;</h3>Now all the planning and brainstorming is not enough if it is not coupled with excellent execution. <blockquote>&#x201C;To me, ideas are worth nothing unless executed ... Execution is worth millions.&#x201D; &#xA0; - Steve Jobs </blockquote>With the bias for action, development started. We prepared epics, and stories, aligned on the timelines while accommodating efforts required from each pod, defined analytics, and data instrumentation requirements, and defined our key milestones.<h3 id="dday-launch">D- Day: Launch</h3>We had our rollout strategy in place and pre-aligned. The team started the new journey rollout incrementally while looking at the key metrics.. ensuring that while our KYC submission rate is improving, our activation rate does not get impacted.Results were promising, not only did our application submission rate improve, our SLA for verification moved from 24 hours to ~ 90% of applications verified in less than an hour. Some challenges we faced and key learnings<ul><li>Simplifying KYC flow was a complex initiative, it had dependencies and impact on multiple teams and product areas - Operations portal, help center, consumer app, etc. Ensuring that all owners prioritized this work and didn&#x2019;t move away from the key goal became difficult.</li></ul><blockquote>Learning: It is easy for owners to get engrossed in other priorities in a workplace that is moving at a crazy pace. Over-communication and clear documentation are keys to keep reminding owners of the milestones! Communicate and then communicate some more... </blockquote><ul><li>At different stages, we found some small issues, different stakeholder expectations, new scenarios that made the team question if we should ship or add that one more feature or fix that bug.</li></ul><blockquote>Learning: &#xA0;At times, attention to detail and sweating over small issues can divert the team&#x2019;s focus from the key goal. It is okay to ship early with a few bugs. The key is to ask &#x201C;Is this necessary?&#x201D; more often. Understand the user impact and severity and prioritize ruthlessly. </blockquote><h3 id="post-launch">Post-launch</h3>It is fair to state that we are moving in the right direction and have achieved success in overcoming several challenges in the onboarding process. However, we are not done yet. Post-launch, we continue to look at our data and customer problems to drive the usage and improve our customer experience relentlessly.Our goal is to delight our customers by offering a seamless and light-touch KYC experience that supports a rapid product onboarding process&#x2026;Hope you enjoyed a preview into the other side of the Flip world and while you&#x2019;re waiting for more, why don&#x2019;t you just give Flip a whirl! P.S: We are on the lookout for some amazing product folks to <a href="https://flip.id/en/karir?ref=tech.flip.id">join our organization</a> and be part of more such stories !! &#x1F600;<figure class="kg-card kg-image-card"><a href="https://flip.id/career?ref=tech.flip.id"><img src="https://tech.flip.id/content/images/2022/01/Lets-Join-The-Rocketship.png" class="kg-image" alt="A tale of two KYCs by Flip team" loading="lazy" width="1921" height="1081" srcset="https://tech.flip.id/content/images/size/w600/2022/01/Lets-Join-The-Rocketship.png 600w, https://tech.flip.id/content/images/size/w1000/2022/01/Lets-Join-The-Rocketship.png 1000w, https://tech.flip.id/content/images/size/w1600/2022/01/Lets-Join-The-Rocketship.png 1600w, https://tech.flip.id/content/images/2022/01/Lets-Join-The-Rocketship.png 1921w" sizes="(min-width: 720px) 720px"></a></figure>

KYC and Customer Experience: Two sides of the same coin

Well! This is no news that a financial institution needs to collect the user's data and do verification to establish the legitimacy of customers' identity before they can use the services. This is required not only to avoid product and service abuse but also to abide by the law of the land.
KYC is a precursor for users to obtain value from Flip or for that matter any financial product and is an essential part of the user onboarding journey. But, often, it can add friction to the onboarding journey.  
According to a recent study, for many financial institutions, although onboarding is not a showstopper, it’s fragmented with too many customer touchpoints. The result is frustrated customers and a “leaky funnel”— 64% of account applicants abandoned the process in 2020―an all-time high.
Most financial institutions face the problem of providing a seamless onboarding experience while ensuring the users are genuinely who they claim to be. This is the same problem that we were facing at Flip. Though we had our KYC process in place, there were some legacy issues and limitations in our product and services…  let's put it like this “it did not provide the experience we wanted our customers to have.”
In order to achieve our vision of being the most customer-centric financial services product, we took up the challenge to solve friction points in the KYC process…and here’s how it all started…
Existing challenges
To begin with, our current process had a long verification time, and as we scaled, the need to add more operations agents started to increase. The growth of operations along with our user growth wasn't scalable. 

We also found that many of our customers were abandoning the KYC application process. On a high level, our process had these steps: 

Users completed the registration and started with the KYC process – users needed to add their details, followed by their id picture, selfie, and ID + selfie picture, and then wait for the approval process.
Pretty standard, but it typically would take around 24 hours to complete the approval (we were really checking the patience of our users here.. ☹️). 

All this when they just wanted to complete the job for which they had installed our product.
Too much hard work, right?
In the era of Instagram and Snapchat, where people are used to instant gratification, this was indeed a lengthy process.
Problem Discovery
Before starting to think about the solutions, we wanted to dig into the problems further and we started with well, listening to our customers.

“If you understand the customer problem you dramatically improve your odds of successful innovation.”
– Clayton Christensen, author of The Innovator’s Dilemma
We were all ears to our customers... Our teams started doing surveys, interviews, and focus group discussions to get their valuable feedback. We wanted to hear them and understand their pain points, concerns, and motivations!
This is what our customers said…

They did not feel confident about how the process needed to be done.
Clicking pictures made them frustrated, most of them had to retry multiple times and still got rejected.
Most users just wanted to give our product a try but the lengthy application process was a big problem. They often sought help while filling out the application.
Users who got rejected did not know what needed to be done after that.
They contacted customer service and searched YouTube videos for help while filling out the application
Users had to wait ~24 hours to know the KYC application status. Most times they would forget or didn’t feel the need to use the application after that long. 

Not just our customers, we also talked to our KYC rangers( the team that takes care of back-office work related to KYC review and remediation) to get their perspective and learn about their pain points, their concerns. We sat with them and observed how they reviewed the applications and noted the to-and-fro that used to happen during this process, some of us even tried to review the details ourselves.

To build further on these insights, we looked into our data:

KYC completion rate, approval rate
Major drop points in the funnel
Rejection reasons
Percentage of customers who retried after being rejected
Verification SLAs
Complaints that our customer agents got
App/product reviews on different platforms
… and more 

Finally, after spending time talking to our users, and looking into the data and customer complaints, we figured out the key problem areas in our current processes and journey.

The problem statement was clear — how do we make customer onboarding a quick and seamless experience while ensuring that we do our due diligence and control risks?
We then broke down our problem into smaller problems that needed to be solved together:

Simplify the experience for users to do KYC
Keep them motivated and help them generate value early on
Do all this while being compliant and mitigating risk

Principles behind the revamp
We had these core guiding principles to solve the key problems that were identified: 

Consider the customer experience: Make customers happier and motivated from the onset of the onboarding journey and get them closer to leveraging the product value.
Build for scale: As we grow and add more offerings to our platform, we need to build our KYC platform for scale so that we can plug and play in the future.
Measure everything: The only way to understand when a change, big or small, results in a positive impact is to measure it. Like all complex processes, if you don’t measure it, you cannot effectively change it.
Drive automation: Automation can come in different forms, so any investment needs to be evaluated from the perspective of its ability to improve efficiency and reduce regulatory risk.
Make customers self-serve: Reduce the touchpoints required and make the onboarding process self-serve.

Brainstorming solution
At the end of the problem discovery, we got our team together and used this knowledge to frame design challenges.
However, to prevent individuals from suggesting their preferred solutions, which might have little resemblance to the problems found, we did a How might we workshop that helped frame the problem(s) for ideation.
The team came up with many “How Might We” (HMW) notes, and more “How Might We” questions created more opportunities for solution exploration.
The activity started with each participant coming up with a ‘how might we…’ question related to our gathered insights and problems. 

Bonus Tip: Avoid Suggesting a Solution in Your HMW Question!

Example:
Insight: Users often reach out to our agents because they’re uncertain about the KYC application process.
How might we make users confident that they can complete the journey in a self-serve manner?
These statements were then grouped based on similarity and then voted by all the participants. 

Idea generation
Once we got clarity and alignment on what we wanted to solve, we continued to brainstorm ideas for potential solutions.
We identified many changes that we needed to make-
The critical point is to help users achieve the jobs to be done as soon as possible so that they can experience the value our product provides and take benefit from it.

These are some of the changes we did:

Removed certain redundant steps: As we already capture a selfie + id combination picture, we did not need a separate selfie from the user.

Optimized KYC-related activities and minimized unnecessary back and forth with customers. Removed the hassle of filling in the identity details by adding OCR integration.

Provided in-app help to make users self-serve
Provided clear rejection reasons with the CTA of what needs to be done next to re-apply/provide additional information.
Automated the manual workflows our KYC rangers used to perform.

Our solution did not just make life easier for our customers, it also took the workload off our KYC rangers as well. 

We started sketching the solution
To get a quick alignment and not invest too much time in doing high fidelity design, we built user flows and wireframes first.

Feedback and discussion took place and we iterated the design on medium-fidelity to explore finer details of content and layout. 

And did usability testing...
We built a prototype and did usability testing by conducting interviews with our respondents via online video calls. Our researcher interviewed the participant to find out pain points while using the prototype. 

This usability testing revealed certain pain points and we used that to iterate our solution and make adjustments. We scrapped some ideas and came up with a simple flow that could help us create happier customer journeys from the outset.

Defined metrics, created PRD, and decided on our MVP…
As a culture, we believe in outcome-driven development. We don’t celebrate the launch of the products, we celebrate their success, and the only way to measure the product's success is to have clearly defined metrics. Hence, we defined the metrics we wanted to move and the ones we wanted to keep a check on.

While we do strive for excellence, we understand that we need to move fast so we sat with our engineering team to define the scope of our MVP.
Development started…
Now all the planning and brainstorming is not enough if it is not coupled with excellent execution. 

“To me, ideas are worth nothing unless executed ... Execution is worth millions.”   - Steve Jobs 

With the bias for action, development started. We prepared epics, and stories, aligned on the timelines while accommodating efforts required from each pod, defined analytics, and data instrumentation requirements, and defined our key milestones.
D- Day: Launch
We had our rollout strategy in place and pre-aligned. The team started the new journey rollout incrementally while looking at the key metrics.. ensuring that while our KYC submission rate is improving, our activation rate does not get impacted.
Results were promising, not only did our application submission rate improve, our SLA for verification moved from 24 hours to ~ 90% of applications verified in less than an hour. 

Some challenges we faced and key learnings

Simplifying KYC flow was a complex initiative, it had dependencies and impact on multiple teams and product areas - Operations portal, help center, consumer app, etc. Ensuring that all owners prioritized this work and didn’t move away from the key goal became difficult.

Learning: It is easy for owners to get engrossed in other priorities in a workplace that is moving at a crazy pace. Over-communication and clear documentation are keys to keep reminding owners of the milestones! Communicate and then communicate some more... 

At different stages, we found some small issues, different stakeholder expectations, 
new scenarios that made the team question if we should ship or add that one more feature or fix that bug.

Learning:  At times, attention to detail and sweating over small issues can divert the team’s focus from the key goal. It is okay to ship early with a few bugs. The key is to ask “Is this necessary?” more often. Understand the user impact and severity and prioritize ruthlessly. 
Post-launch
It is fair to state that we are moving in the right direction and have achieved success in overcoming several challenges in the onboarding process. However, we are not done yet. Post-launch, we continue to look at our data and customer problems to drive the usage and improve our customer experience relentlessly.
Our goal is to delight our customers by offering a seamless and light-touch KYC experience that supports a rapid product onboarding process…
Hope you enjoyed a preview into the other side of the Flip world and while you’re waiting for more, why don’t you just give Flip a whirl! 
P.S: We are on the lookout for some amazing product folks to join our organization and be part of more such stories !! 😀

Value Flip