Ofofo Marketplace: Fixing the Journeys People Were Abandoning
Mohammed Zabeeh·July 9, 2026·18 min read
I joined a live cybersecurity marketplace that was losing people at every turn: confusing navigation, a rough onboarding, a checkout that leaked buyers. The fix did not start with screens. It started with personas, user journeys, and a map of where the experience was breaking.
73% to 41%
Marketplace bounce
+56%
Direct conversions
83.5% to 53.1%
Onboarding dropoff
$800K+
Transactions
Client
Ofofo
Role
UX Lead
Timeline
2023 to 2024
Type
Site
Tools
Figma, FigJam, Microsoft Clarity, Hotjar
The Leaking Funnel
Ofofo's cybersecurity marketplace was live and already leaking. People arrived, then left. Onboarding was rough, so new users dropped off before they became buyers or sellers. The checkout lost people at the exact moment they had decided to spend money. And the marketplace itself was confusing to navigate: buyers could not tell where to start, sellers registered as buyers by mistake, and the site's structure reflected how the company thought rather than how its users shopped.The tempting move is to start repainting screens. But a confusing marketplace is rarely a page problem. It is a journey problem. Before touching a single screen, I needed to know who was dropping off, at what moment, and what they were trying to do when the experience failed them.
Finding the Breaks
Before redesigning anything, three pieces of groundwork located exactly where and why the experience was failing.The platform served two audiences and treated them as one. On the buying side, the core persona is not a security expert. They run a small SaaS company or a fifty-person business, they have been told they need a penetration test or a compliance certificate to close an enterprise deal, and they are one bad acronym away from giving up. That persona thinking later became product surface directly: the resilience models feature opens by describing the buyer back to themselves, "You are a small SaaS company with a lot of big dreams but your team of less than 10 people," and recommends a security bundle to match. On the selling side sat two personas in one door: security companies with catalogues of offerings, and individual consultants such as virtual CISOs selling themselves. Naming these explained the dropoffs. Buyers bounced because the site spoke jargon to people who do not speak it. Sellers mis-registered because the platform never asked who they were until it was too late. Onboarding leaked because it demanded enterprise-length forms from people who just wanted to look around.Mapping the journeys end to end gave every screen a place in a journey rather than a place in a sitemap. I mapped the buyer's path from "I have a security problem" through discovery, evaluation, trust-building and purchase, and the seller's path from landing to listing to first sale, then drew the whole platform as one task flow.
The full Ofofo platform task flow, mapping landing, marketplace, seller and detail pages into onboarding, checkout and dashboard flows.The map forced the two decisions that mattered most for the dropoff problem. First, the odd front door had to go: the old header offered "Sign In", "Buyer" and "Become a Seller" as three parallel choices, and people picked wrong constantly. The redesign gave buyers and sellers one registration flow that forks at a single "select user type" step, then diverges into role-appropriate onboarding: an optional profile form for buyers, and company or individual onboarding plus a Stripe form for sellers, with role switching built in from day one. If people will get the door wrong, make changing rooms cheap. Second, the map argued for asking commitment only after delivering value: optional profiles, coupons deferred to checkout, and a guest checkout path designed down to the email-and-OTP detail, though that last one never made it to production.Card sorting settled how people actually grouped what we sold. Three open card sorts in FigJam, one with the dev team and two with the executive team, six participants each writing and sorting their own cards.
The dev team's FigJam card sort, fourteen labelled clusters of colour-coded sticky notes grouping marketplace concepts.The convergence was the finding. Search, filters, categories, pricing and testimonials formed near-identical clusters across both cohorts, which told us the core IA was not controversial, it just had never been applied. The seller-as-buyer registration confusion surfaced here independently too, confirming the journey map. And the executives kept reaching for hotel-booking comparisons, which became the benchmark for how shopping should feel. One idea, seller-side cloning of offerings, was explicitly parked with a note to revisit for the admin panel: research producing a backlog decision, not just a diagram.
The Buying Journey
With the breaks located, the browse-and-evaluate journey was rebuilt across three design cycles.A lo-fi bake-off picked the layout. The lo-fi stage staged the two classic marketplace layouts against each other: a persistent left sidebar of filters beside list-style results, versus a filter panel behind a button with a card grid. The sidebar read like enterprise software, precisely the feeling scaring our persona away. The grid read like shopping, and won, with applied filters surfacing as removable chips so the panel never had to stay open.
Greyscale marketplace wireframe with category navigation, filter chips and a three-column grid of offering cards.Cycle 1 rebuilt browse around how the buyer actually arrives: with a rough problem, not a product name. A structured discovery bar sat above a category rail and a "Popular deals" carousel, and the grid always opened with an honest count ("123 offerings available"), because a buyer who cannot tell how big the shop is cannot tell whether it is worth their time. The offering card carries a lot of weight, because a security offering is not a t-shirt: seller name, star rating with review count, a category chip, a three-line description, and a pricing capsule that appears identically everywhere in the product, list price struck through, a green savings pill, the real price, the pricing model ("Fixed Cost | Starting from $10") and a "More Pricing" link with a count of the other plans. Buy Now and Compare sit side by side on every card, so the two most likely next steps are never more than one glance away.
The Cycle 1 marketplace with a discovery bar, category rail, hero banner, popular deals and the offering card grid.Filters are where the evaluation journey accelerates or stalls. Alongside price range and ratings, buyers filter by delivery model, training model, support hours, frameworks coverage (OWASP, NIST, OSSTMM), compliance coverage (ISO 27001, GDPR, SOC, PCI-DSS, HIPAA) and, my favourite, certifications of the people on the job: CEH, OSCP, eJPT, each with live counts. A price histogram anchors the range in plain language, "The average price for an offering is $400," quietly answering the question every first-time security buyer is embarrassed to ask. The panel itself was a correction: an early direction leaned on compliance coverage as the hero filter, and no single facet could carry a decision this layered, so every facet moved into one consolidated modal where all of them work together. Even the dead end got designed. The zero-results state evolved from an apology into a recovery path: "Get Custom Quotation" turns a failed search into a lead, and "Show All Offerings" resets the funnel instead of stranding the buyer.
The expanded filter panel with applied chips, pricing model options and a price-range histogram with average-price guidance.Cycle 1 proved the journey, Cycle 2 made it fast. Watching how people arrived taught us they come with a task, not a query, so the four-field discovery bar gave way to a single conversational search ("What cybersecurity services are you looking for?"), the tall hero banner disappeared, and category discovery moved into a mega-menu with live offering counts per subcategory and a pinned "Get Custom Quote" entry point. The page dropped from 5,197 pixels tall to 3,450: a third less scrolling between a buyer and the inventory.
The Cycle 2 marketplace with a single search input, restructured navigation and the grid brought closer to the top.
The marketplace mega-menu, a four-column category taxonomy showing live offering counts and a Get Custom Quote tile.
Earning the Purchase
From trust to decision to payment, the second half of the journey is where the original funnel leaked hardest.The trust moment is where security marketplaces live or die. You cannot screenshot a penetration test, and our buyer persona cannot independently judge one, so the offering detail page layers proof instead: verified-purchase badges on reviews, a full ratings histogram, helpfulness voting, and a resource library where buyers preview sample deliverables, real report documents, in a lightbox before spending anything. For services, the page credentials the humans rather than the vendor, with a "Certifications of the people on job" row of badge logos. Services also introduced milestone pricing, a numbered stepper with a name, completion bar, dollar amount and deliverables link per stage, and that one component reappears across the detail page, the comparison table and checkout, so a buyer meets the same mental model everywhere in the journey.
A penetration-testing offering page with seller info, pricing panel, sticky section tabs and certification badges.The comparison page brings the evaluation step into the product. Our journey map showed it happening off-platform, in two discovery calls and a spreadsheet. Three columns, each swappable from a dropdown, with a dashed "Select Offerings" slot inviting the third. Attributes group into tinted bands (services, deliverables, support, certifications, frameworks, compliance, pricing model, milestones), and absence is communicated two ways: a dash for attributes a vendor simply lacks, and greyed-out text for unsupported items inside a checklist, so "does not have it" and "does not cover this part" stay distinguishable at a glance. In use, seven of every ten buyers ran a comparison before purchasing, and the ever-present "More Pricing" link resolves here too, into seller-scoped and category-scoped comparison pages, so a buyer can weigh one seller's three plans or one category's rivals without rebuilding their shortlist.
The comparison page with three product columns, grouped attribute rows and greyed-out unsupported features.Checkout was an original dropoff point, and it assumed one pricing shape in a marketplace that sells four. The redesign keeps the layout invariant, an order table beside a summary card, and lets only the price details block mutate. Zero-dollar offerings keep the full flow, quantity stepper and all, with a $0 total, because a free security assessment still needs billing details and consent. Milestone engagements show the full value ($19,600) but total only the first milestone ($1,000), keeping the commitment honest and the first payment small. Discounts defer coupon entry to a quiet hint bar. Subscriptions with trials earn dual totals reading "Total after trial $100" and "Total due today $0", with the CTA relabelled from Checkout to Subscribe. On mobile the flow becomes a three-step stepper, Order Summary, Billing Info, Confirmation, and success and failure each got a designed ending, the failure state naming the exact purchase that failed and leading with a retry.
The desktop checkout with an order summary table, milestone price breakdown and billing details card.
Three mobile checkout screens showing milestone pricing, subscription dual totals and the billing details form.Security purchases are considered purchases, and the map showed a long quiet gap between "interested" and "paid". The chat system fills that gap: a docked widget with a three-tab inbox (General, Orders, Support), each with its own unread count. Order threads pin the order ID so the conversation stays anchored to the transaction, and pre-sale threads open from an offering context chip, so a seller always knows which listing a buyer is asking about. Presence states, read receipts, PDF and image attachments, and a designed end-of-life ("This conversation has been marked as closed") round out the lifecycle.
Four states of the buyer-seller chat widget: empty inbox, order conversations, general messages and the minimised launcher.
The Wider Ecosystem
The marketplace journeys sat inside a larger system that went through the same discipline. The landing page pivoted across cycles from a browse-first pitch ("We make small businesses resilient", with a segmented, faceted search bar in the hero) to a job-first one ("For CISOs. Buy CISOs.", hiring a virtual CISO in minutes), demoting search once it was clear buyers arrive with a task, not a query. Sellers got their own crimson-themed landing and profile pages that expose revenue size, countries of operation and expertise categories, answering the seller persona's first question: will I be found here? A jobs board joined in a later cycle, complete with edge-case card variants for half-specified experience ranges. And resilience models packaged offerings into persona-matched bundles, pairing every capability with twin meters for security impact versus ease of implementation.
What the Numbers Said
Every number here was measured, not felt: behaviour came from Microsoft Clarity and Hotjar, the qualitative side from feedback forms. The rebuilt marketplace UX lifted direct conversions by 56 percent and cut the bounce rate from 73 percent to 41 percent, movement that came from clearer navigation and decision flows rather than any single screen. Onboarding proved the ask-later principle: moving from everything-mandatory to letting users complete their profile as and when a task required it cut the onboarding drop rate from 83.5 percent to 53.1 percent. The comparison feature earned its keep, with seven of every ten buyers running a compare before purchasing. And the zero-results recovery path proved itself at scale once the RFP system launched, with six of every ten custom requests starting from that page.
Platform Evolution
Jul 2023
Joined and audited the funnel
Walked into a live marketplace with heavy dropoffs: rough onboarding, a leaking checkout and navigation that confused buyers and mis-routed sellers. Started by defining the buyer and seller personas the design had been missing.
Aug 2023
Journeys, task flow and card sorting
Mapped buyer and seller journeys end to end and drew the platform as one task flow, locating the breaks. Three open card sorts across dev and executive cohorts rebuilt the marketplace IA and confirmed the registration confusion.
Sep 2023
Lo-fi bake-off
Wireframed two browsing patterns, sidebar filters with list results versus a filter panel with a card grid, at desktop and as nine separate mobile screens. The grid pattern won for feeling like shopping rather than enterprise software.
Oct 2023
Cycle 1: the full marketplace
Structured four-field discovery bar, category rail, deals carousel, the offering card with its portable pricing capsule, a twelve-group security-specific filter panel, comparison tray and pages, offering detail pages, and desktop, tablet and mobile builds of everything.
Apr 2024
Checkout and chats
Rebuilt the leaking checkout to absorb zero-dollar, milestone, discount and subscription pricing without changing shape, with a three-step mobile flow and designed success and failure endings. Buyer-seller chat shipped with order-anchored threads.
Jun 2024
Cycle 2: shortening the path
Replaced the structured search with one conversational input, moved discovery into a mega-menu with live counts, cut the marketplace page height by a third, and turned the empty state into a custom-quote lead path.
Aug 2024
The vCISO pivot
The landing experience repositioned from browse-the-marketplace to hire-a-vCISO, with named seller listings, five pricing tiers from Forever Free to Contact Sales, and compliance badges covering 170+ frameworks.
Outcome
A funnel that holds
Marketplace bounce cut from 73% to 41%, direct conversions up 56%, and onboarding dropoff down from 83.5% to 53.1% once profile data became ask-when-needed, with 375+ SMBs using the platform across 45+ countries and $800K+ in transactions.
Lessons
Dropoffs are journey problems wearing page costumes
Every dropoff pointed at a screen, but no screen fix would have held. The checkout leaked because of what the journey demanded before it, and onboarding bounced because of who we imagined was filling it in. Diagnose the journey, then design the page.
Personas are cheap, and designing without them is not
The single most valuable early move was naming who we were designing for. The moment "SMB owner who does not speak security" was written down, half the existing site's decisions became visibly wrong, and the other half became defensible.
Design the pricing capsule once, spend it everywhere
The same price block appears on cards, detail pages, comparison columns and seller profiles. Buyers learned to read it once, and every subsequent surface got cheaper to design and easier to trust.
Ask for commitment after value, not before
Optional buyer profiles, coupons deferred to checkout, role switching for mis-registered sellers: every fix to the dropoff problem amounted to the same principle. Let people move forward first and formalise later. The boldest version, a guest checkout needing only an email and an OTP, was designed and mapped but never shipped.
FAQ
Three compounding things. The site's structure reflected the company's org chart rather than buyers' mental models, so people could not find what they came for. Onboarding demanded long forms before showing value, so new users bounced. And the checkout assumed simple pricing in a marketplace selling milestones, trials and zero-dollar offerings, so decided buyers hit confusing totals at the worst possible moment.
Because the failing pages were symptoms. A checkout redesign cannot fix a buyer who arrived confused, and a prettier onboarding cannot fix a seller who registered through the wrong door. Mapping who the users were and what journey they were on located the actual breaks, several of which sat two screens before the page where the dropoff showed up.
They settled the marketplace taxonomy with evidence instead of opinion, confirmed the buyer-seller registration confusion independently of the journey map, and set the experiential benchmark: executives kept comparing the filtering they wanted to hotel-booking apps, which became the bar for how shopping should feel.
By changing only one thing. The layout, the order table, the summary card and the billing flow are identical for every purchase. Only the price details block mutates: milestone splits, trial dual totals, deferred coupons. Buyers get a consistent journey, and the complexity stays contained in the one component built to express it.
No single fix. The single registration flow with a clear user-type fork replaced the old three-way front door and stopped sellers landing in buyer accounts. Optional profile forms let buyers defer paperwork, cutting the onboarding drop rate from 83.5 to 53.1 percent. The rebuilt IA meant people arriving from search landed somewhere that made sense. And clearer decision flows carried buyers from category to card to checkout without dead ends. Each removed one reason to leave, and direct conversions rose 56 percent alongside.
Every cycle shipped desktop, tablet and mobile builds. Mobile was never an export: the lo-fi stage wireframed nine separate iPhone screens, and the checkout became a proper three-step stepper on small screens rather than a squeezed desktop page.