/* Long-form case study content for the board. Keyed by case id; only ids present here are clickable on the board. Each language (pl / en) holds the full Folio-framework case study. */ const IMG = { hero: "uploads/1-case-study-hero.jpg", revealBefore: "uploads/tech-before.jpg", revealAfter: "uploads/tech-after.jpg", rebrand: "uploads/Soft-rebrand.png", canvas: "uploads/tokenization-canvas.jpg", bag: "uploads/bag-story-small.gif", assetClasses: "uploads/any-asset-class-mattereum-asset-passports.png", beforeAfterSite: "uploads/Before-after.jpg", openseaVideo: "uploads/OpenSea-Animation-Land.mp4", marketplace: "uploads/mattereum-marketplace.jpg", land: "uploads/real-estate-land-2.jpg", // Black Keycard bkcSign: "uploads/BlackKeycard-garage-location.jpg", bkcLogo: "uploads/different-kind-of-ownership.jpg", bkcParking: "uploads/blackkeycard-parking.jpg", bkcCard: "uploads/Physical-black-card.jpg", bkcKit: "uploads/Branding-t-shirt-member-welcome.jpg", bkcHat: "uploads/blackkeycard-member-hat.jpg", bkcWebHero: "uploads/Placeholder-web-design-hero.jpg", bkcWeb: "uploads/placeholder-web-design.jpg", bkcApp: "uploads/Placeholder-aplikacja.jpg", bkcWww: "uploads/www-mockup.jpg", bkcAppReal: "uploads/app-mockup2.jpg", bkcConcierge: "uploads/concierge-mockup2.jpg", bkcCompare: "uploads/membership-vs-ownership.png", bkcInvite: "uploads/Coachella-event-VIP-Invitation.jpg", bkcVip: "uploads/Coachella-event-VIP.jpg", // FlowNow fnHero: "uploads/Hero-image-flownow.png", fnLogo: "uploads/logo.jpg", fnSite: "uploads/www-flownow.png", fnMaterials: "uploads/materials-video-instructions.jpg", fnClientA: "uploads/starter-version2.jpg", // Starter v2 — 'Obudz sie' spiritual coach (done-for-you phase) fnClientB: "uploads/starter.jpg", // Starter build — school for modern witches fnClientC: "uploads/version2.jpg", // Starter build — 'Badz zmiana' mindset brand fnClientD: "uploads/pre-starter.jpg", // pre-Starter — original bespoke language platforms fnClients: "uploads/strony-klientow-pre-starter.jpg", // pre-Starter — original bespoke client builds fnClientLaunched: "uploads/starter-version1.jpg", // Starter v1 — JK Justyna mentoring (self-service phase) }; const CASE_STUDIES = { en: { mattereum: { tags: ["PRODUCT DESIGN", "WEB3", "BRANDING", "WEB DESIGN", "UX/UI"], title: "Mattereum", subtitle: "Legal infrastructure for high-value asset tokenization", meta: [ { k: "ROLE", v: "Web & Product Designer" }, { k: "DURATION", v: "2021 — 2022" }, { k: "PLATFORM", v: "Web · Brand · Motion" }, ], hero: { src: IMG.hero, caption: "The Asset Passport for a multi-million-pound property — a physical house, made tradable as a verified digital asset.", }, sections: [ { id: "context", eyebrow: "CONTEXT", headline: "I was brought in to redesign a website, but the real job was explaining an idea the world hadn't caught up to yet.", body: "Mattereum had built something genuinely unprecedented: a way to tokenize high-value physical assets — gold, real estate, vintage instruments — on the blockchain, backed by legal warranties enforceable in 170 countries. The technology worked. But the site read like a legal brief crossed with a blockchain whitepaper. **I joined as the designer for the entire digital presence** — web, brand, decks, motion and the asset-passport UX — working alongside the Head of Design. Within my first week the brief had already shifted under me: **the problem wasn't the website, it was comprehension.**", }, { id: "problem", eyebrow: "THE PROBLEM", headline: "Mattereum was years ahead of everyone — and that head start was exactly why nobody understood it.", body: "I read everything and sat with the founders, the legal team and the blockchain engineers. The pattern was clear: **the idea was always explained from the inside out** — registrars, smart contracts, SPVs, decentralized certification — language that made perfect sense to its inventors and none to a buyer about to move millions. The real constraint wasn't trust in the tech; it was that **a seller and a buyer simply couldn't picture what bridges a physical house to a digital token.** Without that bridge made visible there was no proof of rights, no provenance, no accountability — and so, no trade.", arts: [ { type: "reveal", before: IMG.revealBefore, after: IMG.revealAfter, beforeLabel: "WITHOUT THE BRIDGE", afterLabel: "WITH MATTEREUM", caption: "Drag the handle. Without a physical-to-digital bridge there is no trade; the Asset Passport, its certifiers and warranties are what make the asset tradable.", }, ], }, { id: "challenge", eyebrow: "THE CHALLENGE", headline: "There were no patterns to borrow — a \u201Cblockchain asset passport\u201D wasn't a thing anyone had designed before.", body: "This was 2021, the peak of the NFT boom, which made it harder, not easier: **we had to look credibly blockchain-native while distancing ourselves from speculative JPEGs.** Nobody had designed a tokenized real-estate marketplace or a digital passport for a physical object. Every interface, metaphor and icon had to be **invented, tested against real comprehension, and thrown out the moment a non-expert blinked.**", }, { id: "strategy", eyebrow: "MY STRATEGY", headline: "I decided the design had to explain Mattereum to a grandmother before it impressed an investor.", body: "The guiding policy was **clarity over crypto-cool.** Every asset, every screen, every diagram had to answer three questions in plain language — what problem this solves, how it works, and why it matters — before any jargon was allowed on screen. With the Head of Design I ran the brand the same way: **we kept the recognisable \u201CM\u201D but softened the hard-edged square into a circle** — a quiet nod to the circular economy, and to a company serious enough to hold the deeds to your house. **The same principle reshaped the website:** the early site tried to market and sell at once and explained neither, so we rebuilt the communication over four full versions until it stopped selling and started to explain — landing on one human idea: *limitless e-commerce, but for million-dollar transactions.*", arts: [ { type: "image", src: IMG.rebrand, caption: "Brand evolution — from the hard, hard-to-read square mark (old) to the softened circular \u201CM\u201D (new). Built to sit beside both a gold bar and a law firm.", }, { type: "image", src: IMG.beforeAfterSite, caption: "Before \u2192 after on the website: from the original feature-dense site (V1) to the explanation-first final V4, built around one clear promise.", }, ], list: { label: "WHAT THIS RULED OUT", items: [ "Speculative NFT tropes — neon, 3D apes, hype language", "Inside-out explanations that opened with smart contracts instead of the asset", "Anything that looked more like a casino than a registrar", ], }, }, { id: "process", eyebrow: "THE PROCESS", headline: "I turned a firehose of legal-tech knowledge into one canvas anyone could follow.", body: "There was no shortcut to understanding: I sat in every workshop the Head of Design ran with the CEO, co-founders, legal and engineering, listening to the same idea told a dozen ways until the simple version surfaced. To make tokenization itself teachable, **we built the Tokenization Canvas** — one board laying out everything a business needs to bring an asset on-chain: the asset, its custodian, the certifiers, the warranties, the marketplace, the post-sale process. **I used AI tools to draft and pressure-test the explanatory copy** for tagging, scanning and each asset class, so a reader never hit a sentence they couldn't parse.", arts: [ { type: "image", src: IMG.canvas, caption: "The Tokenization Canvas — the messy, invisible process of putting a real asset on-chain, turned into a single planning artifact a client and a lawyer can point at together.", }, ], quote: { text: "Nat is fast, dependable and rigorous across both her thinking and execution. Strongly technical and highly adaptable — I'd work with her again in a heartbeat.", name: "Kate Pincott", role: "Head of Design, Mattereum", }, }, { id: "passport", eyebrow: "KEY DECISION", headline: "We made the abstract idea tangible by giving every kind of asset the same passport.", body: "The Asset Passport became the heart of the system. Working from a motion template the GeexArts agency designed from our guidelines in After Effects, **I reiterated and produced passport visuals for asset class after asset class** — luxury cars, fashion, precious metals, real estate, wine, instruments and more. **These six classes were just an example** of how one system could passport almost anything. The Passport became a near-template for tokenizing any high-value object, with use case after use case lining up behind it — each one carrying the asset's identity, condition, certifiers and warranties in a single glance.", arts: [ { type: "image", src: IMG.bag, caption: "Asset Passport, animated — details, provenance, warranties and expert certifiers radiating from one physical object.", }, ], }, { id: "land", eyebrow: "FLAGSHIP USE CASE", headline: "Our biggest use case was a beach: the first plot of land in the UK ever listed for sale as an NFT.", body: "Of every use case the Passport unlocked, one stood apart. With property consultants West London City Lets, Mattereum put a **prime beach-front plot on England's south coast on-chain — listed on OpenSea for offers over \u00A31.9M** (around $2M). It was a **world first:** the first time UK land was listed for sale as an NFT with the full legal apparatus — title deed, searches and reference media — bundled into a [Mattereum Asset Passport](https://passport.mattereum.com/West.London.Lets.01/s), paired with a smart contract and tradable for up to five years. It remains the most valuable physical asset Mattereum has ever passported. **Designing a passport that could carry a deed, not just a description, was the moment the whole protocol stopped being theoretical.**", arts: [ { type: "image", src: IMG.land, caption: "The West London City Lets land passport — a \u00A31.9M beach-front plot, its title and warranties verified on-chain. The first UK land ever listed for sale as an NFT.", }, ], quote: { text: "Real estate is the biggest asset class in the world — but transaction costs are extraordinarily high. Making it cheaper and easier to buy and sell is going to liberate a lot of dormant potential.", name: "Vinay Gupta", role: "Founder & CEO, Mattereum", }, }, { id: "iteration", eyebrow: "ITERATION", headline: "We tested the Passport where it actually lives — inside a real OpenSea listing.", body: "With the website finally explaining the idea, the open question was whether the Passport survived contact with a real marketplace. **User testing, run by the Head of Design while I designed and built asynchronously, focused on one friction point: how an Asset Passport reads inside a live OpenSea listing** — before and after our redesign. Did it make a speculative NFT feel like a warranted, real-world asset? And because high-value assets don't live on one platform, **the same passport had to hold up across every marketplace** — OpenSea, Rarible, Coinbase NFT, a native storefront — without ever losing its meaning.", arts: [ { type: "video", src: IMG.openseaVideo, caption: "The Asset Passport embedded in a real OpenSea listing — the moment a speculative NFT starts to feel like a warranted, real-world asset.", }, { type: "image", src: IMG.assetClasses, caption: "One passport, every marketplace — the same trust object on OpenSea, Rarible, Coinbase NFT and beyond, never reduced to just a JPEG.", }, ], }, { id: "outcome", eyebrow: "THE OUTCOME", headline: "Live for two years, supporting six-figure transactions, with a visual language anyone can read.", body: "The work spanned brand strategy, web design, UX, motion and cross-team translation. The result wasn't one screen — it was a system that let a legal-tech protocol explain itself to the people it was built for.", arts: [ { type: "metrics", cells: [ { big: "$100,000+", label: "TRANSACTIONS SUPPORTED ON-CHAIN" }, { big: "170", label: "COUNTRIES WITH ENFORCEABLE WARRANTIES" }, { big: "Any class", label: "ONE PASSPORT SYSTEM, BUILT TO SCALE" }, { big: "2 years", label: "LIVE IN PRODUCTION" }, ], }, { type: "image", src: IMG.marketplace, caption: "The circular-economy marketplace concept — high-value assets, browsable and verifiable like any storefront.", }, ], }, { id: "reflection", eyebrow: "REFLECTION", headline: "What I carried out of the bleeding edge.", reflection: [ { lead: "Clarity is the feature", body: "when an idea is ahead of its market, the design's first job is comprehension, not persuasion. Explain before you sell." }, { lead: "A shared artifact beats a shared doc", body: "the Tokenization Canvas gave a legal team, engineers and clients one picture to point at. I now build a canvas like this early in any complex project." }, { lead: "One trust object, repeated, teaches a system", body: "giving every asset class the same Asset Passport made an abstract protocol feel concrete. Consistency was the explanation." }, { lead: "AI is a comprehension tool", body: "I used AI to draft and stress-test plain-language copy across dozens of technical concepts. It's now a standard part of how I translate complexity." }, ], }, ], }, blackkeycard: { tags: ["BRANDING", "PRODUCT DESIGN", "UX/UI", "WEB DESIGN", "WEB3"], title: "Black Keycard", subtitle: "An invite-only supercar members club", meta: [ { k: "ROLE", v: "Brand & Product Designer" }, { k: "DURATION", v: "2019 — 2020" }, { k: "PLATFORM", v: "Brand · Web · App" }, ], hero: { src: IMG.bkcWww, caption: "The public face, rebuilt — a near-private teaser that sells belonging, where every path leads to one place: Apply.", }, sections: [ { id: "context", eyebrow: "CONTEXT", headline: "I joined a supercar rental business and was asked to turn it into a club people apply to get into.", body: "Black Keycard began the way a lot of good things do — one founder's obsession with electric supercars, monetised one rental at a time. By the time I came on, **the fleet had outgrown the business model behind it.** I led brand, web and product, and the brief shifted almost immediately: this couldn't be another place that rents you a Lamborghini for the weekend. It had to be **a reason to belong.**", arts: [ { type: "image", src: IMG.bkcLogo, caption: "The rebuilt site, speaking the members' language — a different kind of ownership: this is not your dad's auto club." }, ], }, { id: "problem", eyebrow: "THE PROBLEM", headline: "In LA and San Francisco, renting a supercar is a commodity — and Black Keycard looked like everyone else renting one.", body: "The diagnosis was uncomfortable: **on the car, the price and the website, Black Keycard was interchangeable with a dozen other rental outfits.** You can't win a commodity on the commodity. What the buyers we were after — founders, CTOs, athletes, creative leaders — actually wanted wasn't a car for the weekend; it was **access, status and a room full of people like them.** The real product was never the Lamborghini. It was the membership.", list: { label: "WHAT THE MARKET ALREADY HAD", items: [ "Interchangeable 'exotic car rental' brands competing on price", "Public catalogues anyone could browse and book in two clicks", "Loud, neon supercar visual tropes that cheapened the cars", ], }, }, { id: "strategy", eyebrow: "MY STRATEGY", headline: "I designed Black Keycard as a secret society, not a rental desk — there is no 'Buy now', only 'Apply'.", body: "I made one governing call: **treat membership as the product and scarcity as the operating model.** That single choice rewrote everything downstream. The brand went matte-black, limited and deliberately quiet — *this is not your dad's auto club.* The site wasn't even fully public; **every call to action led to 'Apply Now', never 'Buy now'** — you have to be reviewed and accepted to get in. Exclusivity wasn't a campaign. It was the architecture.", arts: [ { type: "image", src: IMG.bkcSign, caption: "Out in the world — the brand on the street, reading like a luxury house, not a rental desk." }, ], quote: { text: "This is not your dad's auto club.", name: "Black Keycard", role: "Brand voice", }, }, { id: "brand", eyebrow: "KEY DECISION", headline: "We made the membership physical: a matte-black metal card, machined and engraved with your name.", body: "If the club was the product, it needed a totem you could hold. **We made the card real — matte-black, machined metal, engraved with the member's name and number,** delivered in a presentation box on welcome. A thin-line 'BK' monogram carried the identity onto hats, tees, business cards and the welcome kit. **The card became the single key to the entire collection** — and the quiet signal, dropped on a table, that you belong.", arts: [ { type: "image", src: IMG.bkcCard, caption: "The Black Keycard — engraved, member-numbered metal, presented in its box. The membership made tangible." }, { type: "image", src: IMG.bkcKit, caption: "The identity system across the welcome kit — wordmark, monogram, hang-tags and member collateral." }, ], }, { id: "process", eyebrow: "THE PROCESS", headline: "We rebuilt the public face to sell belonging, then put the whole club in your pocket — on tokens and a private AI concierge.", body: "With the positioning set, I rebuilt the site into **a near-private teaser that sells belonging, not horsepower** — every path ends at 'Apply.' Then I designed the product itself. **Booking runs on tokens: a monthly allowance you spend on cars and the miles you drive,** settled automatically by onboard telematics — a wallet for horsepower with a deliberately on-chain feel. On top sits **a conversational AI concierge** that finds a car, checks availability across the city and arranges delivery or a driver from a single sentence. **I used Claude to prototype the concierge's dialogue and to draft the membership and token copy at scale,** so the product felt like talking to a person, not filling a form.", arts: [ { type: "image", src: IMG.bkcAppReal, caption: "The club in your pocket — fleet, availability and bookings across the city, settled in tokens." }, { type: "image", src: IMG.bkcConcierge, caption: "The conversational AI concierge — find a car, check availability and arrange a driver from a single sentence." }, ], }, { id: "membership", eyebrow: "ITERATION", headline: "Instead of selling the cars, we sold the math: membership costs less than the depreciation alone.", body: "The hardest sell wasn't desire — it was justifying the price to people who could simply buy the car. So I built the argument visually. **Laid side by side, a year of owning a Lamborghini or a GT2 RS costs more than a full Gold membership** once you count title, insurance, maintenance and depreciation. Across three years, ownership runs past $200K while membership lands near $90K. **The numbers, not the cars, closed the gap** — and reframed membership as the rational choice, not the indulgent one.", arts: [ { type: "image", src: IMG.bkcCompare, caption: "Membership vs. ownership — value, insurance, maintenance and depreciation, side by side. The case for access over ownership." }, ], }, { id: "community", eyebrow: "FLAGSHIP MOMENT", headline: "The fastest way to prove this wasn't a rental was to throw the party — Coachella Finale, invite only.", body: "A club is only as real as the room it can fill. **We extended the brand into a full event identity for the Coachella Finale at The Thermal Club** — invitations, VIP passes, wristbands and lanyards, all in the same matte-black system. Member liaisons carried the club into the places the target audience already lived: track days, festivals, supercar rallies. **The events were the product demo** — proof that a Black Keycard bought you a community, not just a car.", arts: [ { type: "image", src: IMG.bkcInvite, caption: "The Coachella Finale invitation and event collateral — the brand stretched into a real-world experience." }, { type: "image", src: IMG.bkcVip, caption: "VIP passes, wristbands and lanyards — access made physical, in the same matte-black language as the card." }, ], }, { id: "outcome", eyebrow: "THE OUTCOME", headline: "A crowded rental business became an invite-only club with a $30M fleet across four cities.", body: "The work spanned brand identity, web, product and event design — one coherent system built to make membership feel inevitable. The cars were always extraordinary; the achievement was making belonging to them feel like the point.", arts: [ { type: "metrics", cells: [ { big: "50+", label: "SUPERCARS IN ROTATION" }, { big: "$30M", label: "TOTAL FLEET VALUE" }, { big: "4 cities", label: "LA · SF · NEW YORK · MIAMI" }, { big: "Invite only", label: "EVERY MEMBER PERSONALLY REVIEWED" }, ], }, { type: "image", src: IMG.bkcParking, caption: "Positioning made literal — the brand line that set the tone for every decision after it." }, ], }, { id: "reflection", eyebrow: "REFLECTION", headline: "What I carried out of building a club nobody can just buy into.", reflection: [ { lead: "Scarcity is a product decision, not a campaign", body: "making the club invite-only and applications-only reshaped the brand, the web and the booking flow at once. The constraint was the strategy." }, { lead: "Sell the membership, not the machine", body: "the supercars were never the differentiator; belonging was. Once I designed for the community, every other decision got easier." }, { lead: "Give the intangible a totem", body: "a matte-black engraved metal card turned an abstract membership into something you could hold and show. Objects carry status screens can't." }, { lead: "AI turns a form into a concierge", body: "I used AI to design a conversational booking agent that allocates cars and arranges delivery. Treating the AI as a person, not a feature, is now how I approach product." }, ], }, ], }, flownow: { tags: ["PRODUCT DESIGN", "BRANDING", "DESIGN SYSTEMS", "WEB DESIGN", "ONBOARDING"], title: "FlowNow", subtitle: "Turning a bespoke web service into a scalable launch product for coaches", meta: [ { k: "ROLE", v: "Design Lead — Brand, Web & System" }, { k: "DURATION", v: "2023 — 2024" }, { k: "PLATFORM", v: "Brand · Web · Course Platform" }, ], hero: { src: IMG.fnHero, caption: "FlowNow — a brand built to feel like flow itself: fluid, faceless, energetic. The box product that put a proven launch system in coaches' hands.", }, sections: [ { id: "context", eyebrow: "CONTEXT", headline: "I joined an agency whose custom builds were scaling coaches twelvefold — and was asked to put that result in a box.", body: "Our bespoke websites worked: one client went from **20K to 250K in monthly revenue** on the back of the systems and automations we built. But every project started from a blank canvas, which made the work slow, expensive, and out of reach for coaches with smaller budgets. **I led brand, web and the underlying system,** and the brief was deceptively simple — take the thing that only worked as a high-end custom build and make it something we could deliver again and again, affordably, without losing what made it convert.", }, { id: "problem", eyebrow: "THE PROBLEM", headline: "Every site we shipped was the same site underneath — and we were rebuilding it from scratch every single time.", body: "Two things were true at once. **Our successful client sites were all made of the same elements in the same structure** — the architecture never really changed, only the photos and the words. And the coaches we wanted to serve next couldn't launch on their own: they cobbled together random tools into chaotic systems that quietly throttled their growth. The structural cause wasn't talent or tooling. It was that **we were re-solving the same architecture from zero on every project,** and a one-off custom build can never be cheap enough for someone just starting to sell online courses.", list: { label: "WHAT WAS QUIETLY KILLING MARGIN", items: [ "Re-architecting the same page structure on every new project", "Open-ended timelines and scope creep with no fixed finish line", "Coaches priced out of bespoke, left stitching tools together alone", ], }, arts: [ { type: "image", src: IMG.fnClients, caption: "Two of our original custom builds — an energy-business academy and a self-development brand. Different on the surface, the same skeleton underneath.", }, { type: "image", src: IMG.fnClientD, caption: "More of the same: bespoke language-coaching platforms, each built from scratch. Across every one, a single repeating structure — the pattern the template was later distilled from.", }, ], }, { id: "strategy", eyebrow: "MY STRATEGY", headline: "I stopped designing websites and started designing one template the whole business could pour clients into.", body: "The guiding policy: **let the structure do the strategic heavy lifting, so design becomes about making it beautiful — not solving the architecture again.** I built one conversion-focused template from our internal framework for pages that actually sell, purpose-built for the coaching niche. The real breakthrough was alignment: **the client intake forms — copy, content, design — mirrored the exact sections of the homepage and product landing page,** so the information a client gave us dropped almost directly into place. Duplicate the template, pour in their photos and words, configure a few plugins, add the license. The structure carried the strategy; the customization made it theirs.", arts: [ { type: "image", src: IMG.fnSite, caption: "FlowNow's own landing page — the template's selling structure, applied to the product that productized it.", }, ], list: { label: "WHAT THIS RULED OUT", items: [ "Re-solving page architecture per client — the layout and plugins stay fixed", "Blank-brief intake — every form question maps to a section it fills", "One-off pricing that locked out smaller-budget coaches", ], }, quote: { text: "Once I saw that every page was the same elements in the same structure, the job stopped being 'design a website' and became 'design the template everything pours into.'", name: "Natalia Yockelle", role: "Design Lead, FlowNow", }, }, { id: "brand", eyebrow: "KEY DECISION", headline: "We named it FlowNow and made the brand feel like flow itself — fluid, faceless, in motion.", body: "A box product still needs a soul. **The idea was flow: faceless and fluid** — an identity that felt like an agency but carried a different, calmer energy. The mark and its waves bend and spill across the surface so everything seems to *move.* The palette does the emotional work: **orange and shades of yellow for joy and energy,** set against a muted, grounded background that anchors the brand and gives it weight. It had to look unconventional and agency-grade at once — premium enough to trust with your launch, warm enough to make starting feel light.", arts: [ { type: "image", src: IMG.fnLogo, caption: "The FlowNow mark — flowing forms, an iridescent wave, and the orange-to-light gradient that carries the brand's optimism.", }, ], }, { id: "process", eyebrow: "THE PROCESS", headline: "I built the whole launch in a box — template, intake forms, guides, a platform manual, and a lawyer.", body: "Starter wrapped everything a beginner needs to launch into one onboarding flow. **From day one a client received their documents on their own Google Drive** — every form, graphic and text staying on *their* drive, theirs to keep. We wrote forms and guides that walked them through the unglamorous parts: which hosting to choose, where to buy a domain, how to write a selling landing page, how to run a newsletter. On the course platform itself sat a manual for operating it — adding products, linking products to courses, building modules and lessons, sending newsletters — so a client felt cared for on every level. We added **a 15-minute legal consultation and niche-specific legal documents** for the site. **I used AI to draft and refine the selling copy at scale,** so each launch shipped on a structure we already knew converted.", arts: [ { type: "image", src: IMG.fnMaterials, caption: "The Starter system — illustrated instruction guides, a course-platform manual and short how-to videos, all delivered to the client's own Google Drive.", }, ], }, { id: "iteration", eyebrow: "ITERATION", headline: "The first version asked clients to fill the template themselves. They could. They just wouldn't.", body: "In phase one we handled the technical build and left clients one job: drop in their own text and photos, guided by our instructions. It looked efficient and it failed. **Clients didn't have the time, and when they had the time, they still didn't do it** — not because it was hard (they told us themselves it was simple and clearly explained) but because they didn't *want* to. The honest read was reluctance, not inability. So in phase two **we stopped leaving clients alone with the page and took the work back** — copywriting, graphics, implementation, wiring up every plugin — and raised the price to match the team behind it. The instructional videos didn't go to waste: **we kept them as per-element guides** for the client who only wants to, say, add a new product later.", arts: [ { type: "image", src: IMG.fnClientLaunched, caption: "A launch from Starter's first version — the self-service model. We built the system; the client filled it with their own copy and photos, guided by our instructions." }, { type: "image", src: IMG.fnClientC, caption: "Starter's second version — done-for-you. We took back the copy, graphics, build and plugin wiring, raised the price to match the team, and shipped in a fixed thirty-day window." }, ], quote: { text: "They admitted it was easy. They still didn't do it. That told me the product wasn't a set of instructions — it was the work, done for them.", name: "Natalia Yockelle", role: "Design Lead, FlowNow", }, }, { id: "range", eyebrow: "THE PROOF", headline: "The real test: could one skeleton disappear behind brands this different?", body: "A template is only productized if it can vanish. The same structure had to carry a school for modern witches and a spiritual-awakening coach — and read, every time, as if it were built for that one person. **Same sections, same plugins, same proven flow underneath; radically different soul on top.** When a client can't see the skeleton, the system is working.", arts: [ { type: "image", src: IMG.fnClientB, caption: "A school for modern witches — dark, editorial, cinematic. Same template, unrecognisably its own." }, { type: "image", src: IMG.fnClientA, caption: "'Wake up' — a spiritual-awakening coach. Deep oxblood, warm orange, ceremonial imagery. The same skeleton, a wholly different soul." }, ], }, { id: "outcome", eyebrow: "THE OUTCOME", headline: "One proven skeleton, radically different brands, launched in a fixed thirty-day window.", body: "Starter turned an open-ended custom service into a repeatable product: faster, cheaper to deliver, and finally within reach of coaches at the start of their journey — without giving up the quality that had scaled our first client twelvefold. It also grew the team. The structured process accelerated our junior designer dramatically, because **the system itself showed exactly what 'good' looked like.**", arts: [ { type: "metrics", cells: [ { big: "12\u00D7", label: "REVENUE SCALED ON OUR FIRST CLIENT \u2014 20K \u2192 250K / MONTH" }, { big: "30 days", label: "FIXED WINDOW FROM COMPLETED DATA TO LAUNCH" }, { big: "1 template", label: "EVERY COACH PLATFORM, THE SAME PROVEN SKELETON" }, { big: "Done-for-you", label: "FULL BUILD, COPY, GRAPHICS & LEGAL INCLUDED" }, ], }, ], }, { id: "reflection", eyebrow: "REFLECTION", headline: "What I carried out of turning a service into a product.", reflection: [ { lead: "Patterns are products waiting to be named", body: "the moment I saw every successful site shared one structure, the work changed from designing pages to designing the system that makes them. I now look for the repeatable skeleton first." }, { lead: "The intake form should mirror the output", body: "aligning every form question to a section of the page is what made the system fast. Information dropped into place instead of being translated. I'd build any productized service this way." }, { lead: "Self-service can be a false economy", body: "clients who could do the work still wouldn't. Designing for the reluctance, not the ability, is what turned Starter from a guide into a real product — and justified its price." }, { lead: "A system teaches the team, not just the client", body: "the same structure that sped up delivery showed a junior designer exactly what good looked like. Clear documentation turned out to be a growth tool, not overhead." }, ], }, ], }, }, pl: { mattereum: { tags: ["PRODUCT DESIGN", "WEB3", "BRANDING", "WEB DESIGN", "UX/UI"], title: "Mattereum", subtitle: "Infrastruktura prawna dla tokenizacji aktywów o wysokiej wartości", meta: [ { k: "ROLA", v: "Projektantka Web & Produkt" }, { k: "CZAS", v: "2021 — 2022" }, { k: "ZAKRES", v: "Web · Brand · Motion" }, ], hero: { src: IMG.hero, caption: "Asset Passport dla nieruchomości wartej miliony — fizyczny dom, który staje się zweryfikowanym, zbywalnym aktywem cyfrowym.", }, sections: [ { id: "context", eyebrow: "KONTEKST", headline: "Zostałam zatrudniona do przeprojektowania strony, ale prawdziwym zadaniem było wytłumaczenie idei, do której świat jeszcze nie dorósł.", body: "Mattereum zbudował coś naprawdę bezprecedensowego: sposób na tokenizację fizycznych aktywów o wysokiej wartości — złota, nieruchomości, zabytkowych instrumentów — na blockchainie, zabezpieczonych gwarancjami prawnymi egzekwowalnymi w 170 krajach. Technologia działała. Ale strona czytała się jak pismo prawne skrzyżowane z whitepaperem o blockchainie. **Dołączyłam jako projektantka całej obecności cyfrowej** — web, brand, prezentacje, motion i UX asset passportu — pracując u boku Head of Design. W pierwszym tygodniu brief sam się przede mną przesunął: **problemem nie była strona, tylko zrozumiałość.**", }, { id: "problem", eyebrow: "PROBLEM", headline: "Mattereum wyprzedzał wszystkich o lata — i właśnie ta przewaga sprawiała, że nikt go nie rozumiał.", body: "Przeczytałam wszystko i usiadłam z założycielami, zespołem prawnym i inżynierami blockchaina. Wzór był jasny: **ideę zawsze tłumaczono od środka na zewnątrz** — rejestry, smart kontrakty, SPV, zdecentralizowana certyfikacja — język oczywisty dla twórców i kompletnie niezrozumiały dla kupującego, który ma przenieść miliony. Prawdziwym ograniczeniem nie było zaufanie do technologii; chodziło o to, że **sprzedający i kupujący po prostu nie potrafili sobie wyobrazić, co łączy fizyczny dom z cyfrowym tokenem.** Bez tego widocznego mostu nie było dowodu praw, proweniencji ani odpowiedzialności — a więc nie było handlu.", arts: [ { type: "reveal", before: IMG.revealBefore, after: IMG.revealAfter, beforeLabel: "BEZ MOSTU", afterLabel: "Z MATTEREUM", caption: "Przeciągnij uchwyt. Bez mostu fizyczne–cyfrowe nie ma handlu; to Asset Passport, jego certyfikatorzy i gwarancje sprawiają, że aktyw staje się zbywalny.", }, ], }, { id: "challenge", eyebrow: "WYZWANIE", headline: "Nie było wzorców do zapożyczenia — \u201Eblockchainowy paszport aktywu\u201D nie był czymś, co ktokolwiek wcześniej zaprojektował.", body: "Był rok 2021, szczyt boomu NFT, co utrudniało sprawę, a nie ułatwiało: **musieliśmy wyglądać wiarygodnie blockchainowo, jednocześnie odcinając się od spekulacyjnych JPEG-ów.** Nikt nie zaprojektował stokenizowanego rynku nieruchomości ani cyfrowego paszportu dla fizycznego obiektu. Każdy interfejs, metafora i ikona musiały zostać **wymyślone, przetestowane pod kątem realnego zrozumienia i odrzucone w chwili, gdy laik mrugnął okiem.**", }, { id: "strategy", eyebrow: "MOJA STRATEGIA", headline: "Uznałam, że projekt musi wytłumaczyć Mattereum babci, zanim zrobi wrażenie na inwestorze.", body: "Naczelną zasadą była **jasność ponad krypto-szpan.** Każdy aktyw, każdy ekran, każdy diagram musiał odpowiedzieć prostym językiem na trzy pytania — jaki problem rozwiązuje, jak działa i dlaczego jest ważny — zanim na ekranie pojawił się jakikolwiek żargon. Z Head of Design prowadziłam brand tak samo: **zachowaliśmy rozpoznawalne \u201EM\u201D, ale złagodziliśmy ostry kwadrat w okrąg** — cichy ukłon w stronę gospodarki obiegu zamkniętej i firmy na tyle poważnej, by trzymać akt własności twojego domu. **Ta sama zasada przebudowała stronę:** wczesna wersja próbowała jednocześnie marketować i sprzedawać, nie wyjaśniając niczego, więc przebudowaliśmy komunikację na przestrzeni czterech pełnych wersji, aż przestała sprzedawać, a zaczęła tłumaczyć — lądując na jednej ludzkiej idei: *bezgraniczny e-commerce, ale dla transakcji za miliony.*", arts: [ { type: "image", src: IMG.rebrand, caption: "Ewolucja marki — od twardego, trudnego do odczytania znaku w kwadracie (stary) do złagodzonego, okrągłego \u201EM\u201D (nowy). Tak, by pasował obok sztabki złota i kancelarii prawnej.", }, { type: "image", src: IMG.beforeAfterSite, caption: "Przed \u2192 po na stronie: od oryginalnej, gęstej od funkcji wersji (V1) do finalnej, stawiającej na wyjaśnienie V4, zbudowanej wokół jednej jasnej obietnicy.", }, ], list: { label: "CO TO WYKLUCZYŁO", items: [ "Spekulacyjne tropy NFT — neony, trójwymiarowe małpy, język hype'u", "Tłumaczenia od środka, zaczynające od smart kontraktów zamiast od aktywu", "Wszystko, co przypominało bardziej kasyno niż rejestr", ], }, }, { id: "process", eyebrow: "PROCES", headline: "Zamieniłam strumień wiedzy legal-tech w jeden canvas, za którym każdy mógł podążyć.", body: "Nie było drogi na skróty do zrozumienia: siedziałam na każdym warsztacie, który Head of Design prowadziła z CEO, współzałożycielami, prawnikami i inżynierami, słuchając tej samej idei opowiedzianej na tuzin sposobów, aż wyłoniła się wersja prosta. Żeby samą tokenizację dało się nauczać, **zbudowaliśmy Tokenization Canvas** — jedną tablicę z wszystkim, czego firma potrzebuje, by wprowadzić aktyw on-chain: aktyw, jego kustosz, certyfikatorzy, gwarancje, marketplace, proces posprzedażowy. **Użyłam narzędzi AI, by tworzyć i testować pod presją teksty wyjaśniające** dla tagowania, skanowania i każdej klasy aktywów, tak by czytelnik nigdy nie natrafił na zdanie, którego nie da się zrozumieć.", arts: [ { type: "image", src: IMG.canvas, caption: "Tokenization Canvas — chaotyczny, niewidoczny proces wprowadzania realnego aktywu on-chain zamieniony w jeden artefakt planistyczny, na który klient i prawnik mogą wskazać razem.", }, ], quote: { text: "Nat jest szybka, niezawodna i rygorystyczna zarówno w myśleniu, jak i wykonaniu. Mocno techniczna i bardzo elastyczna — z Natalią pracowałabym znów bez wahania.", name: "Kate Pincott", role: "Head of Design, Mattereum", }, }, { id: "passport", eyebrow: "KLUCZOWA DECYZJA", headline: "Uczyniliśmy abstrakcyjną ideę namacalną, dając każdemu rodzajowi aktywu ten sam paszport.", body: "Asset Passport stał się sercem systemu. Pracując na szablonie motion, który agencja GeexArts zaprojektowała na bazie wytycznych w After Effects, **przeprojektowałam i wyprodukowałam wizualizacje paszportu dla kolejnej klasy aktywów za klasą** — luksusowych aut, mody, metali szlachetnych, nieruchomości, wina, instrumentów i więcej. **Te sześć klas były przykładem** na to, że jeden system może opatrzyć paszportem niemal wszystko. Paszport stał się niemal szablonem do tokenizacji dowolnego obiektu o wysokiej wartości, a za nim ustawiał się use case za use case'em — każdy niosący tożsamość aktywu, jego stan, certyfikatorów i gwarancje w jednym spojrzeniu.", arts: [ { type: "image", src: IMG.bag, caption: "Asset Passport w animacji — detale, proweniencja, gwarancje i eksperccy certyfikatorzy promieniujący z jednego fizycznego obiektu.", }, ], }, { id: "land", eyebrow: "SZTANDAROWY USE CASE", headline: "Naszym największym use case'em była plaża: pierwsza w Wielkiej Brytanii działka wystawiona na sprzedaż jako NFT.", body: "Spośród wszystkich use case'ów, które odblokował Paszport, jeden wyróżniał się ponad inne. Wspólnie z konsultantami nieruchomości West London City Lets, Mattereum wprowadził **nadmorską działkę na południowym wybrzeżu Anglii on-chain — wystawioną na OpenSea za oferty powyżej \u00A31,9 mln** (około $2 mln). To był **światowy first:** pierwszy raz, gdy brytyjską ziemię wystawiono na sprzedaż jako NFT z pełnym aparatem prawnym — aktem własności, wypisami i materiałami referencyjnymi — wpiętym w [Mattereum Asset Passport](https://passport.mattereum.com/West.London.Lets.01/s), sparowanym ze smart kontraktem i zbywalnym przez maksymalnie pięć lat. Pozostaje najcenniejszym fizycznym aktywem, jaki Mattereum kiedykolwiek opatrzył paszportem. **Zaprojektowanie paszportu, który mógł unieść akt własności, a nie tylko opis, było momentem, w którym cały protokół przestał być teoretyczny.**", arts: [ { type: "image", src: IMG.land, caption: "Paszport ziemi West London City Lets — nadmorska działka warta \u00A31,9 mln, jej tytuł i gwarancje zweryfikowane on-chain. Pierwsza brytyjska ziemia wystawiona na sprzedaż jako NFT.", }, ], quote: { text: "Nieruchomości to największa klasa aktywów na świecie — ale koszty transakcyjne są ekstremalnie wysokie. Uczynienie kupna i sprzedaży tańszym i prostszym uwolni mnóstwo uśpionego potencjału.", name: "Vinay Gupta", role: "Założyciel i CEO, Mattereum", }, }, { id: "iteration", eyebrow: "ITERACJA", headline: "Przetestowaliśmy Paszport tam, gdzie naprawdę żyje — wewnątrz prawdziwej oferty na OpenSea.", body: "Gdy strona wreszcie tłumaczyła ideę, otwartym pytaniem było, czy Paszport przetrwa zderzenie z prawdziwym marketplace'em. **Testy z użytkownikami, prowadzone przez Head of Design, podczas gdy ja projektowałam i budowałam asynchronicznie, skupiły się na jednym punkcie tarcia: jak Asset Passport czyta się wewnątrz żywej oferty na OpenSea** — przed i po naszym redesignie. Czy sprawiał, że spekulacyjny NFT wydawał się objętym gwarancją, realnym aktywem? A ponieważ aktywa o wysokiej wartości nie żyją na jednej platformie, **ten sam paszport musiał bronić się na każdym marketplace** — OpenSea, Rarible, Coinbase NFT, własnej witrynie — nigdy nie tracąc swojego znaczenia.", arts: [ { type: "video", src: IMG.openseaVideo, caption: "Asset Passport osadzony w prawdziwej ofercie na OpenSea — moment, w którym spekulacyjny NFT zaczyna wyglądać jak objęty gwarancją, realny aktyw.", }, { type: "image", src: IMG.assetClasses, caption: "Jeden paszport, każdy marketplace — ten sam obiekt zaufania na OpenSea, Rarible, Coinbase NFT i dalej, nigdy zredukowany do zwykłego JPEG-a.", }, ], }, { id: "outcome", eyebrow: "REZULTAT", headline: "Dwa lata na żywo, obsługa transakcji sześciocyfrowych i język wizualny, który każdy potrafi odczytać.", body: "Praca objęła strategię marki, web design, UX, motion i tłumaczenie między zespołami. Rezultatem nie był jeden ekran — był nim system, który pozwolił protokołowi legal-tech wytłumaczyć się ludziom, dla których powstał.", arts: [ { type: "metrics", cells: [ { big: "$100,000+", label: "OBSŁUŻONE TRANSAKCJE ON-CHAIN" }, { big: "170", label: "KRAJÓW Z EGZEKWOWALNYMI GWARANCJAMI" }, { big: "Dowolna klasa", label: "JEDEN SYSTEM PASZPORTU, GOTOWY NA SKALĘ" }, { big: "2 lata", label: "NA ŻYWO W PRODUKCJI" }, ], }, { type: "image", src: IMG.marketplace, caption: "Koncept marketplace'u gospodarki obiegu zamkniętej — aktywa o wysokiej wartości, przeglądalne i weryfikowalne jak w każdym sklepie.", }, ], }, { id: "reflection", eyebrow: "REFLEKSJA", headline: "Co wyniosłam z pracy na samej krawędzi.", reflection: [ { lead: "Jasność to funkcja", body: "gdy idea wyprzedza swój rynek, pierwszym zadaniem projektu jest zrozumiałość, nie perswazja. Najpierw wytłumacz, potem sprzedawaj." }, { lead: "Wspólny artefakt bije wspólny dokument", body: "Tokenization Canvas dał prawnikom, inżynierom i klientom jeden obraz, na który mogli wskazać. Teraz buduję taki canvas wcześnie w każdym złożonym projekcie." }, { lead: "Jeden obiekt zaufania, powtórzony, uczy całego systemu", body: "nadanie każdej klasie aktywów tego samego Asset Passportu sprawiło, że abstrakcyjny protokół stał się konkretny. Spójność była wyjaśnieniem." }, { lead: "AI to narzędzie zrozumiałości", body: "użyłam AI, by pisać i testować pod presją teksty prostym językiem dla dziesiątek technicznych pojęć. To dziś standardowy element tego, jak tłumaczę złożoność." }, ], }, ], }, blackkeycard: { tags: ["BRANDING", "PRODUCT DESIGN", "UX/UI", "WEB DESIGN", "WEB3"], title: "Black Keycard", subtitle: "Klub członkowski supercar — tylko z zaproszenia", meta: [ { k: "ROLA", v: "Projektantka Brand & Produkt" }, { k: "CZAS", v: "2019 — 2020" }, { k: "ZAKRES", v: "Brand · Web · Aplikacja" }, ], hero: { src: IMG.bkcWww, caption: "Publiczna twarz, przebudowana — prawie prywatny teaser, który sprzedaje przynależność, gdzie każda ścieżka prowadzi w jedno miejsce: Apply.", }, sections: [ { id: "context", eyebrow: "KONTEKST", headline: "Dołączyłam do wypożyczalni supercarów z zadaniem zamienienia jej w klub, do którego ludzie aplikują.", body: "Black Keycard zaczął się tak, jak wiele dobrych rzeczy — od obsesji założyciela na punkcie elektrycznych supersamochodów, monetyzowanej jeden wynajem na raz. Gdy dołączyłam, **flota przerosła model biznesowy, który za nią stał.** Prowadziłam brand, web i produkt, a brief zmienił się niemal od razu: to nie mogło być kolejne miejsce, które wynajmuje ci Lamborghini na weekend. To musiał być **powód, by przynależeć.**", arts: [ { type: "image", src: IMG.bkcLogo, caption: "Przebudowana strona, mówiąca językiem członków — inny rodzaj posiadania: to nie jest klub motoryzacyjny twojego taty." }, ], }, { id: "problem", eyebrow: "PROBLEM", headline: "W LA i San Francisco wynajem supercara to towar — a Black Keycard wyglądał jak wszyscy inni, którzy go wynajmują.", body: "Diagnoza była niewygodna: **w samym aucie, cenie i stronie Black Keycard był wymienny z tuzinem innych wypożyczalni.** Towaru nie wygrasz towarem. To, czego naprawdę chcieli nasi odbiorcy — founderzy, CTO, sportowcy, liderzy kreatywni — to nie było auto na weekend; to był **dostęp, status i sala pełna ludzi takich jak oni.** Prawdziwym produktem nigdy nie było Lamborghini. Było nim członkostwo.", list: { label: "CO RYNEK JUŻ MIAŁ", items: [ "Wymienne marki exotic car rental konkurujące ceną", "Publiczne katalogi, które każdy mógł przeglądać i zabookować w dwa kliknięcia", "Krzykliwe, neonowe klisze supersamochodów, które taniły same auta", ], }, }, { id: "strategy", eyebrow: "MOJA STRATEGIA", headline: "Zaprojektowałam Black Keycard jako tajne stowarzyszenie, nie wypożyczalnię — nie ma 'Kup teraz', jest tylko 'Aplikuj'.", body: "Podjęłam jedną nadrzędną decyzję: **traktować członkostwo jako produkt, a niedobór jako model działania.** Ten jeden wybór przepisał wszystko poniżej. Marka stała się matowo-czarna, limitowana i celowo cicha — *this is not your dad's auto club.* Strona nie była nawet w pełni publiczna; **każde CTA prowadziło do 'Apply Now', nigdy do 'Kup teraz'** — żeby wejść, trzeba przejść weryfikację i zostać przyjętym. Ekskluzywność nie była kampanią. Była architekturą.", arts: [ { type: "image", src: IMG.bkcSign, caption: "W świecie — marka na ulicy, czytająca się jak dom mody, nie wypożyczalnia." }, ], quote: { text: "This is not your dad's auto club.", name: "Black Keycard", role: "Głos marki", }, }, { id: "brand", eyebrow: "KLUCZOWA DECYZJA", headline: "Uczyniliśmy członkostwo fizycznym: matowo-czarna metalowa karta, frezowana i grawerowana twoim nazwiskiem.", body: "Jeśli klub był produktem, potrzebował totemu, który można trzymać w dłoni. **Zrobiliśmy kartę naprawdę — matowo-czarny, frezowany metal, grawerowany nazwiskiem i numerem członka,** dostarczany w pudełku prezentacyjnym na powitanie. Cienkoliniowy monogram 'BK' przeniósł identyfikację na czapki, koszulki, wizytówki i welcome kit. **Karta stała się jedynym kluczem do całej kolekcji** — i cichym sygnałem, rzuconym na stół, że należysz.", arts: [ { type: "image", src: IMG.bkcCard, caption: "Black Keycard — grawerowany, numerowany metal w pudełku. Członkostwo uczynione namacalnym." }, { type: "image", src: IMG.bkcKit, caption: "System identyfikacji w welcome kicie — wordmark, monogram, metki i materiały członkowskie." }, ], }, { id: "process", eyebrow: "PROCES", headline: "Przebudowaliśmy publiczną twarz, by sprzedawała przynależność, a potem włożyliśmy cały klub do kieszeni — na tokenach i prywatnym AI concierge.", body: "Z ustalonym pozycjonowaniem przebudowałam stronę w **prawie prywatny teaser, który sprzedaje przynależność, nie konie mechaniczne** — każda ścieżka kończy się na 'Apply'. Potem zaprojektowałam sam produkt. **Booking działa na tokenach: miesięczna pula, którą wydajesz na auta i przejechane mile,** rozliczana automatycznie przez wbudowaną telematykę — portfel na konie mechaniczne z celowo on-chainowym sznytem. Na wierzchu siedzi **konwersacyjny AI concierge**, który znajduje auto, sprawdza dostępność w mieście i organizuje dostawę lub kierowcę z jednego zdania. **Użyłam Claude, by prototypować dialogi concierge'a i pisać na skalę teksty o członkostwie i tokenach,** tak by produkt sprawiał wrażenie rozmowy z człowiekiem, a nie wypełniania formularza.", arts: [ { type: "image", src: IMG.bkcAppReal, caption: "Klub w kieszeni — flota, dostępność i rezerwacje w mieście, rozliczane w tokenach." }, { type: "image", src: IMG.bkcConcierge, caption: "Konwersacyjny AI concierge — znajdź auto, sprawdź dostępność i zamów kierowcę jednym zdaniem." }, ], }, { id: "membership", eyebrow: "ITERACJA", headline: "Zamiast sprzedawać auta, sprzedaliśmy matematykę: członkostwo kosztuje mniej niż sama amortyzacja.", body: "Najtrudniejsze nie było wzbudzenie pożądania — lecz uzasadnienie ceny ludziom, których stać po prostu kupić auto. Więc zbudowałam argument wizualnie. **Zestawione obok siebie, rok posiadania Lamborghini albo GT2 RS kosztuje więcej niż pełne członkostwo Gold,** gdy doliczysz rejestrację, ubezpieczenie, serwis i amortyzację. W trzy lata posiadanie przekracza $200K, a członkostwo ląduje przy $90K. **To liczby, nie auta, zamknęły lukę** — i przeformułowały członkostwo jako wybór racjonalny, nie ekstrawagancki.", arts: [ { type: "image", src: IMG.bkcCompare, caption: "Członkostwo vs posiadanie — wartość, ubezpieczenie, serwis i amortyzacja obok siebie. Argument za dostępem ponad posiadaniem." }, ], }, { id: "community", eyebrow: "SZTANDAROWY MOMENT", headline: "Najszybszym sposobem, by udowodnić, że to nie wypożyczalnia, było wyprawienie imprezy — Coachella Finale, tylko z zaproszenia.", body: "Klub jest tak realny, jak sala, którą potrafi zapełnić. **Rozszerzyliśmy markę w pełną identyfikację eventu na Coachella Finale w The Thermal Club** — zaproszenia, przepustki VIP, opaski i smycze, wszystko w tym samym matowo-czarnym systemie. Member liaisons wnosili klub w miejsca, w których żyła grupa docelowa: track days, festiwale, rajdy supersamochodów. **Eventy były demem produktu** — dowodem, że Black Keycard kupuje ci społeczność, nie tylko auto.", arts: [ { type: "image", src: IMG.bkcInvite, caption: "Zaproszenie na Coachella Finale i materiały eventowe — marka rozciągnięta w doświadczenie w realu." }, { type: "image", src: IMG.bkcVip, caption: "Przepustki VIP, opaski i smycze — dostęp uczyniony fizycznym, w tym samym matowo-czarnym języku co karta." }, ], }, { id: "outcome", eyebrow: "REZULTAT", headline: "Zatłoczony biznes wynajmu stał się klubem tylko z zaproszenia, z flotą wartą $30M w czterech miastach.", body: "Praca objęła identyfikację marki, web, produkt i projekt eventów — jeden spójny system zbudowany tak, by członkostwo wydawało się nieuniknione. Auta zawsze były wyjątkowe; osiągnięciem było sprawienie, że przynależność do nich stała się sednem.", arts: [ { type: "metrics", cells: [ { big: "50+", label: "SUPERSAMOCHODÓW W ROTACJI" }, { big: "$30M", label: "CAŁKOWITA WARTOŚĆ FLOTY" }, { big: "4 miasta", label: "LA · SF · NOWY JORK · MIAMI" }, { big: "Tylko z zaproszenia", label: "KAŻDY CZŁONEK OSOBIŚCIE ZWERYFIKOWANY" }, ], }, { type: "image", src: IMG.bkcParking, caption: "Pozycjonowanie wprost — linia marki, która nadała ton każdej kolejnej decyzji." }, ], }, { id: "reflection", eyebrow: "REFLEKSJA", headline: "Co wyniosłam z budowania klubu, do którego nikt nie może po prostu kupić wejścia.", reflection: [ { lead: "Niedobór to decyzja produktowa, nie kampania", body: "uczynienie klubu invite-only i opartym na aplikacjach przebudowało markę, web i flow bookingu naraz. Ograniczenie było strategią." }, { lead: "Sprzedawaj członkostwo, nie maszynę", body: "supersamochody nigdy nie były wyróżnikiem; była nim przynależność. Gdy zaczęłam projektować dla społeczności, każda inna decyzja stała się łatwiejsza." }, { lead: "Daj temu, co nienamacalne, totem", body: "matowo-czarna grawerowana metalowa karta zamieniła abstrakcyjne członkostwo w coś, co można trzymać i pokazać. Przedmioty niosą status, którego ekrany nie udźwigną." }, { lead: "AI zamienia formularz w concierge'a", body: "użyłam AI, by zaprojektować konwersacyjnego agenta bookingu, który alokuje auta i organizuje dostawę. Traktowanie AI jak osoby, nie funkcji, to dziś mój sposób na produkt." }, ], }, ], }, flownow: { tags: ["PRODUCT DESIGN", "BRANDING", "DESIGN SYSTEMS", "WEB DESIGN", "ONBOARDING"], title: "FlowNow", subtitle: "Przekształcenie usługi web na zamówienie w skalowalny produkt startowy dla coachów", meta: [ { k: "ROLA", v: "Design Lead — Brand, Web & System" }, { k: "CZAS", v: "2023 — 2024" }, { k: "ZAKRES", v: "Brand · Web · Platforma kursowa" }, ], hero: { src: IMG.fnHero, caption: "FlowNow — marka zbudowana tak, by sama czuła się jak flow: płynna, faceless, energetyczna. Produkt pudełkowy, który oddał coachom sprawdzony system startowy.", }, sections: [ { id: "context", eyebrow: "KONTEKST", headline: "Dołączyłam do agencji, której custom buildy skalowały coachów dwunastokrotnie — z zadaniem zamknięcia tego rezultatu w pudełku.", body: "Nasze strony na zamówienie działały: jeden klient urósł z **20K do 250K miesięcznego przychodu** dzięki systemom i automatyzacjom, które zbudowaliśmy. Ale każdy projekt zaczynał się od pustej kartki, co czyniło pracę wolną, kosztowną i poza zasięgiem coachów z mniejszym budżetem. **Prowadziłam brand, web i system pod spodem,** a brief był zwodniczo prosty — wziąć coś, co działało tylko jako drogi custom build, i zamienić w coś, co możemy dostarczać raz za razem, przystępnie, nie tracąc tego, co sprawiało, że konwertowało.", }, { id: "problem", eyebrow: "PROBLEM", headline: "Każda strona, którą wypuszczaliśmy, była pod spodem tą samą stroną — a budowaliśmy ją od zera za każdym razem.", body: "Dwie rzeczy były prawdziwe naraz. **Wszystkie nasze udane strony klientów składały się z tych samych elementów w tej samej strukturze** — architektura nigdy się realnie nie zmieniała, tylko zdjęcia i teksty. A coachowie, których chcieliśmy obsłużyć dalej, nie potrafili wystartować sami: sklejali przypadkowe narzędzia w chaotyczne systemy, które po cichu dławiły ich wzrost. Przyczyną strukturalną nie był talent ani narzędzia. Było nią to, że **rozwiązywaliśmy tę samą architekturę od zera w każdym projekcie,** a jednorazowy custom build nigdy nie będzie dość tani dla kogoś, kto dopiero zaczyna sprzedawać kursy online.", list: { label: "CO PO CICHU ZABIJAŁO MARŻĘ", items: [ "Projektowanie tej samej struktury strony od nowa w każdym projekcie", "Otwarte terminy i pełzający zakres bez stałej linii mety", "Coachowie poza zasięgiem custom buildu, zostawieni sami ze sklejaniem narzędzi", ], }, arts: [ { type: "image", src: IMG.fnClients, caption: "Dwa z naszych pierwszych custom buildów — akademia biznesu energii i marka samorozwoju. Inne na powierzchni, ten sam szkielet pod spodem.", }, { type: "image", src: IMG.fnClientD, caption: "Więcej tego samego: szyte na miarę platformy do nauki języków, każda budowana od zera. W każdej jedna powtarzalna struktura — wzorzec, z którego później zdestylowaliśmy szablon.", }, ], }, { id: "strategy", eyebrow: "MOJA STRATEGIA", headline: "Przestałam projektować strony, a zaczęłam projektować jeden szablon, do którego cały biznes mógł wlewać klientów.", body: "Naczelna zasada: **niech struktura wykona strategiczną pracę u podstaw, tak by projektowanie stało się kwestią uczynienia tego pięknym — nie ponownego rozwiązywania architektury.** Zbudowałam jeden szablon nastawiony na konwersję, oparty na naszym wewnętrznym frameworku stron, które naprawdę sprzedają, stworzony pod niszę coachingową. Prawdziwym przełomem było dopasowanie: **formularze klienta — copy, treść, design — odzwierciedlały dokładne sekcje strony głównej i landing page produktu,** więc informacje, które dawał nam klient, wpadały niemal wprost na swoje miejsce. Duplikujesz szablon, wlewasz zdjęcia i słowa, konfigurujesz kilka wtyczek, dodajesz licencję. Struktura niosła strategię; personalizacja czyniła ją jego.", arts: [ { type: "image", src: IMG.fnSite, caption: "Własny landing page FlowNow — sprzedażowa struktura szablonu, zastosowana do produktu, który ją zproduktyzował.", }, ], list: { label: "CO TO WYKLUCZYŁO", items: [ "Rozwiązywanie architektury strony od nowa dla każdego klienta — układ i wtyczki pozostają stałe", "Brief od zera — każde pytanie w formularzu mapuje się na sekcję, którą wypełnia", "Jednorazową wycenę, która blokowała coachów z mniejszym budżetem", ], }, quote: { text: "Gdy zobaczyłam, że każda strona to te same elementy w tej samej strukturze, zadanie przestało brzmieć 'zaprojektuj stronę', a stało się 'zaprojektuj szablon, do którego wszystko się wlewa'.", name: "Natalia Yockelle", role: "Design Lead, FlowNow", }, }, { id: "brand", eyebrow: "KLUCZOWA DECYZJA", headline: "Nazwaliśmy go FlowNow i sprawiliśmy, że marka sama poczuła się jak flow — płynna, faceless, w ruchu.", body: "Produkt pudełkowy też potrzebuje duszy. **Ideą było flow: faceless i płynne** — identyfikacja, która sprawiała wrażenie agencyjnej, ale niosła inną, spokojniejszą energię. Znak i jego falki wyginają się i rozlewają po powierzchni, tak by wszystko zdawało się *płynąć.* Paleta wykonuje pracę emocjonalną: **pomarańcz i odcienie żółtego dla radości i energii,** osadzone na stonowanym, ugruntowanym tle, które kotwiczy markę i daje jej ciężar. Musiało wyglądać nietypowo i jednocześnie agencyjnie — premium na tyle, by zaufać mu w swoim starcie, ciepło na tyle, by zaczynanie wydawało się lekkie.", arts: [ { type: "image", src: IMG.fnLogo, caption: "Znak FlowNow — płynne formy, opalizująca fala i gradient od pomarańczu do jasności, niosący optymizm marki.", }, ], }, { id: "process", eyebrow: "PROCES", headline: "Zbudowałam całe uruchomienie w pudełku — szablon, formularze, poradniki, instrukcję platformy i prawnika.", body: "Starter pakował wszystko, czego początkujący potrzebuje do startu, w jeden flow onboardingu. **Od pierwszego dnia klient otrzymywał dokumenty na własnym Dysku Google** — każdy formularz, grafika i tekst zostawały na *jego* dysku, na jego własność. Napisaliśmy formularze i poradniki, które prowadziły go przez nudne fragmenty: jaki hosting wybrać, gdzie kupić domenę, jak napisać sprzedażowy landing page, jak prowadzić newsletter. Na samej platformie kursowej siedziała instrukcja jej obsługi — dodawania produktów, łączenia produktów z kursami, budowania modułów i lekcji, wysyłki newsletterów — tak by klient czuł się zaopiekowany na każdym poziomie. Dodaliśmy **15-minutową konsultację z prawnikiem oraz dokumenty prawne dopasowane do niszy.** **Użyłam AI, by pisać i dopracowywać teksty sprzedażowe na skalę,** tak by każde uruchomienie startowało na strukturze, o której już wiedzieliśmy, że konwertuje.", arts: [ { type: "image", src: IMG.fnMaterials, caption: "System Starter — ilustrowane poradniki, instrukcja obsługi platformy kursowej i krótkie filmy how-to, wszystko dostarczone na własny Dysk Google klienta.", }, ], }, { id: "iteration", eyebrow: "ITERACJA", headline: "Pierwsza wersja prosiła klientów, by sami uzupełnili szablon. Potrafili. Po prostu nie chcieli.", body: "W pierwszej fazie braliśmy na siebie budowę techniczną i zostawialiśmy klientowi jedno zadanie: wstawić własne teksty i zdjęcia według naszych instrukcji. Wyglądało to efektywnie i zawiodło. **Klienci nie mieli czasu, a gdy mieli, i tak tego nie robili** — nie dlatego, że było trudne (sami mówili nam, że to proste i jasno wytłumaczone), lecz dlatego, że po prostu nie *chcieli.* Szczera diagnoza brzmiała: niechęć, nie brak umiejętności. Więc w drugiej fazie **przestaliśmy zostawiać klientów samych ze stroną i wzięliśmy pracę z powrotem** — copywriting, grafiki, wdrożenie, podpięcie każdej wtyczki — i podnieśliśmy cenę pod zespół, który za tym stał. Filmy instruktażowe się nie zmarnowały: **zostawiliśmy je jako poradniki do pojedynczych elementów** dla klienta, który chce później jedynie, na przykład, dodać nowy produkt.", arts: [ { type: "image", src: IMG.fnClientLaunched, caption: "Uruchomienie z pierwszej wersji Startera — model samoobsługowy. My budowaliśmy system; klient wypełniał go własnymi tekstami i zdjęciami według naszych instrukcji." }, { type: "image", src: IMG.fnClientC, caption: "Druga wersja Startera — done-for-you. Wzięliśmy z powrotem copy, grafiki, budowę i podpięcie wtyczek, podnieśliśmy cenę pod zespół i dostarczaliśmy w stałym oknie trzydziestu dni." }, ], quote: { text: "Przyznawali, że to łatwe. I tak tego nie robili. To powiedziało mi, że produktem nie jest zestaw instrukcji — produktem jest ta praca, wykonana za nich.", name: "Natalia Yockelle", role: "Design Lead, FlowNow", }, }, { id: "range", eyebrow: "DOWÓD", headline: "Prawdziwy test: czy jeden szkielet potrafi zniknąć pod tak różnymi markami?", body: "Szablon jest produktem tylko wtedy, gdy potrafi zniknąć. Ta sama struktura musiała unieść szkołę współczesnych wiedźm i coacha duchowego przebudzenia — i czytać się za każdym razem tak, jakby powstała dla tej jednej osoby. **Te same sekcje, te same wtyczki, ten sam sprawdzony flow pod spodem; radykalnie inna dusza na wierzchu.** Gdy klient nie widzi szkieletu, system działa.", arts: [ { type: "image", src: IMG.fnClientB, caption: "Szkoła dla współczesnych wiedźm — ciemna, edytorialowa, kinowa. Ten sam szablon, nie do poznania własny." }, { type: "image", src: IMG.fnClientA, caption: "'Obudź się' — coach duchowego przebudzenia. Głęboka oksblood, ciepły pomarańcz, ceremonialne obrazy. Ten sam szkielet, całkiem inna dusza." }, ], }, { id: "outcome", eyebrow: "REZULTAT", headline: "Jeden sprawdzony szkielet, radykalnie różne marki, uruchamiane w stałym oknie trzydziestu dni.", body: "Starter zamienił otwartą usługę na zamówienie w powtarzalny produkt: szybszy, tańszy w dostarczeniu i wreszcie w zasięgu coachów na początku ich drogi — bez rezygnacji z jakości, która wyskalowała naszego pierwszego klienta dwunastokrotnie. Rozwinął też zespół. Ustrukturyzowany proces dramatycznie przyspieszył naszą juniorkę, bo **sam system pokazywał dokładnie, jak wygląda 'dobrze'.**", arts: [ { type: "metrics", cells: [ { big: "12\u00D7", label: "PRZYCHÓD WYSKALOWANY U PIERWSZEGO KLIENTA \u2014 20K \u2192 250K / MIESIĄC" }, { big: "30 dni", label: "STAŁE OKNO OD KOMPLETU DANYCH DO STARTU" }, { big: "1 szablon", label: "KAŻDA PLATFORMA COACHA, TEN SAM SPRAWDZONY SZKIELET" }, { big: "Done-for-you", label: "PEŁNA BUDOWA, COPY, GRAFIKI I PRAWO W PAKIECIE" }, ], }, ], }, { id: "reflection", eyebrow: "REFLEKSJA", headline: "Co wyniosłam z zamiany usługi w produkt.", reflection: [ { lead: "Wzorce to produkty czekające na nazwanie", body: "w chwili, gdy zobaczyłam, że każda udana strona dzieli jedną strukturę, praca zmieniła się z projektowania stron w projektowanie systemu, który je tworzy. Teraz najpierw szukam powtarzalnego szkieletu." }, { lead: "Formularz powinien odzwierciedlać output", body: "dopasowanie każdego pytania w formularzu do sekcji strony jest tym, co uczyniło system szybkim. Informacje wpadały na miejsce zamiast być tłumaczone. Każdą produktyzowaną usługę zbudowałabym tak samo." }, { lead: "Samoobsługa bywa pozorną oszczędnością", body: "klienci, których stać było na zrobienie tego, i tak nie robili. Projektowanie pod niechęć, nie pod umiejętność, zamieniło Starter z poradnika w prawdziwy produkt — i uzasadniło jego cenę." }, { lead: "System uczy zespół, nie tylko klienta", body: "ta sama struktura, która przyspieszyła dostarczanie, pokazała juniorce dokładnie, jak wygląda dobrze. Jasna dokumentacja okazała się narzędziem wzrostu, nie kosztem." }, ], }, ], }, }, }; window.CASE_STUDIES = CASE_STUDIES;