System Requirements Document for opal-testimonial

1. Introduction

Opal-testimonial is a testimonial and social-proof collection widget designed to help businesses collect text and video testimonials via a link and display them as embeddable widgets on their websites or landing pages. This tool targets indie founders, agencies, course creators, and SaaS marketing teams, offering a streamlined solution to automate the testimonial collection and display process, which is often manual and repetitive.

2. System Overview

Opal-testimonial provides a simple and effective solution for businesses to gather and showcase testimonials, enhancing their social proof and conversion funnels. The system supports text and video testimonial collection through shareable links and allows businesses to configure and embed these testimonials on their sites. The product is designed to cater to a diverse audience, including indie founders, agencies, course creators, and SaaS marketing teams, with pricing tiers based on usage.

2a. Product Interpretation and Delivery Boundary

Opal-testimonial is delivered as a SaaS platform with application-owned identity, allowing business testimonial managers to enroll and manage their testimonial collection and display processes. The system includes a public entry surface for anonymous users and identity access surfaces for business testimonial managers. The product focuses on the collection and display loop, initiated through shareable links and displayed via embeddable widgets. The system does not include CRM integrations or review aggregation from external sources like email or WhatsApp.

2b. Source Content Inventory

Not applicable as there is no explicit content_source directive.

2c. Page Content and Component Coverage

Landing

• Information: Overview of the testimonial collection and display product.
• Primary Actions: Navigate to Sign Up or Login.
• Components: Hero section with bold badge graphic, testimonial quote, and CTA.

Sign Up

• Information: Enrollment form for business testimonial managers.
• Primary Actions: Submit enrollment details.
• Components: Form fields for user information, submit button.

Login

• Information: Login form for returning business testimonial managers.
• Primary Actions: Submit login credentials.
• Components: Username and password fields, submit button.

Collection Links

• Information: Workspace for creating and managing shareable collection links.
• Primary Actions: Create new link, view existing links.
• Components: Link creation form, list of existing links.

Text Testimonial

• Information: Submission page for text testimonials.
• Primary Actions: Submit testimonial.
• Components: Text input field, submit button.

Video Testimonial

• Information: Submission page for video testimonials.
• Primary Actions: Record or upload video, submit testimonial.
• Components: Video recording/upload interface, submit button.

Testimonials

• Information: Workspace for reviewing collected testimonials.
• Primary Actions: Approve or reject testimonials.
• Components: List of testimonials, approval/rejection controls.

Widget Builder

• Information: Configuration interface for testimonial widgets.
• Primary Actions: Configure widget, obtain embed code.
• Components: Widget configuration options, embed code generator.

Testimonial Library

• Information: Archive of collected testimonials.
• Primary Actions: View and manage testimonials.
• Components: Search and filter options, list of testimonials.

3. Functional Requirements

• As a business testimonial manager, I should be able to sign up and create an account to manage testimonial collection and display. (Provenance: required_inference)
• As a business testimonial manager, I should be able to log in to access my testimonial collections and widget configurations. (Provenance: required_inference)
• As a business testimonial manager, I should be able to create shareable links for collecting text testimonials. (Provenance: explicit)
• As a business testimonial manager, I should be able to create shareable links for collecting video testimonials. (Provenance: explicit)
• As a testimonial contributor, I should be able to submit a text testimonial via a link. (Provenance: required_inference)
• As a testimonial contributor, I should be able to submit a video testimonial via a link. (Provenance: required_inference)
• As a business testimonial manager, I should be able to review collected testimonials before they are displayed. (Provenance: required_inference)
• As a business testimonial manager, I should be able to configure testimonial widgets and obtain embed codes for my website. (Provenance: explicit)
• As a business testimonial manager, I should be able to access a library of collected testimonials for ongoing use. (Provenance: required_inference)

4. User Personas

Business Testimonial Manager

A business testimonial manager is responsible for collecting and managing testimonials to enhance the business's social proof. They create shareable links for testimonial collection, review submissions, and configure widgets for display on their website. Success is measured by the effective integration of testimonials into the business's conversion funnel.

Testimonial Contributor

