# Wireframes & Prototypes - How to Malaysia Website

## Wireframe Overview

### Design Approach
- **Mobile-first methodology:** Start with mobile constraints, enhance for desktop
- **Progressive disclosure:** Show essential information first, details on demand
- **Cultural considerations:** Malaysian user expectations and cultural norms
- **Accessibility standards:** WCAG 2.1 AA compliance from wireframe stage

---

## 1. Homepage Wireframe

### Mobile Layout (320px - 768px)
```
┌─────────────────────────────────┐
│ [Logo] [🔍 Search] [☰ Menu]     │
├─────────────────────────────────┤
│                                 │
│    🇲🇾 HERO SECTION 🇲🇾          │
│   "Your Complete Guide to       │
│      Life in Malaysia"          │
│                                 │
│   [Get Started] [Emergency]     │
│                                 │
├─────────────────────────────────┤
│ QUICK ACCESS                    │
│ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ │
│ │Visa │ │Bank │ │SIM  │ │Help │ │
│ │Info │ │Acct │ │Card │ │Line │ │
│ └─────┘ └─────┘ └─────┘ └─────┘ │
├─────────────────────────────────┤
│ POPULAR GUIDES                  │
│ ┌─────────────────────────────┐ │
│ │ 📱 How to Get SIM Card      │ │
│ │ ⭐⭐⭐⭐⭐ • 5 min read       │ │
│ └─────────────────────────────┘ │
│ ┌─────────────────────────────┐ │
│ │ 🏦 Opening Bank Account     │ │
│ │ ⭐⭐⭐⭐☆ • 12 min read      │ │
│ └─────────────────────────────┘ │
│ ┌─────────────────────────────┐ │
│ │ 🚇 Using Public Transport   │ │
│ │ ⭐⭐⭐⭐⭐ • 8 min read        │ │
│ └─────────────────────────────┘ │
├─────────────────────────────────┤
│ CATEGORIES                      │
│ ┌──────────┐ ┌──────────┐      │
│ │🧳Tourism │ │🏠Living  │      │
│ │& Travel  │ │in Malaysia│      │
│ └──────────┘ └──────────┘      │
│ ┌──────────┐ ┌──────────┐      │
│ │🏛️Govt     │ │💼Work &  │      │
│ │Services  │ │Business  │      │
│ └──────────┘ └──────────┘      │
├─────────────────────────────────┤
│ NEWSLETTER SIGNUP               │
│ "Get weekly Malaysia tips"      │
│ [email@example.com] [Subscribe] │
├─────────────────────────────────┤
│ FOOTER LINKS                    │
│ About | Contact | Privacy       │
└─────────────────────────────────┘
```

