Bloom Valley Nursery Web Design

Table of Contents

• Introduction
  • Color Palette & Logo Choice
  • Font Color Choice
  • Typography Choice
• Wireframes
• Website Structure & Content
  • Homepage
  • Gallery Page
  • About Us Page
  • Community Events Page
• Website Design & Styling
  • Overall Design
  • Accessibility
  • Table 1: Contrast Ratio
  • Responsive Web Design
• Website Functionality
• Website Data Storage
• Customization
• Screenshots of Rendered Pages
  • 1. Homepage Screenshots
  • 2. Gallery Screenshots
  • 3. About Us Screenshots
  • 4. Community Events Screenshot
• Description of Issues & Lessons Learned
  • Current Issues
  • Previous Issues Fixed
  • Major Redesign & Project Overhaul

Introduction

Client name: Bloom Valley Nursery

The Bloom Valley Nursery website was designed to create an inviting, user-friendly experience for customers looking for plants, garden tools, and expert advice. With a focus on showcasing the products and services of the nursery, as well as providing information about community events and promotions, the website aims to be both functional and aesthetically aligned with the brand's core values. The design prioritizes accessibility, ease of use, and a clean, professional look, utilizing a color palette and typography that reflect Bloom Valley Nursery's commitment to nature and community.

Color Palette & Logo Choice

The color palette used for the website includes shades of green, light teal, mustard yellow, and white, carefully selected to evoke a sense of freshness, growth, and sustainability:

• #014038 (Canopy Green): Represents nature, stability, and trust.

• #96BAA0 (Meadow Mist): Evokes growth and freshness.

• #bdd4da (Sky Bloom): Adds a calming touch, reminiscent of tranquil nature scenes.

• #f0c06d (Sunlit Petal): Bright and inviting, used for call-to-action buttons and important links.

• #f7f7f7 (Cloudy Gray): Used for backgrounds to ensure clarity and readability.

The Logo color choice of #f0c06d (Sunlit Petal) was made to leverage the shape of the logo image in this color as a subtle comparison to the Sun. The aim was to strengthen the association of Bloom Valley Nursery with nature and environmental sustainability.

Font Color Choice

The font color choices are designed for high contrast to ensure readability, while also aligning with the natural and professional aesthetic of the brand:

• #00231c (Detritus Green): Used primarily for text, providing strong contrast against lighter backgrounds.

• #96BAA0 (Meadow Mist): Used for subheadings and accents, maintaining a soft but readable contrast.

Typography Choice

The typography used on the website was selected to create a balance between modern and rustic elements:

• A serif font is used for headings and key titles, reflecting the brand's nature-based, traditional feel.

• A sans-serif font is used for body text, offering clarity and readability across devices.

• The font sizes are responsive, with larger text for headings to create emphasis and smaller, easily readable text for body content.

Back to Top

Wireframes

1. Mobile Wireframes

2. Desktop Wireframes

Back to Top

Website Structure & Content

The website is structured to provide an intuitive and informative experience for users, with clear navigation options and easily accessible content related to Bloom Valley Nursery's offerings.

Homepage

• An auto-cycling Featured Items section showcasing items available for sale.

• A Shoppers Perks section highlighting promotions like discounts for new subscribers.

• A Testimonials section featuring customer feedback and testimonials that showcase Bloom Valley Nursery's commitment to its community.

• Navigation to the Gallery Page via category-specific links, allowing users to explore products by category.

Gallery Page

• A Product Carousel where users can scroll through product cards, each displaying an image, description, and price, along with an "add-to-cart" button.

• A View Cart Details button that opens a modal with shopping cart items, quantities, and a subtotal.

• Users can clear the cart or process their order directly from the modal. A confirmation dialogue ensures users are aware before clearing their cart or processing their order.

About Us Pages

• Information about Bloom Valley Nursery's mission, commitment to community, and business details (e.g., phone number and business hours).

• A feedback form that allows customers to submit inquiries and feedback, with input validation in place to ensure all fields are properly completed before submission.

Community Events Page

• An interactive Google Calendar embedded on the page to display upcoming events.

• Descriptions of Bloom Valley Nursery's own events, emphasizing the free and educational nature of the workshops and events held at the nursery.

• A section highlighting community-wide events in which Bloom Valley Nursery participates, along with details on how customers can inquire for more information.

Back to Top

Website Design & Styling

Overall Design

The overall design reflects Bloom Valley Nursery's brand values by using a combination of natural colors and modern typography. Sections are color-coded for clarity, with vibrant colors like Sunlit Petal for call-to-action buttons and softer colors for backgrounds, ensuring a visually appealing and functional design. The layout is intuitive, with clearly marked sections for the nursery's products, services, and community engagement.

Accessibility

