sing-bette

byLorenzo Ryan

A web siye for music training with tuner , in piano notes example G4 and instruments like violin, harp, harmonica, and some lessons on singing techniques and how to apply them IRL

No preview

Comments (0)

No comments yet. Be the first!

System Requirements

System Requirement Document
Page 1 of 8

System Requirements Document for sing-bette

1. Introduction

Sing-bette is a web-based platform designed to provide music training for aspiring musicians and vocalists. The platform offers interactive tools such as a music tuner, piano note examples, and content related to instruments like the violin, harp, and harmonica. Additionally, it provides lessons on singing techniques and their real-life applications. The primary audience for sing-bette includes music learners seeking to enhance their skills through practical lessons and tools.

2. System Overview

Sing-bette delivers a comprehensive music training experience through a web interface. It includes a tuner for practice, piano note examples, instrument-related content, and singing lessons. The system is designed for music learners who aim to improve their musical skills and apply singing techniques in real-life scenarios. The platform is structured with distinct pages for each major component, ensuring focused learning and practice environments.

2a. Product Interpretation and Delivery Boundary

Sing-bette is delivered as a web application with a custom user interface, accessible without requiring user accounts. The platform's primary focus is on providing educational content and tools for music practice. The current delivery includes a public landing page, a tuner, piano notes, instrument content, and singing lessons. Future expansions or changes are not covered in this document.

Page 2 of 8

2b. Source Content Inventory

Not applicable as no content source directive is provided.

2c. Page Content and Component Coverage

Landing

  • Information/State: Overview of the music-training experience, including tuner, lessons, instrument content, and practical singing guidance.
  • Primary Actions: Navigate to specific practice or lesson destinations.
  • Components: Illustrated hero scene, oversized headings, introductory text.
  • States: Loading, success, error.

Tuner

  • Information/State: Interactive tuner tool for music practice.
  • Primary Actions: Tune instruments, adjust settings.
  • Components: Tuner interface, pitch display, settings panel.
  • States: Loading, success, error, recovery.

Piano Notes

  • Information/State: Examples of piano notes, including G4.
  • Primary Actions: View note examples, listen to audio samples.
  • Components: Note display, audio player, educational text.
  • States: Loading, success, error.
Page 3 of 8

Instruments

  • Information/State: Content related to violin, harp, and harmonica.
  • Primary Actions: Explore instrument details, view tutorials.
  • Components: Instrument images, tutorial videos, descriptive text.
  • States: Loading, success, error.

Singing

  • Information/State: Lessons on singing techniques.
  • Primary Actions: Access lessons, view instructional videos.
  • Components: Lesson modules, video player, practice exercises.
  • States: Loading, success, error.

Singing Applications

  • Information/State: Guidance on applying singing techniques in real life.
  • Primary Actions: Explore applications, view examples.
  • Components: Application scenarios, example videos, instructional text.
  • States: Loading, success, error.

3. Functional Requirements

  • As a Music Learner, I should be able to access a web-based music-training experience to practice pitch and instrument-related skills. (Provenance: explicit)
  • As a Music Learner, I should be able to use a tuner for music practice. (Provenance: explicit)
  • As a Music Learner, I should be able to view piano-note examples, including G4. (Provenance: explicit)
  • As a Music Learner, I should be able to explore content related to instruments like the violin, harp, and harmonica. (Provenance: explicit)
  • As a Music Learner, I should be able to learn singing techniques through lessons. (Provenance: explicit)
  • As a Music Learner, I should be able to understand how to apply singing techniques in real life. (Provenance: explicit)
Page 4 of 8

4. User Personas

Music Learner

  • Product Context: Uses sing-bette to enhance musical skills through practice and lessons.
  • Primary Goal: To gain practical music skills and apply singing techniques in real life.
  • Distinct Responsibilities:
    • Practice pitch using the tuner.
    • Study piano notes such as G4.
    • Explore instruments including violin, harp, and harmonica.
    • Learn and apply singing techniques.
  • Interactions: Engages with interactive tools and educational content to improve musical abilities.
  • Observable Success: Demonstrates improved musical skills and applies learned techniques effectively.

5. Core User Flows

5.1 Accessing the Platform

  1. Starting Context: User opens the sing-bette website.
  2. Page: Landing
  3. Action: User reads the overview of the music-training experience.
  4. Result: User understands the available tools and lessons.
  5. Next Step: User navigates to a specific practice or lesson destination.
Page 5 of 8

5.2 Using the Tuner

  1. Starting Context: User selects the tuner from the landing page.
  2. Page: Tuner
  3. Action: User interacts with the tuner to practice pitch.
  4. Result: User tunes an instrument or practices pitch.
  5. Next Step: User may adjust settings or return to the landing page.

