/* Morpara Digital Wallet — case study (route: case/morpara). Same editorial structure & component patterns as the Stablex V2 page, re-themed to the single dark surface #2B1243. Imagery uses the supplied device-gallery montages (onboarding / explore / home-wallets). Site fonts (Clash Display / Cabinet Grotesk). Green accent kept for tags. */ const MP_DARK = "#2B1243"; const MP_HL = "#C9A6F2"; /* hero highlight (light purple) */ const MP_TINT = "rgba(43,18,67,.05)"; const MP_TINT2 = "rgba(43,18,67,.07)"; const MP_GALERI1 = (typeof window !== "undefined" && window.__resources && window.__resources.morparaGaleri1) || "assets/morpara-galeri-1.png"; const MP_GALERI2 = (typeof window !== "undefined" && window.__resources && window.__resources.morparaGaleri2) || "assets/morpara-galeri-2.png"; const MP_EXPLORE_1 = (typeof window !== "undefined" && window.__resources && window.__resources.morparaExplore1) || "assets/morpara-explore-1.png"; const MP_EXPLORE_2 = (typeof window !== "undefined" && window.__resources && window.__resources.morparaExplore2) || "assets/morpara-explore-2.png"; const MP_EXPLORE_3 = (typeof window !== "undefined" && window.__resources && window.__resources.morparaExplore3) || "assets/morpara-explore-3.png"; const MP_EXPLORE_1B = (typeof window !== "undefined" && window.__resources && window.__resources.morparaExplore1b) || "assets/morpara-explore-1new.png"; const MP_LOGIN_VIDEO = (typeof window !== "undefined" && window.__resources && window.__resources.morparaLoginVideo) || "assets/morpara-login-2.mp4"; const MP_VERIFIED_VIDEO = (typeof window !== "undefined" && window.__resources && window.__resources.morparaVerifiedVideo) || "assets/morpara-verified.mp4"; const MP_CONTRACTED_VIDEO = (typeof window !== "undefined" && window.__resources && window.__resources.morparaContractedVideo) || "assets/morpara-contracted-3.mp4"; const MP_VERIFIED2_VIDEO = (typeof window !== "undefined" && window.__resources && window.__resources.morparaVerified2Video) || "assets/morpara-verified-4.mp4"; const MP_KAPAK = (typeof window !== "undefined" && window.__resources && window.__resources.morparaKapak) || "assets/morpara-kapak.png"; const MP_LOGO = (typeof window !== "undefined" && window.__resources && window.__resources.morparaLogo) || "assets/morpara-logo.png"; const MP_BEFORE = (typeof window !== "undefined" && window.__resources && window.__resources.morparaBefore) || "assets/morpara-before.png"; const MP_PROBLEM_AFTER = (typeof window !== "undefined" && window.__resources && window.__resources.morparaProblemAfter) || "assets/morpara-problem-after.png"; const MP_FINAL_VIDEO = (typeof window !== "undefined" && window.__resources && window.__resources.morparaFinalVideo) || "assets/morpara-final-video.mp4"; const MP_DS_GALLERY = [ (typeof window !== "undefined" && window.__resources && window.__resources.morparaDs3) || "assets/morpara-ds-3.png", (typeof window !== "undefined" && window.__resources && window.__resources.morparaDs4) || "assets/morpara-ds-4.png", (typeof window !== "undefined" && window.__resources && window.__resources.morparaDs5) || "assets/morpara-ds-5.png", (typeof window !== "undefined" && window.__resources && window.__resources.morparaDs6) || "assets/morpara-ds-6.png", ]; /* ---------- local building blocks ---------- */ function MPPill({ children, dark = false }) { return ( {children} ); } function MPCol({ children, className = "" }) { return
{children}
; } /* wide tinted panel that breaks out of the text column */ function MPPanel({ children, caption, tint = "#F4F4F5", className = "", maxW = "1080px", pad = "p-0", dark = false }) { return (
{children}
{caption &&
{caption}
}
); } /* single device frame with a screenshot (or a labelled placeholder) */ function MPPhone({ src, label, frame = "#1A0E26", className = "" }) { return (
{src ? ( {label} ) : (
{label}
)}
); } /* bare video (already contains its own device mockup) + tap-to-play button. No extra frame — object-contain on the matching light panel so there is no black strip above/below the baked-in mockup. */ function MPVideoBare({ src, className = "" }) { const ref = React.useRef(null); const [playing, setPlaying] = React.useState(false); const toggle = () => { const v = ref.current; if (!v) return; if (v.paused) { v.play(); setPlaying(true); } else { v.pause(); setPlaying(false); } }; return (
); } /* device frame holding a video, with a tap-to-play button */ function MPVideoPhone({ src, frame = "#1A0E26", className = "" }) { const ref = React.useRef(null); const [playing, setPlaying] = React.useState(false); const toggle = () => { const v = ref.current; if (!v) return; if (v.paused) { v.play(); setPlaying(true); } else { v.pause(); setPlaying(false); } }; return (
); } /* full montage image, sits on a tinted panel */ function MPShot({ src, alt, tint = "#F6F1F9", className = "" }) { return (
{alt}
); } /* horizontal image gallery with prev/next arrows + dots */ function MPGallery({ images, alt = "Design system" }) { const [i, setI] = React.useState(0); const [stuck, setStuck] = React.useState(false); const barRef = React.useRef(null); React.useEffect(() => { const onScroll = () => { const el = barRef.current; if (!el) return; setStuck(el.getBoundingClientRect().top <= 0.5); }; onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); window.addEventListener("resize", onScroll); return () => { window.removeEventListener("scroll", onScroll); window.removeEventListener("resize", onScroll); }; }, []); const n = images.length; const go = (d) => setI((p) => (p + d + n) % n); return (
{/* top control bar — part of the window card at first; full-bleed once it sticks */}
{images.map((_, k) => ( ))}
{images.map((src, k) => ( {`${alt} ))}
); } /* light striped placeholder for missing visuals */ function MPPlaceholder({ label, height = 300 }) { return (
{label}
); } /* bottom floating section navigator (same dock pattern as Stablex) */ function MPSectionNav() { const items = [ ["mp-problem", "Problem"], ["mp-discovery", "Discovery"], ["mp-decisions", "Decisions"], ["mp-final", "Final design"], ["mp-impact", "Impact"], ]; const [active, setActive] = React.useState("mp-problem"); const [shown, setShown] = React.useState(false); const [navUp, setNavUp] = React.useState(false); const lastYRef = React.useRef(0); React.useEffect(() => { const pick = () => { const mid = window.scrollY + window.innerHeight * 0.5; let current = items[0][0]; for (const [id] of items) { const el = document.getElementById(id); if (el && el.getBoundingClientRect().top + window.scrollY <= mid) current = id; } setActive(current); const y = window.scrollY; setShown(y > 40); if (y < lastYRef.current - 2) setNavUp(true); else if (y > lastYRef.current + 2 || y <= 2) setNavUp(false); lastYRef.current = y; }; pick(); window.addEventListener("scroll", pick, { passive: true }); window.addEventListener("resize", pick); return () => { window.removeEventListener("scroll", pick); window.removeEventListener("resize", pick); }; }, []); const go = (e, id) => { e.preventDefault(); const el = document.getElementById(id); if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 80, behavior: "smooth" }); }; return ( ); } /* numbered decision block */ function MPDecision({ n, title, body, influence, panel, caption, tint, panelMaxW, dark = false }) { const titleColor = dark ? "#fff" : MP_DARK; return (

{n}. {title}

{body}

 {influence && (

My influence · {influence}

)} {panel}
); } /* ---------- the page ---------- */ /* Scroll-linked "SPOILER ALERT" card below the Summary — same behaviour as the Stablex page, themed to Morpara's #2B1243. Opens (pushing content down) as the summary scrolls to the top, closes again on scroll up. */ function MPSpoilerCard() { const [open, setOpen] = React.useState(false); React.useEffect(() => { const tick = () => { const sum = document.getElementById("mp-summary"); if (!sum) return; const vh = window.innerHeight; const sT = sum.getBoundingClientRect().top; setOpen((o) => (o ? sT < vh * 0.05 : sT < -vh * 0.05)); }; tick(); window.addEventListener("scroll", tick, { passive: true }); window.addEventListener("resize", tick); return () => { window.removeEventListener("scroll", tick); window.removeEventListener("resize", tick); }; }, []); const metrics = [ ["3.2% → 14.1%", "Account-upgrade rate"], ["1.1% → 3.8%", "Campaign redemption rate"], ]; return (
Spoiler alert
{metrics.map(([num, label], i) => (
{num}
{label}
))}
); } function MorparaCase({ navigate }) { return (
{/* 1 — HERO */}
Morpara
Morpara Digital Wallet · 2024

A flawless verification flow. But upgrades stayed flat. Why?

Morpara
{/* 2 — SUMMARY CARD */} {/* 2 — SUMMARY CARD */}
Summary

Morpara is a digital wallet app with multi-currency accounts, a card, and a campaigns hub, operating in the Netherlands, Turkey, and Russia. As the design lead at their agency, I owned the UX design end-to-end and led the Researcher and UI Designer on the team, directing the process and signing off on every final decision.

{/* 3 — THE PROBLEM */}
The problem

One metric healed. Another stayed sick.

We'd redesigned Morpara and shipped it six months earlier: especially the ID verification flow, which had an unusually high abandonment rate. That rate dropped from ~75% to 42%, a clear win.

But one number refused to move: the ratio of ID-verified users to total users stayed flat. We thought the barrier was gone. The upgrade rate said no.

Before: the old KYC flow. Abandonment was the problem here.
After: our redesign, shipped six months ago. Abandonment dropped. Upgrade rate didn't follow. (This is the redesign we shipped six months prior: the one that solved abandonment but not upgrade rate.)
{/* 4 — DISCOVERY */}
Discovery

Time to look at the upgrade rate from a different angle.

This section breaks into three parts: what we suspected, how we tested it, and what we found.

{/* What we suspected */}
What we suspected

My influence · I drew up this list of suspected causes myself heuristically, before the research started — and one of them turned out to be exactly right.

{[ { t: "The prompts nudging users to upgrade weren't strong enough.", tag: "Navigation Problem" }, { t: "Users might be misreading “Upgrade” as a paid action, not a free identity step.", tag: "Wording Problem" }, { t: "The campaign eligibility requirement (being ID-verified) might not be communicated clearly enough.", tag: "Visibility Problem" }, ].map((h, i) => (

{h.t}

{h.tag && ( {h.tag} )}
))}
{/* What we asked */}
What we asked

My influence · I defined the four research angles and moderated the sessions myself.

We ran a think-aloud usability study with 7 participants, structured around four angles: {" "}Awareness, {" "}Value perception, {" "}Motivation, {" "}Usability & copy test.

See the four research angles +
{[ { label: "Awareness", q: "Do you know if there's an account type beyond Beginner? Can you describe, in your own words, what's different between the two?", d: "Users could see the “Upgrade” button, but didn't tap it — they didn't know what was behind it." }, { label: "Value perception", q: "What advantages or campaigns do you think a verified user gets that an unverified one doesn't?", d: "Users hadn't realized campaigns were exclusive to ID-verified accounts, or hadn't noticed the campaigns section at all." }, { label: "Motivation", q: "Have you ever looked at the campaigns on the home screen or your profile? Did anything catch your interest? If so, did you understand what you'd need to do to claim it?", d: "The campaign visuals were appealing, but the call to action — “Verify now and earn” — wasn't clear." }, { label: "Usability & copy test", q: "Shown the current campaign/upgrade screen: what's the first thing you notice here? What does this screen promise you? What does the word “Upgrade” mean to you?", d: null }, ].map((a, i) => (
{a.label}

“{a.q}”

{a.d && (

Discovery: {a.d}

)}
))}
{/* What we found */}
What we found

The problem wasn't navigation, it was the absence of a reason. It's called the {" "}Friction Reduction Illusion: teams polish the technical steps of a funnel but miss the core motivation a user needs to start it. What gets someone moving isn't a better design. It's a clear answer to one question: {" "}what's in it for me?

{/* 5 — DECISIONS */}
Key decisions

Two decisions changed how people saw what was on the other side of verification.

} />
} /> {/* 6 — FINAL DESIGN (+ design system) */}
Final design
Morpara explore & cards {/* Design system — compact sub-section */}

Design system

One token-based source of truth, built on Figma Variables.

{["Colors", "Grid", "Text Styles", "Icons", "Shadows", "Components", "Organisms", "Animation Assets"].map((m) => ( {m} ))}

My influence · My role here was direction, not execution. I guided the UI designer and approved every screen.

View in App Store → View in Play Store →
{/* 7 — IMPACT (dummy numbers) */}
Impact
{[ ["3.2% → 14.1%", "Account-upgrade rate", "in first 4 months"], ["1.1% → 3.8%", "Campaign redemption rate", "in first 3 months"], ].map(([num, label, micro]) => (
{num}
{label}
{micro}
 ))}
{/* 8 — BEHIND THE WORK */}
Behind the work
Role
Design Lead (process & final calls) & UX Designer
Team
Researcher · UI Designer · Project Manager · Design Lead (me)
Date
2024
What I learned

As product designers, we sometimes get so focused on crafting the perfect flow or the perfect screen that it stops being entirely healthy. We have to care about the user — but not at the cost of losing sight of the product owner's perspective. The two have to be held together, and this project was a clear reminder of that.

{/* 9 — FOOTER */}
); } window.MorparaCase = MorparaCase;