Case Study — Banking & Institutional
Corporate website redesign
Complete UI/UX transformation of a Pan-African development bank’s digital presence — 300+ pages reimagined into a modern, accessible institutional platform serving stakeholders across 50+ African countries.
300+
Pages designed
20+
Page templates
50+
10
Dedicated team
Client
Pan-africain bank
Egypt – Pan-Africain
Industry
Banking & Development finance
Egypt – Pan-Africain
Platform
Corporate website
Multi-section Portal
Tech Stack
Pan-africain bank
- Le projet
A complete digital transformation for one of Africa’s most important financial institutions
The Pan-African Bank is a supranational financial institution serving as the foremost trade finance bank for the African continent, with operations spanning over 50 countries, multiple regional offices, and billions in managed assets. Their existing corporate website no longer reflected the institution’s scale, credibility, or the breadth of its product offerings. STEPS was engaged to perform a full UI/UX audit and redesign of the entire digital presence — over 300 pages covering institutional information
redesign of the entire digital presence — over 300 pages covering institutional information, product catalogs, event management, impact stories, investor relations, news, knowledge resources, and stakeholder communications. The redesign prioritized information architecture clarity, visual hierarchy, accessibility compliance, and a modern design language befitting a world-class financial institution with AAA credit ratings.
- Architecture
Six Major
Sections
Our Bank
Institutional identity, governance, and investor relations.
- About Us with key financial figures
- Vision, Mission & Strategy
- Credit ratings (AAA to Baa1)
- Investor relations portal
Products & services
Complete financial product catalog with
visual navigation.
- Visual category grid
- Detailed product pages
- Global Trade Bank financing
- Treasury & advisory
Event platform with registration, speakers,
and countdowns.
- Upcoming/past event filters
- Speaker profiles & registration
- Countdown timers
- Year-based navigation
Impact stories
Video-first storytelling showcasing
Africa’s transformation.
- Campaign hero banners
- Video story cards
- Editorial 2-column grid
- Season-based content
reports.
- Research library
- Downloadable reports
- Category navigation
- Search & filtering
Contact & careers
Global office locator and career
opportunities.
- Contact forms with routing
- Branch locator
- Job vacancies portal
- Multi-language support
CHALLENGE
Outdated Platform, Complex Content
The existing website suffered from inconsistent layouts, poor information hierarchy across 300+ pages, outdated visual design that didn’t reflect the institution’s AAA-rated credibility, and navigation that made it difficult for stakeholders across 50+ countries to find relevant products and resources.
SOLUTION
Modern, Scalable, User-Centered
We designed a comprehensive design system with 20+ reusable templates, implemented clean information architecture with intuitive mega-navigation, created distinctive layouts for each content type, and ensured the platform communicates institutional authority while remaining approachable.
- Key Deliverables
What We BUIlD?
Design system
Component library with typography, colors, grids, buttons, and interaction patterns.
Mega navigation
Product catalog
Event platform
Listings, detail pages with speakers, registration CTAs, and countdown timers.
Impact stories
Financial data display
Key figures section, credit ratings component, investor relations portal.
+20 content tempaltes
Reusable templates for news, publications, team pages, and governance
Performance optimisation
Image optimization, lazy loading, caching, and Core Web Vitals improvements.
- Methodology
From audit
to launch
UX Audit
Complete audit of the existing 300+ page website: navigation analysis, content inventory, user journey mapping, and pain point identification.
UI/UX Redesign
New information architecture, wireframes, and high-fidelity mockups for 20+ page templates. Design system creation with institutional brand alignment.
WordPress + Elementor implementation with custom plugins, responsive layouts, performance optimization, and content migration for all 300+ pages.
QA & Launch
Cross-browser testing, accessibility audit, performance benchmarking, SEO migration, and phased production deployment with zero downtime.
- CASE STUDIESOUR WORK SPEAKS FOR ITSELF
Explore our portfolio of bold and impactful projects, designed to inspire and deliver excellence.
Retail
CHADWELL
Banking & Finance
QSP - Quantech Solution Partners
International trade
QSP - Quantech Solution Partners
READY TO GET CLARITY ON YOUR PROJECT.
Don’t wait for the future !
Build it with us now