/* Alternatifbank case study — banking website redesign. Built from the same editorial template as the Stablex V2 case (narrow text column, pill section markers, numbered decision tracks, summary card up top, "Behind the work" credits close) with its own signature color (#420019) and local helper components (AB-prefixed) so nothing here collides with case-stablex-v2.jsx's globals. No real screenshots exist yet — every [SCREEN: ...] slot from the content brief is a labeled placeholder panel, ready to swap for real imagery. */ const AB_DARK = "#420019"; // signature surface — hero, impact, footer, nav dock const AB_HEAD = "#2A000C"; // heading color on light backgrounds const AB_ACCENT = "#E8004F"; // bright accent — colored H1 clause, footer "together" const AB_TINT = "rgba(66,0,25,.06)"; // light tint bg for cards (rgb of AB_DARK) const AB_ACTIVE = "#6B0F2E"; // active nav-dock pill const AB_LOGO_SRC = (typeof window !== "undefined" && window.__resources && window.__resources.alternatifbankLogo) || "assets/alternatifbank-logo.png"; const AB_FIGMA_URL = "https://www.figma.com/design/1R38GdyM58DMWXjjW280RO/Alternatif-Bank---Tuna?node-id=117-2817&t=nwyni9H4x3eLuoBI-1"; const AB_PROTO_URL = "https://www.figma.com/proto/1R38GdyM58DMWXjjW280RO/Alternatif-Bank---Tuna?node-id=40002244-4041&p=f&viewport=332%2C234%2C0.03&t=oZHPgc6CbUKZCEXH-1&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=40002244%3A4041&show-proto-sidebar=1&page-id=40002244%3A1817"; /* Real page screenshots — swapped in for the matching ABPlaceholder slots */ const AB_SHOT_OLD_HOME = "assets/ab-homepage-vov-hero.png"; // Problem — old homepage const AB_SHOT_VOV_BANNER = "assets/ab-vov-advantage-banner.png"; // Decision 3 — highlighted savings advantage const AB_SHOT_CALCULATOR = "assets/ab-rate-calculator.png"; // Decision 2 — rate/loan calculator with inline apply const AB_SHOT_LOAN_BENEFITS = "assets/ab-loan-benefits-module.png"; // Decision 1 — product highlights with benefits const AB_SHOT_FINAL_HOME = "assets/ab-final-homepage.png"; // Approach (new homepage) + Final design showcase, desktop const AB_SHOT_FINAL_HOME_MOBILE = "assets/ab-final-homepage-mobile.png"; // Final design showcase, mobile const AB_HERO_VIDEO_DESKTOP = "assets/ab-hero-desktop.mp4"; // Summary — hero shot, desktop walkthrough const AB_HERO_VIDEO_MOBILE = "assets/ab-hero-mobile.mp4"; // Summary — hero shot, mobile walkthrough const AB_SHOT_COMPONENTS_DESKTOP = "assets/ab-components-desktop.png"; // Final design — components, desktop const AB_SHOT_COMPONENTS_MOBILE = "assets/ab-components-mobile.png"; // Final design — components, mobile /* ---------- local building blocks (AB-prefixed to stay collision-free) ---------- */ function ABPill({ children }) { return ( {children} ); } function ABSectionNav() { const items = [ ["ab-problem", "Problem"], ["ab-approach", "Approach"], ["ab-solution", "Solution"], ["ab-final", "Final design"], ["ab-impact", "Impact"], ]; const [active, setActive] = React.useState("ab-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 ABCol({ children, className = "" }) { return
{children}
; } /* light striped placeholder for big panels — stands in for real screenshots */ function ABPlaceholder({ label, height = 360 }) { return (
{label}
); } /* wide tinted panel that breaks out of the text column */ function ABPanel({ 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 ABDecision({ n, title, body, note, panel, caption, tint, panelMaxW }) { return (

{n}. {title}

{body}

 {note && (

{note}

)} {panel}
); } /* simple click-to-enlarge lightbox — used for the component-library comparison shots */ function ABLightbox({ images, index, onClose, onNav }) { React.useEffect(() => { if (index == null) return; const onKey = (e) => { if (e.key === "Escape") onClose(); if (e.key === "ArrowRight") onNav(1); if (e.key === "ArrowLeft") onNav(-1); }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [index, onClose, onNav]); if (index == null) return null; const item = images[index]; return (
{images.length > 1 && ( )} {item.alt} e.stopPropagation()} className="max-w-full max-h-[85vh] object-contain rounded-lg select-none" draggable="false" /> {images.length > 1 && ( )}
{item.label}
); } /* ---------- the page ---------- */ function AlternatifbankCase({ navigate }) { const [lightboxIndex, setLightboxIndex] = React.useState(null); const componentShots = [ { src: AB_SHOT_COMPONENTS_DESKTOP, alt: "Component library — desktop", label: "Desktop" }, { src: AB_SHOT_COMPONENTS_MOBILE, alt: "Component library — mobile", label: "Mobile" }, ]; const navLightbox = (dir) => setLightboxIndex((i) => (i + dir + componentShots.length) % componentShots.length); return (
{/* HERO */}
Alternatifbank — Banking Website
Alternatifbank logo

The site was coasting on one great rate. We turned it into an acquisition engine.

Alternatifbank logo
{/* SUMMARY */}
Summary

Alternatifbank, the Turkey branch of The Commercial Bank of Qatar, came to us to rebuild their public website, the digital front door for a corporate and retail bank. I owned the UX design end to end and directed the UI Designer working under me, steering the process and signing off every final decision.

{/* PROBLEM */}
The problem

Three numbers were in the red. One great rate was hiding it.

The business problem was sharp: customer acquisition and loan applications were both underperforming. Savings looked healthy, but only because the bank offered one of the most competitive rates in the market, and almost all of those applications arrived from Google, not from the site itself.

Old homepage

Old Alternatifbank homepage, products treated equally and buried
{/* APPROACH */}
The approach

If one product pulls people in, put it at the front door.

Instead of presenting every product with equal weight, I built the experience around the bank's strongest card. The savings account had been among the top three highest rates in Turkey for two years, so I proposed making it the acquisition hook and got the brand on board, using the irresistible product to bring people in, then designing clear paths to convert them into loan and savings customers. The second principle was just as simple: let people act the moment they see their number, instead of making them hunt for an application.

New Alternatifbank homepage
{/* SOLUTION */}
The solution

Three moves turned the site into an acquisition engine.

} /> } /> } />
{/* FINAL DESIGN (incl. design system as sub-section — same shape as the Stablex case) */}
Final design
Alternatifbank final homepage design — desktop
Alternatifbank final homepage design — mobile
{/* Design system — compact sub-section of Final design */}

Design system

I designed the UI components and controls that power the whole site: navigation, cards, tables, forms, product modules and their states, each responsive across breakpoints and aligned to the brand. Every team now builds from the same parts, so the bank stays consistent without me in the room.

{["Navigation", "Cards", "Tables", "Forms", "Product Modules", "States", "Responsive"].map((m) => ( {m} ))}
{/* Visual proof — the dominant element: one component, two breakpoints, one shared card */}
{/* My influence + quiet link out */}

My influence · My role here was execution of wireframes and direction of UI design. I signed off on every screen and interaction that shipped.

{/* 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.

{[ ["+30%", "New customer acquisition", "Growth in net-new customers acquired through the web, over the first 6 months."], ["+25%", "Loan applications", "Growth in loan applications started and completed on the site, over 6 months."], ].map(([num, label, micro]) => (
{num}
{label}
{micro &&
{micro}
}
))}
{/* BEHIND THE WORK */}
Behind the work
Role
UX templates, UI component & design control, brand presentations, delivery owner (sign-off on everything shipped)
Team
Me (design lead) + 1 Sr. UI Designer
Timeline
12 weeks, design
{/* FOOTER */}
setLightboxIndex(null)} onNav={navLightbox} />
); } window.AlternatifbankCase = AlternatifbankCase;