### Desktop Layout (1024px+)
```
┌─────────────────────────────────────────────────────────────────────────────┐
│ [Logo How to Malaysia] [Getting Started|Tourism|Living|Govt|Work] [🔍Search]│
├─────────────────────────────────────────────────────────────────────────────┤
│                            HERO SECTION                                     │
│   ┌─────────────────────────────────────────────────────────────┐           │
│   │                    🇲🇾 Welcome to Malaysia! 🇲🇾                │           │
│   │           Your complete guide to living, working,           │           │
│   │              and exploring Malaysia with confidence          │           │
│   │                                                             │           │
│   │        [Get Started Guide]  [Find Specific Help]           │           │
│   │                    [Emergency Resources]                   │           │
│   └─────────────────────────────────────────────────────────────┘           │
├─────────────────────────────────────────────────────────────────────────────┤
│ QUICK ACCESS BAR                                                            │
│ [🛂 Visa Status] [🏦 Banking] [📱 SIM Cards] [🚇 Transport] [🚨 Emergency]  │
├─────────────────────────────────────────────────────────────────────────────┤
│ POPULAR GUIDES                    │  CATEGORIES                              │
│ ┌─────────────────────────────┐   │  ┌─────────┐ ┌─────────┐ ┌─────────┐   │
│ │ How to Get Malaysian SIM    │   │  │🧳Tourism│ │🏠Living │ │🏛️Govt    │   │
│ │ ⭐⭐⭐⭐⭐ • 1.2k views • Easy │   │  │& Travel │ │Malaysia │ │Services │   │
│ │ Updated: Oct 10, 2025       │   │  │45 guides│ │67 guides│ │23 guides│   │
│ └─────────────────────────────┘   │  └─────────┘ └─────────┘ └─────────┘   │
│ ┌─────────────────────────────┐   │  ┌─────────┐ ┌─────────┐ ┌─────────┐   │
│ │ Opening Bank Account        │   │  │💼Work & │ │🏥Health │ │🎓Education│   │
│ │ ⭐⭐⭐⭐☆ • 2.1k views • Med  │   │  │Business │ │Wellness │ │Learning │   │
│ │ Updated: Oct 8, 2025        │   │  │34 guides│ │19 guides│ │28 guides│   │
│ └─────────────────────────────┘   │  └─────────┘ └─────────┘ └─────────┘   │
│ ┌─────────────────────────────┐   │  ┌─────────┐ ┌─────────┐              │
│ │ Malaysian Food Guide        │   │  │🎭Culture│ │📞Support│              │
│ │ ⭐⭐⭐⭐⭐ • 3.4k views • Easy │   │  │Society  │ │Help     │              │
│ │ Updated: Oct 12, 2025       │   │  │41 guides│ │24/7     │              │
│ └─────────────────────────────┘   │  └─────────┘ └─────────┘              │
├─────────────────────────────────────────────────────────────────────────────┤
│ RECENT UPDATES              │  NEWSLETTER & COMMUNITY                       │
│ • Visa requirements updated │  📧 Get Weekly Malaysia Tips                  │
│ • New MRT line guide        │  [your-email@example.com] [Subscribe]        │
│ • Festival calendar 2026    │  👥 Join 12,000+ readers                     │
│                             │  🔗 Follow: [Facebook] [Instagram] [Twitter] │
└─────────────────────────────────────────────────────────────────────────────┘
```

---

## 2. Category Page Wireframe

### Mobile Layout - Category: "Living in Malaysia"
```
┌─────────────────────────────────┐
│ [←] [🔍] Living in Malaysia [☰] │
├─────────────────────────────────┤
│ 🏠 Living in Malaysia           │
│ Essential guides for daily life │
│ 67 articles • Updated daily     │
├─────────────────────────────────┤
│ FILTER & SORT                   │
│ [All Topics ▼] [Latest First ▼] │
├─────────────────────────────────┤
│ SUBCATEGORIES                   │
│ ┌─────────────────────────────┐ │
│ │ 🏠 Housing & Accommodation  │ │
│ │ 15 guides                   │ │
│ └─────────────────────────────┘ │
│ ┌─────────────────────────────┐ │
│ │ 🏦 Banking & Finance        │ │
│ │ 12 guides                   │ │
│ └─────────────────────────────┘ │
│ ┌─────────────────────────────┐ │
│ │ 🛒 Shopping & Daily Life    │ │
│ │ 18 guides                   │ │
│ └─────────────────────────────┘ │
├─────────────────────────────────┤
│ FEATURED GUIDES                 │
│ ┌─────────────────────────────┐ │
│ │ 🔥 How to Find Apartment    │ │
│ │ Complete rental guide       │ │
│ │ ⭐⭐⭐⭐⭐ • 15 min • Medium   │ │
│ │ 👁️ 2.1k views              │ │
│ └─────────────────────────────┘ │
├─────────────────────────────────┤
│ ALL ARTICLES                    │
│ ┌─────────────────────────────┐ │
│ │ Opening Malaysian Bank Acc. │ │
│ │ ⭐⭐⭐⭐☆ • 8 min • Easy      │ │
│ │ Oct 8, 2025                 │ │
│ └─────────────────────────────┘ │
│ ┌─────────────────────────────┐ │
│ │ Getting Internet Service    │ │
│ │ ⭐⭐⭐⭐⭐ • 6 min • Easy      │ │
│ │ Oct 5, 2025                 │ │
│ └─────────────────────────────┘ │
│                                 │
│ [Load More Articles...]         │
├─────────────────────────────────┤
│ RELATED CATEGORIES              │
│ Government Services • Work      │
└─────────────────────────────────┘
```

---

## 3. Article Page Wireframe

