Multimedia App Development Phases: Models, Phases, OO & Evaluation

Core Concepts: Definitions and Scope

What is Multimedia Computing?

Multimedia computing integrates text, audio, video, graphics, and animation into interactive applications. Unlike traditional computing, it requires:

• Synchronization (timing between media streams).
• High bandwidth (for real-time processing).
• User interaction (e.g., clicking, voice commands).

Challenges in Multimedia Systems:

Phases of Multimedia Application Development

Developing a multimedia application follows a structured lifecycle. The most common models are:

Detailed Phase Breakdown

flowchart LR
  A["Conceptualization"] --> B["Design"]
  B --> C["Implementation"]
  C --> D["Testing & Evaluation"]
  D --> E["Deployment"]
  E --> F["Maintenance"]
  F -->|"Feedback"| A

1. Conceptualization

   • Define goals, target audience, and technical feasibility.
   • Example: eSewa’s initial idea to digitize government payments (2016).
   • Key Deliverable: Project charter (scope, timeline, budget).

2. Design

   • Storyboarding: Sketch user flows (e.g., Daraz’s checkout process).
   • Wireframing: Low-fidelity layouts (e.g., Pathao’s driver app UI).
   • Prototyping: Interactive mockups (e.g., Ncell’s myNcell app prototype).
   • IMAGE: wireframe vs. prototype labelled diagram | Shows the difference between static wireframes and clickable prototypes.

3. Implementation

   • Development Tools:
     • Authoring Tools: Adobe Animate (for animations), Unity (for 3D games).
     • Programming Languages: Python (for AI-driven apps), JavaScript (for web apps).
   • Example: Khalti’s QR code payment system uses JavaScript + Firebase for real-time transactions.

4. Testing & Evaluation

   • Types of Testing:
     • Unit Testing: Test individual components (e.g., a video player’s buffering logic).
     • Integration Testing: Check interactions (e.g., WhatsApp’s end-to-end encryption + media sharing).
     • User Acceptance Testing (UAT): Real-world validation (e.g., NEPSE’s app beta testers).
   • Evaluation Metrics:
     • Usability: How easily users navigate (e.g., eSewa’s 5-step payment flow).
     • Performance: Load times, frame rates (e.g., YouTube’s adaptive bitrate streaming).
     • Accessibility: Compliance with WCAG (e.g., screen reader support in government portals).

5. Deployment

   • Platforms: Web (React), Mobile (Flutter), Desktop (Electron).
   • Example: Daraz’s app uses React Native for cross-platform deployment.

6. Maintenance

   • Updates: Bug fixes, new features (e.g., Pathao’s COVID-safe ride options).
   • Scalability: Handling increased load (e.g., Ncell’s data usage spikes during festivals).

In the Real World

1. eSewa: Payment Flow as a Multimedia Pipeline

• Phase Used: Design → Implementation → Testing
• How It Works:
  • Conceptualization: Digitize government payments (e.g., electricity bills).
  • Design: Storyboard the user journey (scan QR → enter amount → OTP verification).
  • Implementation: Uses QR code generation (Python) + Firebase for transactions.
  • Testing: UAT with 10,000 users before full launch (2019).
• Challenge Solved: Synchronization between user action (scan) and server response (payment confirmation).

2. Pathao: Ride-Matching Algorithm

• Phase Used: Spiral Model (Iterative Prototyping)
• How It Works:
  • Design: Prototyped driver-passenger matching with real-time GPS tracking.
  • Implementation: Uses Kafka for event streaming to sync ride requests and driver availability.
  • Evaluation: A/B tested UI changes (e.g., adding fare breakdowns reduced disputes by 30%).
• Key Idea: Abstraction Levels (see below) separate:
  • Low-level: GPS coordinates (raw data).
  • High-level: "Best driver match" (business logic).

3. Srijan’s Interactive Nepali Textbooks

• Phase Used: Agile (Sprint-based Development)
• How It Works:
  • Implementation: Combines SVG animations (for science diagrams) + audio explanations (for Nepali grammar).
  • Testing: Classroom pilots in 50 schools to measure engagement (e.g., quiz scores improved by 40%).
• Challenge Solved: Content Delivery via offline-capable PWA (Progressive Web App).

Abstraction Levels in Multimedia Programming

Multimedia systems use layered abstraction to manage complexity. Three key levels:

Worked Example: Daraz’s Order Queue

• Low-Level: Product IDs, user cart data (stored in a database).
• Mid-Level: Order object with status (pending → shipped → delivered).
• High-Level: "Notify user when order is out for delivery" (email/SMS trigger).

Object-Oriented Approaches in Multimedia

Multimedia development benefits from OOP principles:

