Areo Website Redesign System Requirements Document

1. Introduction

The Areo Website Redesign project aims to revamp the existing website of AR Engineering Office OÜ, which provides engineering and design consultancy services. The redesign will focus on creating a professional, modern, and mobile-responsive website that effectively showcases the company's services and projects.

2. System Overview

The redesigned Areo website will serve as a digital platform to present the company's engineering and design consultancy services. It will feature a bilingual interface, detailed service descriptions, project portfolios, and contact functionalities. The website will be built on a user-friendly CMS, preferably WordPress, to allow easy content management.

2a. Source Content Inventory

• Fields: Klaasfassaadid, Klaaspiirded, Projekteerimine, Välisfassaadid, Alumiiniumfassaadid, Trepid, Terrassid, Talveaiad, Trepipiirded, Rõdupiirded, Element fassaadid, Tootejoonised, Klaaskatused, Varikatused
• Media References: Each field is accompanied by an image.
• Company Name: AR Engineering Office OÜ
• Domain: areo.ee
• Service Focus: Engineering and design consultancy specializing in facades, structural elements, and detailed engineering drawings.
• Language: Content appears in Estonian; English version accessible via lang=en parameter in URL.

3. Functional Requirements as Story Points

• As a Visitor, I should be able to view the website in both English and Estonian.
• As a Visitor, I should be able to access company, services, and contact pages.
• As a Visitor, I should be able to view drawing portfolios for steel, concrete, timber, and aluminium.
• As a Visitor, I should be able to view 3D/BIM model examples.
• As a Visitor, I should be able to view references and completed projects.
• As a Visitor, I should be able to fill out a contact and quotation-request form.
• As an Admin, I should be able to manage website content easily through a CMS.
• As a Visitor, I should experience a professional, modern, and mobile-responsive design.

4. User Personas

• Visitor: Individuals seeking engineering and design consultancy services, including potential clients and partners.
• Admin: Personnel responsible for managing website content and ensuring its accuracy and relevance.

5. Core User Flows

• Visitor selects language -> Navigates to service page -> Views service details and portfolios -> Fills out contact form for inquiries.
• Admin logs into CMS -> Updates content -> Publishes changes -> Verifies website functionality.

6. Visuals Colors and Theme

• primary: #0056b3 (a professional blue reflecting trust and expertise)
• primary_light: #4d88ff (a lighter tint for hover states)
• secondary: #ffcc00 (a complementary yellow for highlights)
• accent: #e60000 (a strong red for CTAs and active states)
• highlight: #ff9900 (an orange for notifications and active indicators)
• bg: #ffffff (a clean white background)
• surface: #f2f2f2 (a light grey for cards and panels)
• text: #333333 (a dark grey for primary text)
• text_muted: #666666 (a softer grey for secondary text)
• border: #cccccc (a subtle grey for borders)

7. Signature Design Concept

The homepage will feature an interactive 3D/BIM model showcase using @react-three/fiber and @react-three/drei. Visitors can rotate and zoom into models of engineering projects, providing an engaging way to explore the company's capabilities. Hovering over different parts of the model will reveal additional information and project details.

Landing Hero Motion Brief

The landing hero will feature a dynamic animation where engineering blueprints transform into 3D models. Using motion/react, the animation will start with a flat blueprint that gradually rises and morphs into a detailed 3D structure, symbolizing the company's expertise in turning designs into reality. This loop will last 10 seconds and offer interactive elements like zoom and rotation for deeper engagement.

8. Interaction Model & Motion Direction

• Intended Interaction Model: Animated
• The landing page will feature moderate scroll-triggered reveals and hover transitions, enhancing user engagement without overwhelming them.
• Each section will have a distinctive mechanic, such as morphing SVGs or kinetic typography, to maintain interest and provide a unique browsing experience.

9. Non-Functional Requirements

• The website must be mobile-responsive and perform well on various devices and screen sizes.
• Basic SEO practices must be implemented to improve search engine visibility.
• The website should be tested thoroughly before deployment to ensure functionality and performance.

10. Tech Stack

• Frontend: React for Web
• Backend: WordPress (as the CMS)
• Database: MySQL
• Local Orchestration: Docker
• Server-Side Orchestration: Kubernetes

11. Assumptions and Constraints

• The existing text, images, and project materials will be provided by the client.
• The CMS must be easy to manage, with WordPress as the preferred choice.
• The website must support both English and Estonian languages.

12. Glossary

• CMS: Content Management System
• SEO: Search Engine Optimization
• BIM: Building Information Modeling
• 3D Model: Three-dimensional representation of an object

This document outlines the requirements and design concepts for the Areo website redesign, ensuring a comprehensive and engaging online presence for AR Engineering Office OÜ.