### Mobile Layout - Article: "How to Open Bank Account"
```
┌─────────────────────────────────┐
│ [←] [🔍] [Share] [☰]            │
├─────────────────────────────────┤
│ Home > Living > Banking         │
├─────────────────────────────────┤
│ How to Open a Malaysian         │
│ Bank Account: Complete Guide    │
│                                 │
│ By Sarah Lee • Oct 8, 2025      │
│ ⏱️ 8 min read • 💰 Easy         │
│ ⭐⭐⭐⭐☆ (127 ratings)           │
├─────────────────────────────────┤
│ [🔖 Bookmark] [👍 Helpful]      │
│ [Share: FB | TW | WA]           │
├─────────────────────────────────┤
│ QUICK OVERVIEW                  │
│ ✅ What you'll need             │
│ ✅ Time required: 1-2 hours     │
│ ✅ Cost: Free-RM50              │
│ ✅ Best for: All residents      │
├─────────────────────────────────┤
│ 📋 TABLE OF CONTENTS            │
│ 1. Required Documents           │
│ 2. Choosing the Right Bank      │
│ 3. Step-by-Step Process         │
│ 4. Common Issues & Solutions    │
│ 5. After Opening Account        │
├─────────────────────────────────┤
│ ⚠️ IMPORTANT NOTE               │
│ Requirements may vary by bank.  │
│ Always check with specific      │
│ branch before visiting.         │
├─────────────────────────────────┤
│ ARTICLE CONTENT                 │
│                                 │
│ ## Required Documents           │
│                                 │
│ For Malaysians:                 │
│ • IC (Identity Card)            │
│ • Proof of income              │
│ • Initial deposit              │
│                                 │
│ For Foreigners:                 │
│ • Passport with valid visa      │
│ • Employment letter            │ 
│ • Proof of address             │
│ • Minimum deposit (RM500+)      │
│                                 │
│ 💡 TIP: Call ahead to confirm   │
│ specific requirements           │
│                                 │
│ ## Step-by-Step Process         │
│                                 │
│ ### Step 1: Choose Your Bank    │
│ Popular options include:        │
│ • Maybank (largest network)     │
│ • CIMB (digital services)       │
│ • Public Bank (expat friendly)  │
│ • RHB (good for business)       │
│                                 │
│ [Continue reading...]           │
├─────────────────────────────────┤
│ WAS THIS HELPFUL?               │
│ [👍 Yes] [👎 No] [💬 Comment]   │
├─────────────────────────────────┤
│ RELATED ARTICLES                │
│ • How to Choose Right Bank      │
│ • Setting Up Online Banking     │
│ • Credit Cards for Foreigners   │
├─────────────────────────────────┤
│ COMMENTS (23)                   │
│ Most helpful first              │
│                                 │
│ 👤 Ahmad K. - 2 days ago        │
│ "Very helpful! Maybank process  │
│ was exactly as described."      │
│ [👍 12] [Reply]                 │
└─────────────────────────────────┘
```