A testimonial contributor is a customer or invited individual who provides text or video testimonials through a shareable link. Their primary goal is to submit a testimonial that accurately reflects their experience, contributing to the business's social proof.

5. Core User Flows

5.1 Business Testimonial Manager Sign-Up

1. Context: New user lands on the Sign Up page.
2. Action: User fills out the enrollment form with necessary details.
3. Result: User account is created, and the user is redirected to the Collection Links page.
4. Next Step: User can start creating collection links.

5.2 Business Testimonial Manager Login

1. Context: Returning user lands on the Login page.
2. Action: User enters login credentials.
3. Result: User is authenticated and redirected to the Collection Links page.
4. Next Step: User can manage existing links or create new ones.

5.3 Creating a Collection Link

1. Context: User is on the Collection Links page.
2. Action: User selects the option to create a new link.
3. Result: A new shareable link is generated.
4. Next Step: User can distribute the link to potential contributors.

5.4 Submitting a Text Testimonial

1. Context: Contributor receives a text testimonial link.
2. Action: Contributor accesses the link and submits their testimonial.
3. Result: Testimonial is stored in the system.
4. Next Step: Business testimonial manager reviews the submission.

5.5 Submitting a Video Testimonial

1. Context: Contributor receives a video testimonial link.
2. Action: Contributor accesses the link, records or uploads a video, and submits it.
3. Result: Video testimonial is stored in the system.
4. Next Step: Business testimonial manager reviews the submission.

5.6 Configuring a Testimonial Widget

1. Context: User is on the Widget Builder page.
2. Action: User configures the widget settings and generates embed code.
3. Result: Embed code is provided for integration on the business website.
4. Next Step: User integrates the widget into the website.

6. Visuals Colors and Theme

• Muse: Aaron Draplin
• Palette:
  • Background: #F5F3EF
  • Surface: #FFFFFF
  • Text: #333333
  • Primary: #FF7F11
  • Accent: #0A7E8C
  • Muted: #B8B8B8
• Typography:
  • Headings: Oswald — Uppercase, tight tracking, bold weight
  • Body: Roboto Slab
  • Scale: 1.25 modular, 48/36/24/16/14
• Shape Language: Chunky borders, badge-like elements, rounded corners
• Layout: Structured grid with badge-like sections, clear divisions, and chunky buttons
• Imagery: Thick-line vector icons, badge-style graphics, warm halftone photos

7. Signature Design Concept

The public entry page features a full-width hero section with a bold badge graphic and a large testimonial quote in Oswald font. The CTA is highlighted with an orange accent over a warm grey background, embodying the bold honesty and reliability inspired by Aaron Draplin's style.

8. Interaction Model & Motion Direction

• Interaction Model: Static
• Motion Tempo: Restrained
• Hero Dimensionality: Flat
• Landing Hero Motion Brief: The hero section features a bold badge graphic with a large testimonial quote. The transformation involves a snap-in transition for the CTA button, maintaining a sturdy and reliable feel. In reduced-motion mode, the transition is simplified to a fade-in effect.

9. Non-Functional Requirements

• Scalability: The system must handle varying loads based on the number of testimonials collected and displayed.
• Security: User data, including testimonials, must be securely stored and protected against unauthorized access.
• Performance: The system should provide a seamless user experience with minimal load times for testimonial submission and widget display.

10. Tech Stack

• Frontend: React
• Backend: Python/FastAPI
• Storage: Appropriate storage solution for text and video testimonials
• Containerization: Docker/docker-compose
• Deployment: Kubernetes (if required for deployment)

11. Assumptions and Constraints

• The system will not include CRM integrations or review aggregation from external sources.
• The primary focus is on the collection and display loop, initiated through shareable links and displayed via embeddable widgets.
• Application-owned identity is required for business testimonial managers to manage their testimonial collection and display processes.

12. Glossary

• Testimonial: A statement testifying to someone's character or qualifications.
• Widget: A small application with limited functionality that can be installed and executed within a web page.
• SaaS: Software as a Service, a software distribution model in which applications are hosted by a service provider and made available to customers over the internet.