1. Introduction
MochaCaramel Is a media production company that offers photography, videography as well as event consultation services. The website aims to have their 'work do all the talking' by following the popular saying 'a picture is worth a thousand words'

The website's MVP are 2 use cases, To act as a portfolio, and for potential clients to contact the professional. One additional use case is linking Website to social media platforms so that client has less friction in accessing Mochacaramel's other platforms

2. Actors
User: Clients in the market for a Photographer, Videographer and/or Event Consultant

3. Use Cases

3.1 Use Case 1: Portfolio

3.1.1 Description
The design of the website is simple, since the focus is media the entire website is filled with Mosaic tiles showcasing the work for the given gallery the user is in. To help target a particular niche each gallery will be separated by category. In total there will be 4: Weddings, Automobiles, Events, Commercial

To Manage the content of the tiles, user will upload all of their photos in a content management system (CMS) and the system itself will display the photos on the screen and reize it automatically to fit all screen sizes.

3.1.2 Preconditions
Client goes mochacaramel.net

3.1.3 Basic Flow
Client navigates the website
Client explores the galleries and all sub gallery
Client read through the testimonials of other clients

3.1.4 Alternative Flows
NA

3.1.5 Postconditions
Contacts Mochacaramel to inquire for service

3.2 Use Case 2: Contact

3.2.1 Description
Within each category there is a page called Packages which defines all of the services MochaCaramel covers in that particular Niche as well as gives the user the ability to book. For general inquiry, a form is provided in the About Us & Contact page. Each Inquiry will be sent to an email address that MochaCaramel can configure and all inquiries will also be stored in a Google Sheet for easy storage, access, and backup. Each form will have its own Google Sheet file. (I.E Form 1 has 10 entries and Form 2 has 30 Entries, there will be two Google sheet files, one will have 11 rows fills out and the second will have 31 rows filled out

3.2.2 Preconditions
Client goes mochacaramel.net

3.2.3 Basic Flow
Client Navigates to Categoru > Portolio
Client clicks on Button to book
Client fills out form

3.2.4 Alternative Flows
If user doesn’t wish to book and instead just wishes to inquire, they can fill out a form that is located in the 'About Us & Contact' page

3.2.5 Postconditions
Mochacarmael Responds

3.3 Use Case 3: Social Media Linking

3.3.1 Description
To allow clients easy frinctionless access MochaCaramel's other platforms. This will also allow greater chance of users sharing content to another prospective client. 

3.3.2 Preconditions
Client goes mochacaramel.net

3.3.3 Basic Flow
Client clicks on social media icon
Reroutes to respecting application/website

3.3.4 Alternative Flows
NA

3.3.5 Postconditions
NA

4. Non-Functional Requirements

4.1 Performance
The website should load within 3 sec under normal server conditions.

4.2 Security
User data should be encrypted during transmission.
Strong authentication mechanisms should be implemented.

4.3 Usability
The website should be intuitive and user-friendly.
It should be accessible for users with disabilities.
Photo tile should fill the entire screen

4.4 Compatibility
The website should be compatible with the latest versions of major browsers (Chrome, Firefox, Safari, Edge).
It should be responsive and work on mobile devices and tablets.

5. System Architecture
The entire platform is structured under Squarespace's architecture

6. Data Flow Diagram
NA

7. User Interface Mockups
https://www.mochacaramel.net/

8. Appendices

8.1 Glossary
[Include a glossary of terms and acronyms used throughout the document.]

8.2 References
Squarespace user guides: https://support.squarespace.com/hc/en-us
Squarespace forums: https://forum.squarespace.com/?_ga=2.104978752.2133973364.1694646486-1327308208.1690214996