rapid-hello

byjayesh vagadiya

Hello

Landing
Landing

Comments (0)

No comments yet. Be the first!

System Requirements

System Requirement Document
Page 1 of 7

System Requirements Document for rapid-hello

1. Introduction

The rapid-hello project aims to create a website that provides RTO practice tests specifically targeting new drivers. The website is designed to offer an interactive and engaging practice-test experience to help new drivers prepare for their driving tests.

2. System Overview

The system is a web-based platform that delivers RTO practice tests to new drivers. It includes several pages that guide the user through the practice test process, from landing on the site to reviewing their test results. The primary audience is new drivers, and the design is warm, human, and approachable, inspired by Pablo Stanley's design language.

2a. Product Interpretation and Delivery Boundary

The website is a custom UI application with a focus on providing an interactive practice-test experience for new drivers. It includes several distinct pages: Landing, Practice Tests, Practice Test, Results, and Review. Each page serves a specific purpose in the user's journey from starting a practice test to reviewing their performance. The system does not require user accounts, and all pages are accessible without authentication.

2b. Source Content Inventory

Not applicable as there is no explicit content_source directive.

Page 2 of 7

2c. Page Content and Component Coverage

Landing

  • Purpose: Introduce the RTO practice-test website, its audience, and its purpose.
  • Components:
    • Introduction to the website and its benefits for new drivers.
    • Navigation to Practice Tests page.
    • Friendly illustrations and oversized typography.

Practice Tests

  • Purpose: Allow users to access available RTO practice tests and start an attempt.
  • Components:
    • List of available practice tests.
    • Option to start a new test attempt.
    • Modular card layout for test selection.

Practice Test

  • Purpose: Provide a workspace for presenting questions and capturing learner answers.
  • Components:
    • Display of practice test questions.
    • Input fields for user answers.
    • Navigation controls to move between questions.
Page 3 of 7

Results

  • Purpose: Show the outcome or score for the finished practice-test attempt.
  • Components:
    • Display of test results and scores.
    • Summary of performance.
    • Option to proceed to the Review page.

Review

  • Purpose: Allow learners to inspect their attempt and continue preparing.
  • Components:
    • Detailed review of test questions and answers.
    • Feedback on performance.
    • Suggestions for improvement.

3. Functional Requirements

  • As a New Driver Learner, I should be able to access the Landing page to understand the purpose of the website and navigate to the Practice Tests page. (Provenance: required_inference)
  • As a New Driver Learner, I should be able to view and select from a list of available practice tests on the Practice Tests page. (Provenance: explicit)
  • As a New Driver Learner, I should be able to start a practice test attempt and answer questions on the Practice Test page. (Provenance: required_inference)
  • As a New Driver Learner, I should be able to complete a practice test attempt and view my results on the Results page. (Provenance: required_inference)
  • As a New Driver Learner, I should be able to review my performance and receive feedback on the Review page. (Provenance: required_inference)

4. User Personas

  • New Driver Learner: The primary user of the website. They are new drivers looking to prepare for their RTO driving test through practice tests. Their responsibilities include starting practice tests, answering questions, and reviewing their performance.
Page 4 of 7

5. Core User Flows

  1. Landing to Practice Tests

    • The New Driver Learner lands on the Landing page.
    • They read about the website's purpose and navigate to the Practice Tests page.
  2. Selecting and Starting a Practice Test

    • On the Practice Tests page, the learner views available tests.
    • They select a test and start an attempt.
  3. Completing a Practice Test

    • The learner answers questions on the Practice Test page.
    • Upon completion, they are directed to the Results page.
  4. Reviewing Results and Performance

    • On the Results page, the learner views their score and performance summary.
    • They proceed to the Review page to inspect detailed feedback and suggestions.
Page 5 of 7

6. Visuals Colors and Theme

  • Muse: Pablo Stanley
  • Palette:
    • Background: #F5F5DC
    • Surface: #FFFFFF
    • Text: #333333
    • Primary: #FF6347
    • Accent: #2E8B57
    • Muted: #D3D3D3
  • Typography:
    • Headings: Nunito — Bold, large size, generous line spacing
    • Body: DM Sans
    • Scale: 1.5 modular, 48/32/24/18/16
  • Shape Language: Big radii, pill-shaped buttons, blob-like containers
  • Layout: Grid layout with generous white space, rounded card sections
  • Imagery: Modular vector people and objects, hand-drawn accents

7. Signature Design Concept

The Landing page will feature a full-screen illustrated hero with hand-drawn elements, showcasing a young driver practicing. The design will use friendly, oversized typography and a warm color palette to create an inviting atmosphere. Navigation buttons will be pill-shaped with playful hover effects.

Page 6 of 7

8. Interaction Model & Motion Direction

  • Interaction Model: Animated
  • Motion Tempo: Expressive
  • Hero Dimensionality: Layered_2d
  • Landing Hero Motion Brief: The hero section will feature a full-bleed illustration of a young driver practicing, with oversized typography introducing the website's purpose. The illustration will have playful elements that respond to user interactions, such as hover effects and springy micro-interactions on buttons.

9. Non-Functional Requirements

  • The website must be responsive and accessible on various devices and screen sizes. (Provenance: required_inference)
  • The design must adhere to the warm, human, and approachable theme inspired by Pablo Stanley. (Provenance: explicit)

10. Tech Stack

  • Frontend: React
  • Backend: Python/FastAPI
  • Storage: Appropriate database for storing test questions and user attempts
  • Deployment: Docker/docker-compose

11. Assumptions and Constraints

  • The primary audience is new drivers, and the design must cater to their needs.
  • No user accounts are required; all pages are accessible without authentication.
  • The design must avoid corporate blue and white aesthetics.
Page 7 of 7

12. Glossary

  • RTO: Regional Transport Office, responsible for issuing driving licenses and conducting driving tests.
  • Practice Test: A simulated test designed to help learners prepare for the actual driving test.
  • New Driver Learner: A user who is new to driving and is preparing for their driving test through practice tests.
Landing design preview
Landing: View site introduction
Practice Tests: View available tests
Practice Tests: Start test attempt
Practice Test: Answer questions
Results: View score summary
Review: Review feedback
Landing design preview
Landing: View site introduction
Practice Tests: View available tests
Practice Tests: Start test attempt
Practice Test: Answer questions
Results: View score summary
Review: Review feedback