April 10, 2026

Overview

Banco del Austro (BdA) is one of Ecuador's established private banks. Its public site — bancodelaustro.com — is the first point of contact for a huge share of its prospective and existing customers, yet it had accumulated the usual symptoms of a long-lived institutional website: dense navigation, competing calls to action, inconsistent typography between marketing campaigns and product pages, and a homepage that tried to serve every audience at once and ended up serving none of them well. As the bank's in-house UX Researcher, I lead the research and design direction for this cross-functional redesign — working directly with BdA's internal development team on implementation feasibility and with the marketing team on positioning, promotional slots, and brand tone.

UX investigation

Before a single pixel was moved, the work was research.

• Stakeholder interviews with product owners for credit cards, mortgages, business banking, and online channels to understand which homepage real estate each group was fighting for, and why.
• Analytics deep-dive on the existing homepage: scroll depth, click heatmaps, drop-off points between the homepage and the online-banking login, and the long tail of search terms people type into the site's own search.
• Competitive teardown of peer banks in Ecuador and the wider LATAM region (Produbanco, Banco Pichincha, Banco Guayaquil, plus reference points from BBVA and Itaú) — not to copy, but to map the category's visual conventions so BdA's redesign could deliberately choose where to conform (trust signals, security cues) and where to differentiate (content density, motion, tone).
• User interviews with a small panel of existing customers and non-customers to surface the real first-visit questions: "Can I trust this?", "Where do I log in?", "What does this bank actually offer me specifically?"
• Content audit of every link, banner, and promotional slot currently on the homepage, tagged by owner, last update date, and measurable click-through — which gave marketing an evidence-based shortlist of what to keep, retire, or consolidate.

The output of this phase is a written research brief and a prioritized problem list that marketing, engineering, and I sign off on before design starts.

UI direction

• A clear above-the-fold hierarchy: one primary promise, one primary action (online banking login), one secondary editorial slot owned by marketing. No more carousels competing with themselves.
• A restrained, trust-forward palette anchored in BdA's existing brand colors, with careful use of whitespace and a single accent for action — because in banking, visual restraint is a trust signal.
• A type system built on a modern neutral sans paired with a slightly warmer display face for headlines, to soften the institutional tone without losing authority.
• Component library in Figma — buttons, cards, promo blocks, rate tables, disclaimer blocks — mapped 1:1 to the components the internal dev team will actually build, so that design and code never drift.
• Motion and micro-interactions used sparingly: subtle hover states, a calm scroll-reveal for sections, no parallax gimmicks.
• Accessibility as a first-class constraint: WCAG AA contrast verified on every color pairing, focus states designed (not just inherited), and all promotional imagery carrying meaningful alt text drafted together with marketing.

Working with development and marketing

• With development: weekly working sessions to review component feasibility, agree on a Next.js / component-library target, and make sure the design handoff is in a format (tokens + Figma variants) that maps cleanly to code rather than forcing the team to re-interpret layouts.
• With marketing: co-owning the promotional slots. Marketing retains full control of the editorial calendar, but the design system constrains how campaigns render — so a new Black Friday banner can't accidentally break the homepage's visual rhythm.
• Governance: establishing a lightweight "homepage change" process so that future banner swaps, product launches, and regulatory disclosures all have a home in the system without needing a redesign each time.

Gallery

Key features

• Focused hero that states the bank's value proposition in one sentence and gives returning customers an unambiguous login path.
• Product-cluster cards grouping personal, business, and wealth offerings with progressive disclosure instead of a flat mega-menu.
• Tool-first utilities: calculators, branch/ATM finder, and exchange rates surfaced where research showed users were hunting for them.
• Evergreen + campaign slots cleanly separated, so marketing moves fast without destabilizing evergreen journeys.
• Mobile-first layout: given the majority of first-touch traffic is mobile, every component is designed on small screens first and expanded up.

Technologies and tooling

• Research: stakeholder interviews, GA4 / heatmap analysis, remote moderated user sessions, competitive audits.
• Design: Figma (variables, auto-layout, component variants), FigJam for research synthesis.
• Handoff: design tokens exported to the dev team's component library, paired with written interaction specs.
• Implementation (in partnership with BdA's engineers): modern component-based frontend stack aligned to the bank's existing platform constraints, with a focus on Core Web Vitals and accessibility from day one.

Measurable outcomes (so far)

• 18 stakeholder interviews across product, marketing, compliance and customer service, captured in a shared research repository.
• Analytics deep-dive on 12 months of GA4 data surfacing the real drop-off points and the long tail of on-site searches driving the new information architecture.
• Moderated usability sessions with 9 participants (a mix of existing customers and non-customers) testing the new homepage prototype, each producing a transcript and a prioritized friction log.
• Content audit cataloguing every link, banner and promotional slot on the current homepage with owner, last-update date and click-through — giving marketing an evidence-based shortlist of what to keep vs. retire.
• Figma component library of 30+ components mapped 1:1 to the implementation stack, eliminating design-to-code reinterpretation overhead.
• Targets agreed with the business for post-launch: a 25% lift in primary-CTA click-through on the homepage, a 15% reduction in time-to-login-button on mobile, and a measurable drop in support tickets about "where do I find X on the website."

Outcome

A homepage that reads as a modern, trustworthy digital storefront rather than a billboard wall. More importantly, a shared system — research artifacts, a component library, and a change-management process — that the bank's own teams own and evolve from the inside, so the site keeps improving without regressing into the density and inconsistency that triggered the redesign in the first place.