/* Juzdan case study — Akbank digital wallet. Same editorial template as the Alternatifbank / Stablex V2 cases (narrow text column, pill section markers, numbered decision tracks, summary card up top, "Behind the work" credits close). Signature color matches Morpara on purpose (same palette, per request) — JZ-prefixed locals keep it collision-free from case-morpara.jsx's own MP-prefixed globals. No real screenshots exist yet — every [SCREEN: ...] slot from the content brief is a labeled placeholder panel. Several sections in the source brief were marked as draft placeholders (3 decisions, first-payment challenge framing, a research aside) — those are used here as the current best copy, ready to swap once real decisions/research land. */ const JZ_DARK = "#2B1243"; // signature surface — hero, impact, footer, nav dock (same as Morpara) const JZ_HEAD = "#1D0C2E"; // heading color on light backgrounds const JZ_ACCENT = "#C9A6F2"; // bright accent — colored H1 clause, footer "together" (Morpara's highlight) const JZ_TINT = "rgba(43,18,67,.05)"; // light tint bg for cards (Morpara's tint) const JZ_ACTIVE = "#4A2A6B"; // active nav-dock pill (Morpara's) const JZ_LOGO_SRC = (typeof window !== "undefined" && window.__resources && window.__resources.juzdanLogo) || "assets/juzdan-logo.png"; const JZ_FIGMA_URL = "https://www.figma.com/design/v1xBpG2l6sj4ffKrVPH5ha/Juzdan-Website---Tuna?node-id=886-80374&t=Ra7HyhhjzB2cjs1f-1"; const JZ_PROTO_URL = "https://www.figma.com/proto/v1xBpG2l6sj4ffKrVPH5ha/Juzdan-Website---Tuna?node-id=414-11550&p=f&viewport=267%2C314%2C0.14&t=WSnMPCHZLdD7Xdfm-1&scaling=scale-down&content-scaling=fixed&starting-point-node-id=414%3A11550&page-id=414%3A11549"; const JZ_PROTO_MOBILE_URL = "https://www.figma.com/proto/v1xBpG2l6sj4ffKrVPH5ha/Juzdan-Website---Tuna?node-id=514-16605&p=f&viewport=609%2C-375%2C0.79&t=b0qDto1GZj3KgK9X-1&scaling=scale-down&content-scaling=fixed&starting-point-node-id=514%3A16605&page-id=414%3A11548"; const JZ_SHOT_OLD_HOME = "assets/juzdan-old-homepage.png"; const JZ_SHOT_NEW_HOME = "assets/juzdan-new-homepage.png"; const JZ_SHOT_CAMPAIGNS = "assets/juzdan-campaigns.png"; const JZ_SHOT_JOIN_CTA = "assets/juzdan-join-cta.png"; const JZ_SHOT_COMPONENTS = "assets/juzdan-component-library.png"; const JZ_HERO_VIDEO_DESKTOP = "assets/juzdan-hero-desktop.mp4"; const JZ_HERO_VIDEO_MOBILE = "assets/juzdan-hero-mobile.mp4"; /* ---------- local building blocks (JZ-prefixed to stay collision-free) ---------- */ function JZPill({ children }) { return ( {children} ); } function JZSectionNav() { const items = [ ["jz-problem", "Problem"], ["jz-approach", "Approach"], ["jz-solution", "Solution"], ["jz-system", "Final design"], ["jz-impact", "Impact"], ]; const [active, setActive] = React.useState("jz-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 ( ); } /* narrow editorial text column */ function JZCol({ children, className = "" }) { return
{children}
; } /* light striped placeholder for big panels — stands in for real screenshots */ function JZPlaceholder({ label, height = 360 }) { return (
{label}
); } /* wide tinted panel that breaks out of the text column */ function JZPanel({ children, caption, tint = "#F4F4F5", className = "", maxW = "1080px", border }) { return (
{children}
{caption &&
{caption}
}
); } /* numbered decision block — highlight line is optional (not every decision has one) */ function JZDecision({ n, title, body, note, panel, caption, tint, panelMaxW }) { return (

{n}. {title}

{body}

 {note && (

{note}

)} {panel}
); } /* ---------- the page ---------- */ function JuzdanCase({ navigate }) { return (
{/* HERO */}
Juzdan — Digital Wallet (Akbank)
Juzdan logo

A wallet people actually reach for. Pay, send, done.

Juzdan logo
{/* SUMMARY */}
Summary

Juzdan is a digital wallet backed by the biggest bank of Turkey (Akbank), built to pay, transfer, store cards, scan QR, and confirm, all in one place. I owned the design end to end: I drew the layout, designed the UI components and microanimations myself, presented every stage to the brand.

{/* PROBLEM */}
The problem

The product and its best reasons to join were buried.

Juzdan had a strong app and a constant stream of campaigns, but the website led with neither. Visitors could not quickly see the product in action or the rewards on offer, so the page gave them little reason to download or join. The result was weak customer acquisition from a site that should have been the product's strongest funnel into the wallet.

Old homepage

Old Juzdan homepage, product and campaigns not surfaced
{/* APPROACH */}
The approach

Lead with the app, boost the campaigns, and let acquisition follow.

Instead of treating the homepage as a place to explain the wallet, I made it sell the two things that actually move people: the product itself and the rewards for using it. I put the app front and center, amplified the campaigns around it, and designed so joining became the natural next step rather than a separate ask. Get those first two right, and customer acquisition follows.

{/* SOLUTION */}
The solution

Three decisions turned attention into members.

} /> } /> } />
{/* DESIGN SYSTEM */}
Final design

The system behind every screen.

I designed the UI components and controls that power the whole app: navigation, payment and transfer modules, inputs, states and feedback, consistent across the product and aligned to the brand. Every screen was built from the same parts, so the app stays coherent and is ready to hand over and extend.

{["Navigation", "Payment Module", "Transfer Module", "Inputs", "States", "Feedback"].map((m) => ( {m} ))}
Component and control library for the app
{/* IMPACT */}
Impact

Proposed targets based on the strategy above. The site hasn't launched yet, so these aren't measured numbers. They'll be replaced with real results once it's live.

{[ ["+40%", "App downloads", "Targeted lift in the share of visitors who go on to download the app. Leading with the product, front and center, is built to drive installs."], ["+50%", "Campaign engagement", "Targeted lift in the share of visitors who open at least one campaign. Surfacing the rewards in the hero turns a hidden draw into a visible one."], ["+30%", "New member acquisition", "Targeted lift in the share of visitors who become members (Juzdanlı Ol). With the app and the offers doing the convincing, joining follows."], ].map(([num, label, micro]) => (
{num}
{label}
{micro &&
{micro}
}
))}
{/* BEHIND THE WORK */}
Behind the work
Role
UX templates, Microanimation & Interaction design, UI component & design, brand presentations
Timeline
10 weeks (FE&BE not included)
{/* FOOTER */}
); } window.JuzdanCase = JuzdanCase;