Accessibility is the foundation on which the Bloom Valley Nursery website was built. To ensure the highest level of accessibility for all visitors, the design adheres to WCAG AAA Compliance standards for color contrast. High contrast between text and background, along with readable font sizes and intuitive navigation, enhances the user experience. Semantic HTML elements improve screen reader compatibility, and alt text is provided for all images. Additionally, interactive elements, such as buttons and forms, are fully keyboard navigable.

The table on the following page highlights key color choices used in the design and their respective contrast ratios when compared against #014038 (Canopy Green), demonstrating compliance with WCAG AAA standards.

Table 1: Contrast Ratio

Contrast Ratio Against #014038 (Canopy Green)

		#F7F7F7 (Cloudy Gray)	#96BAA0 (Meadow Mist)	#BDD4DA (Sky Bloom)
Contrast Ratio		10.94:1	5.49:1	7.59:1
Font <= 17pt		PASS	FAIL	PASS
Font >= 18pt -or- Bold Font >= 14pt		PASS	PASS	PASS
Icons and Actionable Graphics		PASS	PASS	PASS

Table Key Points:

• Navigation Bars:

  • The navigation bars at the top and bottom of each page use #014038 (Canopy Green) for text against #F7F7F7 (Cloudy Gray) as a background, ensuring high readability.

  • Current page indicators use #014038 (Canopy Green) against #96BAA0 (Meadow Mist). While this pairing does not meet AAA compliance for fonts 17pt or smaller, the current-page indicators are styled as 20pt bold, meeting AAA standards.

• Hover States:

  • On hover, interactive elements like the shopping cart button transition to #96BAA0 (Meadow Mist) against #014038 (Canopy Green). While this may not comply for smaller font sizes, it meets compliance for icons and actionable graphics.

• Headlines:

  • Throughout the site, #014038 (Canopy Green) is used as a font color against #BDD4DA (Sky Bloom) for section headlines. This contrast ensures both readability and a cohesive, intuitive design theme.

Responsive Web Design:

The Bloom Valley Nursery website incorporates responsive web design (RWD) principles to ensure it is functional and aesthetically pleasing across a variety of screen sizes and devices. The following elements were implemented to achieve RWD:

1. Flexible Layouts Using Relative Units:

   • The website utilizes CSS units like em, rem, and percentages for font sizes, margins, and paddings to create a scalable design. For example, the font size of the navigation links is defined in em to ensure it scales appropriately with the base font size set in the HTML. Similarly, the width of the main content area adapts to the screen size, ensuring proper utilization of available space without horizontal scrolling.

2. Media Queries:

   • Media queries were used to define styles for different screen widths. For instance:

     • The navigation bar adjusts to a stacked format on smaller screens, ensuring links remain readable and accessible.

     • Product cards in the gallery page dynamically resize and rearrange from a horizontal layout to a grid-like structure for smaller devices to maintain usability.

3. Responsive Images:

   • All images, including product images and the logo, use the max-width: 100%; height: auto; rule to ensure they scale proportionally and never exceed the width of their parent containers. This prevents layout breaking on smaller screens while maintaining image quality.

Back to Top

Website Functionality

1. Navigation Bar:

• The navigation bar appears at the top and bottom of each webpage, providing consistent and intuitive access to the website's main sections. It highlights the current page with a distinctive style, improving the user's sense of location within the website.

• The navigation links are fully responsive, adjusting size and layout for smaller screens. Hover effects enhance usability by visually indicating interactable elements, and the links are keyboard-accessible for users with mobility impairments.

2. Subscribe Feature:

• The newsletter subscription form validates email input to ensure users provide a properly formatted address. Upon successful submission, a custom modal appears, confirming the subscription with a thank-you message.

• This feature is accessible and responsive, with the form scaling down and maintaining usability on smaller screens. The modal uses clear, high-contrast text and an easily dismissible "OK" button.

3. Add to Cart Feature:

• On the gallery page, users can add products to their shopping cart by clicking an "Add to Cart" button within each product card. The button dynamically updates the session storage to reflect the addition of the selected item.

• A custom modal confirms the item has been added to the cart, improving feedback and user experience. The feature ensures session persistence, so cart contents remain available even if the user navigates to a different page.

4. View Cart Feature:

• Users can view their cart by clicking either the "View Cart Details" button or the shopping cart icon located at the top of every webpage. This opens a custom modal displaying all items in the cart, including their quantities, prices, and the subtotal.

• The modal provides options to clear the cart or process the order. Confirmation dialogs ensure the user's intent before these actions are finalized. All updates to the cart are reflected in real time without requiring a page refresh.

5. Contact Us Feature:

• The feedback form on the "About Us" page validates all user inputs, ensuring that the name, phone number, email, and message fields are properly filled out before submission.

• Input validation prevents SQL injection by stripping special characters from the message field and sanitizing all inputs.

• Upon successful submission, a custom modal confirms the form was sent. This feature demonstrates accessibility and responsiveness, as the form is fully functional across devices and screen sizes.

