Checklist

Flordelisa Nicole De Vera

Sharmaine Banawa

Genina Claire Olego

Shayne Quijano

Documentation, AVP, Design, About Page and Additional Pages

Navigation, Product Information, Shop Page

Product Catalog, Home Page, and Product Details

Footer, Documentation, and Store Policy

Documentation, and Terms and Conditions

Roles and Tasking

Jul Vinluan

INTRODUCTION

The S.O.L.A.C.E. website is developed as an e-commerce platform designed to present and sell the ClimaBox, a climate-resilient and multifunctional storage solution. The website serves as the primary digital interface between the business and its customers, providing essential features such as product browsing, account registration, order tracking, and access to company policies.

It is structured to ensure ease of navigation, efficient transaction processing, and clear information delivery. The system integrates both frontend and backend components to support user interaction, data management, and overall functionality.

Additionally, the website reflects the organization’s commitment to sustainability and disaster preparedness by incorporating relevant content and promoting awareness alongside its products. Overall, the platform is designed to provide a reliable, organized, and user-centered online experience

MISSION

Our mission is to promote practical and sustainable solutions that help develop resilience directly at the household and community level. In return for this, we innovate and develop the ClimaBox as an eco-product which provides multiple functions, such as cooling, extending the heat retention period, organizing essentials, and as an emergency box in the event of a flood. The multipurpose nature of the ClimaBox ensures its usefulness in both daily life and extreme situations, providing preparedness and lasting value. We ensure economic and practical accessibility of the ClimaBox, serve local and regional markets, and remain committed to growth and financial sustainability. On the other hand, we also educate and inspire communities towards an eco-friendly and resilient lifestyle while acknowledging our employees as important contributors to our mission and impact

VISION

To create valuable and innovative ClimaBoxes that are durable, all-weather, and sustainable, serving as lifelong assets for everyday use while building climate resilience.

Home Page

The landing page of the SOLACE website is designed to present ClimaBox as a practical, visually appealing, and climate-friendly storage solution. The top section immediately captures user attention through a large hero banner that prominently displays the product. It also includes the brand logo, navigation menu, search bar, and social media icons, ensuring both branding and accessibility. The headline “Your Comfort in Every Climate” clearly communicates the brand’s message, while the “About Us” button provides users with a direct path to learn more about the company.

Below the hero section, users can explore featured product categories such as Valentine Edition, Pastel Edition, and Christmas Edition. Each category includes product images, short descriptions, and call-to-action buttons like “Shop Now” or “Coming Soon.” This section allows users to easily browse themed collections and discover both available and upcoming products.

The landing page also includes an informational section titled “What is ClimaBox?” which explains the product’s purpose and key features. It highlights that ClimaBox is a weatherproof, insulated, and floatable storage solution designed to protect essential items such as food, medicine, gadgets, and emergency supplies. This section emphasizes the product’s usefulness for households, schools, communities, and disaster preparedness.

Additionally, a video demonstration is included to show how floatable and functional the ClimaBox is in real-life situations. This enhances user understanding by providing a visual representation of the product in use.

Further down the page, a product display grid showcases various ClimaBox variants, colors, and prices. This allows users to visually compare options and identify products that match their preferences. Another visual section demonstrates the product’s portability and practicality, helping users imagine how it can be used in everyday and emergency scenarios.

The page also features a “Get in Touch” section, which includes a contact form where users can input their first name, last name, email, and message. This provides a direct communication channel for inquiries, concerns, or feedback.

Finally, the footer completes the landing page by offering essential information and navigation support. It includes social media icons for external engagement, copyright information, and important links such as Terms & Conditions and Privacy Policy. The brand slogan is displayed again in the center to reinforce identity and messaging, while contact details such as phone number and email address are provided for easy access. Overall, the footer strengthens communication, trust, and brand presence while improving user navigation.

The Policies section of the SOLACE E-Commerce Website is designed to provide transparency, protect user rights, and ensure that all transactions are conducted in a secure and organized manner. This section includes key legal and operational guidelines such as the Terms & Conditions and Privacy Policy, which are accessible through the footer of the website.

The Privacy Policy explains how user information is collected, used, stored, and protected. It assures customers that their personal data—such as names, email addresses, and contact details—are handled securely and only used for legitimate purposes like order processing and communication. This helps build trust and confidence among users when providing their personal information.

The Store Policy outlines the rules and procedures for ordering, payment, shipping, and returns within the SOLACE E-Commerce Website. It explains how orders are processed, the available payment methods, delivery timelines, and conditions for cancellations or refunds. This ensures a clear, smooth, and reliable transaction process while building trust between the business and its customers.

The Terms & Conditions outline the rules and responsibilities of both the business and its customers when using the website. It covers important aspects such as product purchasing, payment processes, order handling, cancellations, and delivery policies. This ensures that users clearly understand the procedures and limitations when engaging in transactions on the platform.

The shop page is designed to let users easily browse and view the available ClimaBox / Solace products. It presents a collection of items in a product grid layout, where each product is shown with a clear image, product name, and price. Because of this, users can quickly compare different designs, colors, and editions of the ClimaBox in one section.

