BNI Syariah — Landing Page Design
Landing Page · Web Design
-ChCnGWHu.png)
Designed a landing page for BNI Syariah, one of Indonesia's leading Islamic banks. The goal was to create a clean, trustworthy, and informative web presence that communicates the bank's products and values clearly to prospective customers.
Purpose
- →Create a clean, trustworthy web presence for an Islamic bank
- →Communicate products and services clearly to prospective customers
- →Drive conversions through clear CTAs and intuitive navigation
My Role
- →Landing page UI design
- →Visual hierarchy and layout design
- →Component design and style guide
- →Design Handoff to frontend team
Challenges
- ⚡Balancing regulatory information with clean visual design
- ⚡Building trust and credibility through visual language for a financial institution
- ⚡Designing for a broad audience — from tech-savvy users to first-time digital bank visitors
Design Process
Research & Requirements
Early 2020Analyzed competitor landing pages of Indonesian banking institutions and gathered content requirements from stakeholders.
- ·Competitor analysis (BCA, Mandiri Syariah, BSI)
- ·Content requirement gathering
- ·Target audience definition
UI Design & Handoff
2020Designed the full landing page including hero section, product cards, promo banners, FAQ, and responsive mobile layouts. Delivered via Figma with full specs.
- ·Hero section with clear value proposition
- ·Product & promo card design
- ·FAQ section design
- ·Mobile-responsive layouts
- ·Figma handoff with annotations
User Flow — First Visit to Account Opening
Designed the landing page to guide first-time visitors from awareness to account opening intent.
Example: First-time visitor journey
✅ Positive Flow (Success Path)
- 1Land on hero section → clear value proposition
- 2Scroll to product overview → explore offerings
- 3Read promo section → triggered by offer
- 4Click CTA → directed to account opening
❌ Negative Flow (Error Cases)
- ✕User confused by product → FAQ section provides clarity
- ✕User not ready to open account → social proof + promo nudges
- ✕Mobile user → responsive layout ensures no info is lost
Key Learnings
Trust is the #1 design constraint for financial products
Color, typography, and layout choices all needed to reinforce credibility — not just aesthetics.
Information hierarchy drives conversion
Clear visual hierarchy from hero to CTA reduced cognitive load and guided users toward intended actions.
Results & Impact
📱
100%
Responsive
Mobile-First Design
All layouts designed with mobile-first approach ensuring consistent experience across devices.
✅
On-time
Delivery
On-Time Delivery
Full design delivered within scope and timeline with clean handoff documentation.
Design Gallery
Web Dashboard
7 screens
Mobile App
9 screens
See more work on
Dribbble ↗