### Desktop Layout - Article Page
```
┌─────────────────────────────────────────────────────────────────────────────┐
│ [Logo] [Navigation Menu] [🔍 Search]                        [🌐 EN|MY|中文]   │
├─────────────────────────────────────────────────────────────────────────────┤
│ Home > Living in Malaysia > Banking & Finance                               │
├─────────────────────────────────────────────────────────────────────────────┤
│ SIDEBAR                    │  MAIN CONTENT                                  │
│ ┌─────────────────────┐    │                                                │
│ │ 📋 TABLE OF CONTENTS│    │  How to Open a Malaysian Bank Account          │
│ │ 1. Overview         │    │  Complete Guide for 2025                      │
│ │ 2. Required Docs    │    │                                                │
│ │ 3. Choosing Bank    │    │  By Sarah Lee • Banking Expert                 │
│ │ 4. Step-by-Step     │    │  📅 Updated: Oct 8, 2025 • ⏱️ 8 min read       │
│ │ 5. Common Issues    │    │  💰 Difficulty: Easy • 👀 2,134 views          │
│ │ 6. After Opening    │    │  ⭐⭐⭐⭐☆ 4.2/5 (127 ratings)                 │
│ │ 7. FAQs            │    │                                                │
│ └─────────────────────┘    │  [🔖 Bookmark] [📤 Share] [💬 Comments]        │
│                            │                                                │
│ ┌─────────────────────┐    │  ⚠️ QUICK OVERVIEW                             │
│ │ 🔗 RELATED GUIDES   │    │  ┌─────────────────────────────────────────┐  │
│ │ • Choose Right Bank │    │  │ ✅ Time: 1-2 hours                      │  │
│ │ • Online Banking    │    │  │ ✅ Cost: Free - RM50                    │  │
│ │ • Credit Cards      │    │  │ ✅ Difficulty: Easy                     │  │
│ │ • Money Transfer    │    │  │ ✅ Best for: All residents              │  │
│ │                     │    │  └─────────────────────────────────────────┘  │
│ │ 📞 NEED HELP?       │    │                                                │
│ │ Live Chat Available │    │  ## Required Documents                         │
│ │ Monday-Friday       │    │                                                │
│ │ 9 AM - 6 PM         │    │  The documents you need depend on your        │
│ │                     │    │  residency status in Malaysia...              │
│ │ 📧 NEWSLETTER       │    │                                                │
│ │ Get weekly tips     │    │  ### For Malaysian Citizens                    │
│ │ [Email] [Subscribe] │    │  • MyKad (IC)                                  │
│ └─────────────────────┘    │  • Proof of income (salary slip/letter)       │
│                            │  • Initial deposit amount                      │
│                            │                                                │
│                            │  ### For Foreign Residents                     │
│                            │  • Passport with valid visa/permit             │
│                            │  • Employment letter from sponsor              │
│                            │  • Proof of Malaysian address                  │
│                            │  • Minimum deposit (RM500-1000)                │
│                            │                                                │
│                            │  💡 **Pro Tip:** Call the branch ahead to     │
│                            │  confirm specific requirements as they may      │
│                            │  vary between locations.                       │
│                            │                                                │
│                            │  ## Choosing the Right Bank                    │
│                            │                                                │
│                            │  Malaysia has several major banks, each with   │
│                            │  different strengths...                        │
│                            │                                                │
│                            │  [Article content continues...]                │
├─────────────────────────────────────────────────────────────────────────────┤
│ ARTICLE FOOTER                                                              │
│ Was this article helpful? [👍 Yes (89%)] [👎 No (11%)] [💬 Add Comment]    │
│                                                                             │
│ Tags: #banking #finance #expatlife #malaysia                               │
│ Share: [Facebook] [Twitter] [WhatsApp] [Email] [Copy Link]                 │
└─────────────────────────────────────────────────────────────────────────────┘
```

---

## 4. Search Results Wireframe

### Mobile Layout - Search: "visa extension"
```
┌─────────────────────────────────┐
│ [←] Search: "visa extension"    │
├─────────────────────────────────┤
│ 🔍 [visa extension        ] [×] │
├─────────────────────────────────┤
│ Found 12 results                │
│ [All] [Articles] [Videos] [FAQ] │
├─────────────────────────────────┤
│ FILTERS                         │
│ Category: [All ▼]               │
│ Difficulty: [All ▼]             │
│ Language: [English ▼]           │
├─────────────────────────────────┤
│ RESULTS                         │
│ ┌─────────────────────────────┐ │
│ │ 🔥 Tourist Visa Extension   │ │
│ │ Complete guide for 2025     │ │
│ │ Government Services • Easy  │ │
│ │ ⭐⭐⭐⭐⭐ • 6 min read       │ │
│ └─────────────────────────────┘ │
│ ┌─────────────────────────────┐ │
│ │ Student Visa Extension      │ │
│ │ Step-by-step process        │ │
│ │ Education • Medium          │ │
│ │ ⭐⭐⭐⭐☆ • 12 min read      │ │
│ └─────────────────────────────┘ │
│ ┌─────────────────────────────┐ │
│ │ Work Visa Extension Guide   │ │
│ │ Employment pass renewal     │ │
│ │ Work & Business • Medium    │ │
│ │ ⭐⭐⭐⭐☆ • 15 min read      │ │
│ └─────────────────────────────┘ │
├─────────────────────────────────┤
│ RELATED SEARCHES                │
│ • visa renewal                  │
│ • immigration office           │
│ • tourist visa malaysia        │
│ • visa requirements            │
├─────────────────────────────────┤
│ NO RESULTS?                     │
│ 💬 Ask our community           │
│ 📧 Contact support             │
└─────────────────────────────────┘
```