From the page, users can see several product options such as themed editions and pastel-colored ClimaBox units. Each item is visually displayed in a clean card-style format, making the shop section organized and easy to scan. This helps users identify which product they are interested in before making a purchase decision

Store Page

Checkout/Add to Cart Page

This product page is designed to give users a complete view of a selected item before they decide to purchase it. In the example shown, the page highlights the Valentine Trio under the Valentine Edition, with a large product image, the product name, and its price clearly displayed. An Add to bag button is provided so users can quickly place the item into their cart. Beside the product image, users can also read the Product Info section, which explains the quality checks each ClimaBox undergoes, such as waterproof testing, floating capability inspection, and quality control assurance. The page also includes the available product dimensions, helping users understand the size options offered. Below the main product details, there is a short description that explains the purpose and appeal of the ClimaBox. It emphasizes that the product is made with quality materials, offers reliable performance, and comes in multiple colors, making it suitable both for personal use and as a gift. The page also contains a “You may also like” section, which recommends related products. This allows users to discover similar items, compare options, and continue browsing within the shop. A review section is also included, encouraging users to leave feedback and interact with the product page after purchase.

The shopping bag feature makes the buying process more convenient. Once a user clicks Add to bag, a sidebar appears showing the selected item, its image, name, price, and subtotal. This gives users a quick summary of what they are about to purchase. From there, they can continue to checkout, where they are asked to provide their contact and billing details. The checkout page also allows users to review their order summary, apply a discount code, and choose a payment method such as Bank Transfer or Cash on Delivery (COD). Before placing the order, users must agree to the Terms & Conditions, which adds an element of trust and confirmation to the transaction.

After the order is successfully placed, the website shows a confirmation message thanking the user for their order. This reassures them that the transaction has been completed and that their purchase has been received by the system. Altogether, the page does not only present the product visually, but also supports the full shopping experience by guiding users from product viewing, to cart review, to checkout, and finally to order confirmation.

The About Us page introduces the brand identity, background, purpose, and the people behind S.O.L.A.C.E. At the top of the page, users are welcomed by a strong visual banner that features the brand name, product images, and the tagline “Sustainable Optimized Living and Climate-Adapted Essentials.” This immediately communicates the company’s focus on sustainability, climate resilience, and practical household solutions. The page then presents Our Story, where visitors can learn about the background of S.O.L.A.C.E. It explains that the business is based in Quezon City and is committed to providing climate-resilient and sustainable household products in response to challenges such as flooding and extreme heat in the Philippines.

This section helps users understand the company’s foundation, goals, and the problem the product is designed to address. Another important part of the page is the Who are we? section, which highlights the company’s Mission and Vision. The mission explains the brand’s commitment to promoting practical and sustainable solutions that strengthen household and community resilience through the Climabox product. The vision, on the other hand, presents the long-term goal of creating innovative, durable, and all-weather storage solutions that serve as everyday essentials while supporting climate preparedness.

These sections help communicate the company’s values and long-term direction. The page also includes an Our Team section where users can see the members behind the brand. Each team member is shown with a photo and name, which adds credibility and creates a more personal connection between the business and its audience. This allows visitors to recognize the people responsible for developing and managing the project. In addition, the page contains a Get in Touch section with a contact form where users can enter their name, email, and message. This gives visitors a direct way to contact the company for inquiries, concerns, or feedback. Beside the form, supporting product visuals are included to keep the page visually consistent with the brand.

The page also provides extra navigation options through sections such as Documentation and AVP, which may allow users to explore more detailed information about the project and its development. These elements make the page not only informative but also useful for users who want to know more about the business and its progress.

About Page

Contact Us Page

The Contact Us page is designed to help users easily communicate with the company for any questions, concerns, or inquiries. At the top of the page, users are welcomed by a large header section with the title “Contact us” and a short message encouraging them to reach out through the website form or by email. This introduction makes the page feel approachable and reassures users that support is available. The main feature of the page is the contact form, where users can enter their name, last name, email address, and message. This allows visitors to send concerns, feedback, or inquiries directly to the business in a simple and organized way. The Submit button lets users send their message once they have completed the required details.

Below the form, the page includes a Frequently Asked Questions section. This part provides answers to common concerns such as what ClimaBox is, what items can be stored inside it, whether it is waterproof and floatable, the return or exchange policy, and how customers can contact the company. This section is helpful because it gives users quick information without needing to wait for a direct response, making the page more informative and convenient. The design of the page also remains consistent with the overall branding of the website.

It uses product-themed background visuals, a clean layout, and the same navigation bar found on other pages, allowing users to easily move between Home, Shop, About, and Help. Social media icons and the shopping bag icon are also visible in the header, giving users more ways to interact with the site.

The Admin/Manager page allows administrators to manage customer orders by displaying order status, product details, payment information, and customer data in one interface. It enables admins to track whether an order is fulfilled or paid, update payment status, create invoices, and access customer contact details. This page helps streamline order processing and ensures efficient management of transactions.

Admin/Managers Page