Back to Top

Web Data Storage

The Bloom Valley Nursery website uses web storage methods, including sessionStorage and localStorage, to manage and preserve user data during interactions. These methods allow the website to provide a seamless experience by temporarily or persistently storing data on the client-side browser.

1. Shopping Cart Feature:

The shopping cart leverages sessionStorage to dynamically manage cart contents throughout the user's session. Key aspects of this implementation include:

• Storing Items in the Cart:

  • When a user clicks the "Add to Cart" button, the item data (e.g., name, price, and quantity) is added to the cart stored in sessionStorage. If the item already exists in the cart, its quantity is incremented.

  • Data is saved in JSON format, enabling efficient manipulation of the cart's structure and content.

• Retrieving Cart Contents:

  • The sessionStorage cart data is read and rendered in a custom modal when the user clicks the "View Cart Details" button. The cart is displayed in real-time, including item names, quantities, and a subtotal.

• Clearing the Cart:

  • Users can clear the cart by selecting the "Clear Cart" option. The sessionStorage data is removed, and the modal is refreshed to reflect the empty cart.

• Processing the Order:

  • When the "Process Order" button is clicked, sessionStorage data is read, and a receipt number is generated. After confirmation, the cart data is cleared, and a thank-you message is displayed.

Using sessionStorage ensures that cart data is only available during the current browsing session, preserving user privacy while maintaining functionality.

2. Contact Us Feature:

The feedback form on the "About Us" page uses localStorage to persist user submissions temporarily. Key functionalities include:

• Storing Form Data:

  • When the form is submitted, user input (name, email, phone number, and message) is validated using JavaScript. Valid data is then stored in localStorage to ensure it is preserved for review, even if the page reloads or the user navigates away temporarily.

• Preventing SQL Injection:

  • The message field strips any potentially harmful characters and sanitizes the input before storing or processing it.

• Submission Confirmation:

  • After submission, the form fields are cleared, and a custom modal confirms successful submission. LocalStorage data can be accessed later by the website administrators for follow-up.

Using localStorage ensures user data persists beyond the current session, facilitating communication and operational follow-ups.

Back to Top

Customization

The Community Events Page serves as the website's custom page, showcasing Bloom Valley Nursery's engagement with the local community. Features of this page include:

1. Interactive Google Calendar:

   • A Google Calendar embed provides an interactive way for users to view upcoming events hosted by the nursery and community. Users can navigate between months and click events for additional details.

2. Nursery Events Section:

   • This section highlights workshops and gatherings hosted at Bloom Valley Nursery. Each event is described in detail, with emphasis on the nursery's commitment to offering free educational opportunities.

3. Community-Wide Events Section:

   • A separate section lists events sponsored or partnered by Bloom Valley Nursery within the broader community. Descriptions include schedules and locations, encouraging user participation in local activities.

This page strengthens the nursery's community-focused image by emphasizing its role as both an educator and a supporter of local initiatives.

Back to Top

Screenshots of Rendered Webpages

1. Homepage Screenshots

Homepage:

Subscribe feature:

Subscribe feature input validation:

Back to Top

2. Gallery Screenshots

Gallery Page:

Shopping cart---Add Item:

Shopping cart---View Cart Modals:

Shopping cart - Process Order Modals:

Shopping cart - Clear Cart Modals:

SessionStorage (before processing order):

SessionStorage (after processing order):

Back to Top

3. About Us Screenshots

About Us page:

Contact Us form:

LocalStorage---after form submission:

Contact Us form---input validation:

Back to Top

4. Community Events Screenshots

Community Events Page:

Back to Top

Description of Issues & Lessons Learned

Current Known Issues

• Add-to-Cart Alert: I noticed while taking screenshots of the necessary components and functionalities of the Gallery Page that the alert which appears each time an item is added to the cart has reverted to the browser's default pop-up alert.

Previous Issues Fixed

• Font contrast problems: Adjustments were made to ensure all text has sufficient contrast against the background, improving readability for users with visual impairments.

• Functionality of the shopping cart: Issues related to data persistence in sessionStorage were resolved, allowing for proper display and manipulation of the cart items.

• Accessibility issues in navigation: The hover states of navigation links were adjusted to meet WCAG guidelines, ensuring clear interaction feedback for all users.

• CSS and JavaScript: An attempt to create a script that dynamically added shadows to elements based on their proximity to the logo was abandoned due to the redesign and time constraints. The new design and theme focused on simplicity and accessibility.

Major Redesign & Project Overhaul

• Approximately three weeks into the project, after running into problem after problem with the CSS and JavaScript aspects of the project, I decided to restart the website with a completely new design, theme, and approach to better align with the client's branding and goals while making sure accessibility was a genuine priority.

• Despite this major change, I successfully completed the entire overhaul in one week, ensuring the intended functionality of the original design was preserved while improving accessibility and visual appeal.

Back to Top