5.3 Studying Piano Notes

  1. Starting Context: User selects piano notes from the landing page.
  2. Page: Piano Notes
  3. Action: User views and listens to piano note examples.
  4. Result: User gains understanding of piano notes like G4.
  5. Next Step: User may explore other notes or return to the landing page.

5.4 Exploring Instruments

  1. Starting Context: User selects instruments from the landing page.
  2. Page: Instruments
  3. Action: User explores content related to violin, harp, and harmonica.
  4. Result: User learns about different instruments.
  5. Next Step: User may watch tutorials or return to the landing page.

5.5 Learning Singing Techniques

  1. Starting Context: User selects singing lessons from the landing page.
  2. Page: Singing
  3. Action: User accesses lessons and views instructional videos.
  4. Result: User learns singing techniques.
  5. Next Step: User may practice exercises or return to the landing page.
Page 6 of 8

5.6 Applying Singing Techniques

  1. Starting Context: User selects singing applications from the landing page.
  2. Page: Singing Applications
  3. Action: User explores real-life applications of singing techniques.
  4. Result: User understands how to apply techniques in real life.
  5. Next Step: User may view examples or return to the landing page.

6. Visuals Colors and Theme

  • Muse: Frank Chimero
  • Palette:
    • Background: #FFF8E7
    • Surface: #FFFFFF
    • Text: #333333
    • Primary: #C75C5C
    • Accent: #5C9EC7
    • Muted: #D4C4A8
  • Typography:
    • Headings: Source Serif Pro — Bold
    • Body: Karla
    • Scale: 1.25 modular, 48/36/24/18/16
  • Shape Language: Organic shapes with rounded edges
  • Layout: Single-column reading measure with generous leading
  • Imagery: Warm flat illustration and hand-drawn diagrams
Page 7 of 8

7. Signature Design Concept

The public entry page features an illustrated hero scene visualizing music learning with instruments and notes. Oversized, bold type for headings with a musical rhythm guides the user. Illustrated section openers introduce each part with thematic visuals, creating a welcoming and engaging environment for music learners.

8. Interaction Model & Motion Direction

  • Interaction Model: Static
  • Motion Tempo: Restrained
  • Hero Dimensionality: Flat
  • Landing Hero Motion Brief: The hero scene features musical instruments and notes with a soft cream background. Subtle animations on interactive elements guide and engage learners, maintaining a composed and welcoming atmosphere.

9. Non-Functional Requirements

  • Performance: The application should load within 3 seconds on standard broadband connections.
  • Accessibility: The platform must comply with WCAG 2.1 AA standards to ensure accessibility for all users.
  • Scalability: The system should support up to 10,000 concurrent users without performance degradation.

10. Tech Stack

  • Frontend: React
  • Backend: Python/FastAPI
  • Storage: PostgreSQL
  • Deployment: Docker, Kubernetes (if required)
Page 8 of 8

11. Assumptions and Constraints

  • The platform is designed for web access only; no mobile app is planned.
  • User accounts are not required for access.
  • The system will not include advanced music theory content beyond the specified scope.

12. Glossary

  • Tuner: A tool used to adjust the pitch of an instrument.
  • Piano Notes: Musical notes played on a piano, such as G4.
  • Instruments: Musical devices like the violin, harp, and harmonica.
  • Singing Techniques: Methods used to improve vocal performance.
  • Real-Life Applications: Practical uses of learned skills in everyday scenarios.

No completed page designs yet.

Completed design pages will appear here when they are ready to preview.

Landing: 1. Read overview
Tuner: 2. Practice pitch tuning
Tuner: 3. Adjust tuner settings
Piano Notes: 4. View note examples
Piano Notes: 5. Listen to G4 sample
Instruments: 6. Explore instrument details
Instruments: 7. Watch instrument tutorials
Singing: 8. Access singing lessons
Singing: 9. View instructional videos
Singing Applications: 10. Explore real-life applications
Singing Applications: 11. View example scenarios

No completed page designs yet.

Completed design pages will appear here when they are ready to preview.

Landing: 1. Read overview
Tuner: 2. Practice pitch tuning
Tuner: 3. Adjust tuner settings
Piano Notes: 4. View note examples
Piano Notes: 5. Listen to G4 sample
Instruments: 6. Explore instrument details
Instruments: 7. Watch instrument tutorials
Singing: 8. Access singing lessons
Singing: 9. View instructional videos
Singing Applications: 10. Explore real-life applications
Singing Applications: 11. View example scenarios