• Encapsulation: Hide complexity (e.g., a VideoPlayer class manages buffering internally).
• Inheritance: Reuse code (e.g., AudioClip subclassed from Media).
• Polymorphism: Same interface for different media (e.g., play() works for MP3, MP4, and WAV).

Example: e-Learning Platform (Like Srijan’s App)

classDiagram
  class User {
    +String name
    +String email
    +enrollCourse()
  }
  class Course {
    +String title
    +List~Lesson~ lessons
    +addLesson()
  }
  class Lesson {
    +String content
    +MediaType type
    +play()
  }
  class Media {
    <<abstract>>
    +String format
    +play()
  }
  class VideoLesson {
    +int duration
    +play()
  }
  class AudioLesson {
    +int bitrate
    +play()
  }
  User "1" *-- "0..*" Course : enrolls
  Course "1" -- "1..*" Lesson : contains
  Lesson <|-- VideoLesson : extends
  Lesson <|-- AudioLesson : extends
  VideoLesson ..> Media : implements
  AudioLesson ..> Media : implements
  class DiagramNote {
    +"Note: Abstract Media class defines interface for all media types"
  }

• Why OOP?
  • Reusability: Media class used for videos, audios, and images.
  • Extensibility: Add QuizLesson without breaking existing code.

Multimedia Interface Components

A multimedia interface combines input, processing, and output elements:

flowchart LR
  A["User Input"] --> B["Processing Unit"]
  B --> C["Output"]
  A -->|"Examples"| D["Touchscreen<br/>Microphone<br/>Motion Sensor"]
  B -->|"Examples"| E["Compression<br/>Synchronization<br/>AI Analysis"]
  C -->|"Examples"| F["Display<br/>Speaker<br/>Haptic Feedback"]

Key Components:

1. Input Devices:

   • Microphone (for voice commands in WhatsApp).
   • Webcam (for video calls in Zoom).
   • Touchscreen (for swiping in Pathao’s app).
   • IMAGE: multimedia input devices labelled diagram | Shows a microphone, webcam, and touchscreen with labeled parts.

2. Processing Units:

   • CPU/GPU: Render 3D graphics (e.g., Unity games).
   • DSP (Digital Signal Processor): Compress audio (e.g., Spotify’s codecs).
   • APIs: Google’s ML Kit for image recognition (e.g., Khalti’s receipt scanning).

3. Output Devices:

   • Display: OLED screens (for sharp images in smartphones).
   • Speaker: Bone conduction headphones (for immersive audio).
   • Printer: Thermal printers (for eSewa receipts).

4. Interaction Techniques:

   • Gesture Control: Swipe to skip songs (Spotify).
   • Voice Control: "Hey Google, play Nepali news" (Google Assistant).
   • Haptic Feedback: Vibration for notifications (Ncell’s app).

Evaluation and Testing: Why It Matters

Example: Ncell’s App Redesign

Problem: High user dropout during recharge. Testing Phases:

1. Usability Testing: Found users struggled with the 6-step recharge flow.
2. A/B Testing: Simplified to 3 steps → 20% increase in completions.
3. Performance Testing: Reduced app crashes by optimizing image compression (from JPEG to WebP).

Common Evaluation Metrics

Exam Tip

How to Score Full Marks

1. For Definitions:

   • Multimedia Computing: "Integration of multiple media types (text, audio, video) with interactivity and real-time processing."
   • Three C’s: Communication (WhatsApp calls), Collaboration (Google Docs), Content Delivery (Netflix streaming).

2. For Phases:

   • Structure your answer like this:

     "The waterfall model follows sequential phases: conceptualization → design → implementation → testing → deployment. Example: NTC’s website updates use this for predictable, low-risk projects."

   • Always include:
     • A real-world example (e.g., eSewa, Pathao).
     • A challenge (e.g., synchronization, bandwidth).

3. For Abstraction Levels:

   • Draw a table (like above) or a Mermaid diagram to show layers.
   • Link to a real system:

     "In YouTube, the low-level is the video bitstream, the mid-level is the Video object with metadata, and the high-level is the 'autoplay' feature."

4. For Evaluation:

   • Use the Ncell example to explain usability testing.
   • Mention metrics: "Evaluation in multimedia includes quantitative (task success rate) and qualitative (user feedback) methods."

5. Avoid Common Mistakes:

   • ❌ Saying "multimedia is just graphics."
   • ❌ Ignoring synchronization in phase descriptions.
   • ❌ Forgetting real-world ties (examiners love local examples like eSewa or Daraz).

Pro Tip: If asked about telemedicine/e-learning, relate it to the Three C’s:

• Telemedicine: Communication (video calls), Collaboration (doctor-patient notes), Content Delivery (medical images).
• E-learning: Communication (forum discussions), Collaboration (group projects), Content Delivery (interactive quizzes).