---

## 5. Interactive Prototyping Plan

### Prototype Scope
**Primary User Flows to Prototype:**
1. **New Visitor Journey:** Landing → Category → Article → Related Content
2. **Search Flow:** Search → Results → Filter → Article
3. **Mobile Navigation:** Menu → Category → Subcategory → Article
4. **Content Discovery:** Homepage → Popular Guides → Related Articles

### Prototyping Tools
- **Figma:** High-fidelity interactive prototypes
- **InVision:** Clickable wireframe prototypes
- **Principle:** Micro-interactions and animations
- **Marvel:** Simple user testing prototypes

### Interactive Elements to Prototype
```
Navigation Patterns:
• Hamburger menu animation
• Mega-menu dropdown (desktop)
• Breadcrumb interaction
• Sticky navigation behavior

Content Interactions:
• Article table of contents jump links
• Image zoom/gallery functionality
• Comment system interaction
• Rating and feedback forms

Search & Discovery:
• Search autocomplete behavior
• Filter application and results update
• Infinite scroll vs pagination
• Category hover states

Mobile Gestures:
• Swipe navigation between articles
• Pull-to-refresh functionality
• Touch-friendly tap targets
• Gesture-based sharing
```

### User Testing Scenarios
1. **Task:** "Find information about extending a tourist visa"
2. **Task:** "Learn how to open a bank account as a foreigner"
3. **Task:** "Discover what to do in your first week in Malaysia"
4. **Task:** "Find emergency contact information quickly"
5. **Task:** "Search for information about Malaysian food culture"

---

## 6. Responsive Behavior Specifications

### Mobile (320px - 768px)
- **Single column layout** with full-width content
- **Collapsed navigation** with hamburger menu
- **Touch-optimized** buttons and links (minimum 44px)
- **Simplified typography** hierarchy for small screens
- **Bottom navigation** for quick access to main sections

### Tablet (768px - 1024px)
- **Hybrid layout** with sidebar option
- **Expanded navigation** with visible primary categories
- **Two-column content** for article listings
- **Enhanced touch targets** while maintaining information density

### Desktop (1024px+)
- **Multi-column layouts** with sidebar navigation
- **Full navigation visibility** with mega-menus
- **Hover states** and advanced interactions
- **Optimized for mouse** and keyboard navigation
- **Enhanced content density** with proper whitespace

---

## 7. Accessibility Considerations in Wireframes

### Screen Reader Navigation
- **Landmark regions** clearly defined in layout
- **Skip links** for keyboard users
- **Heading hierarchy** logical and consistent
- **Alternative navigation paths** for different user needs

### Visual Accessibility
- **High contrast** mode considerations
- **Text scaling** up to 200% accommodation
- **Focus indicators** clearly visible
- **Color-independent** information design

### Motor Accessibility
- **Large touch targets** on mobile (minimum 44px)
- **Adequate spacing** between interactive elements
- **Alternative input methods** consideration
- **Reduced motion** options for animations

---

## Implementation Timeline

### Week 3: Foundation Wireframes
- [ ] Homepage wireframe (mobile & desktop)
- [ ] Category page wireframe
- [ ] Article page wireframe
- [ ] Navigation system wireframe

### Week 4: Detailed Wireframes
- [ ] Search results wireframe
- [ ] User account/profile wireframes
- [ ] Contact and support page wireframes
- [ ] Error page wireframes (404, etc.)

### Week 5: Interactive Prototypes
- [ ] Primary user flow prototypes
- [ ] Mobile navigation prototype
- [ ] Search interaction prototype
- [ ] Accessibility testing prototype

### Week 6: Testing & Refinement
- [ ] User testing on prototypes
- [ ] Accessibility audit of wireframes
- [ ] Stakeholder review and approval
- [ ] Final wireframe documentation

---

**Wireframe Designer:** [UI/UX Designer Name]  
**Tools Used:** Figma, InVision, Paper sketches  
**Status:** In Progress - Week 3  
**Next Milestone:** Interactive Prototypes - Week 5