# Show the before and after: designing for financial clarity - Link: https://s9studio.com/insights/before-after-clarity/ - Published: 2026-08-04T09:00:00+01:00 - Author: S9 Studio Many of the workers Vamo serves have been paying to access their own wages. Cashing a paper check can cost a meaningful share of it. Paying bills often means buying money orders and standing in line. Sending money to family can be slow and expensive. When we redesigned the Vamo landing page, we wanted people to understand the difference Vamo makes in seconds, without reading a single paragraph of financial explanation. The answer was a plain side-by-side comparison: before Vamo, after Vamo. This piece explains why that simple pattern works so well, and how to use it in your own product. ## The problem with feature lists Most product pages describe features: direct deposit, debit card, mobile check deposit, fraud protection. Each feature is accurate, but the reader has to do the work of translating it into their own life. For someone who has never had a bank account,“ direct deposit” may not mean much on its own. Features describe the product. Comparisons describe the change. When the page shows the situation a person is in today next to the situation they could be in tomorrow, the value becomes obvious without any extra explanation. ## How the comparison is built The section opens with a clear tag, “Before Vamo, after Vamo”, and a headline that names the real issue: “Stop paying to use your own money.” A short line underneath connects it to how Vamo works: start banking through your employer. Below that sits a simple table with four rows, each a moment from everyday life: getting paid, paying bills, using money and sending money. For each one, the left column describes the old way and its cost, and the right column describes the Vamo way. Paper checks are expensive becomes get paid directly to your Vamo bank account. Paying bills is difficult becomes pay bills easily. Carrying cash is risky becomes use your Vamo debit card. Sending money is expensive and slow becomes share with family. > Features describe the product. Comparisons describe the change. ## Plain language is a design decision Every line in the comparison uses words people already use. There is no financial jargon to decode. “Pay bills easily” and “Share with family” say exactly what they mean. Short, plain sentences also matter for people reading in a second language, and for anyone scanning the page on a phone during a break at work. The goal is that someone can glance at the table and understand it, even if they read nothing else on the page. Writing like this takes more effort than writing feature descriptions. Each line was rewritten several times to remove any word that did not earn its place. ## Visual cues that support the words Small icons mark each row, a red cross for the “before” and a green tick for the“ after”. The colours are consistent with the rest of the system, where green always means a positive outcome. The “after” text uses Vamo green for its headings, so the eye naturally lands on the solution. The rows are generous and evenly spaced. Nothing competes with the comparison. It is one of the calmest sections on the page, and that calm helps the message land. ## Clarity builds trust People are rightly cautious about anything involving their money, especially if they have been let down before. Bold claims and big numbers can make that caution stronger. Showing exactly what changes, without exaggeration, earns more trust. The comparison also makes the next step obvious. Once someone sees the difference, the natural question is how to get it. The page answers that straight away: ask your employer about Vamo, or, for employers, start a conversation. ## Common mistakes with comparisons The most common mistake is exaggeration. When the “before” column becomes a caricature, readers notice and trust drops. Every statement in Vamo’s comparison describes a real situation people recognise. Another is comparing against competitors by name. It invites argument and quickly goes out of date. Comparing against the situation people are in today keeps the focus on the customer rather than on rivals. A third is overloading each row. If the “after” column needs three sentences to explain, the benefit is not yet clear enough. We kept a short headline and one supporting line per cell. ## Making it work on a phone Many Vamo visitors will see the page on a phone, often for a few moments at a time. On small screens, the comparison keeps its row structure but stacks the columns, so each everyday moment still reads as one clear before-and-after pair. Icons and colour make the difference visible even before people read the words, which matters when attention is short. ## Using the pattern in your own product Before-and-after comparisons work for many products, not just financial ones. Start by listing the moments where your customers feel friction today. Describe each in their words, not yours. Then describe what changes with your product, in the same plain language. Keep the number of rows small. Four strong comparisons are more convincing than ten weaker ones. And test the result by asking someone unfamiliar with the product to explain it back to you after a quick glance. If they can, the comparison is doing its job. ## Try this on your product * Describe the problem in your customer’s own words. * Put the old way and your way side by side. * Keep each line short enough to scan on a phone. * Test the section by asking someone to explain it back after a glance.