Uncle Iroh's Tea Shop

Documentation of the Development Process

This website was created to expand a small business to a larger online client base. It's meant to showcase what the shop sells, help lead customers to the store, make customers more aware of the store existence, and allow non-local people to buy products from the store. While the website is static at the moment, with JavaScript and database integration added to the websites bones set up with this HTML, these goals are possible. By the website's creation itself, new potential customers can search for and find this website and store through online searches. The "Shop" menu shows what the store sells and for how much. It also allows customers to buy those products directly from the website and have the items shipped to them so that way they do not have to be local to the physical store. There is also a "Contact Us" page that allows customers to call, email, and direct message the store so that way complaints, compliments, and suggestions can be made with the store to help with further improvement.

Defense of the Final Product

The overall color scheme is tied to earth because of the premise of a tea shop and also due to the name that I gave the tea shop. The colors are rome green, taupe, orange, and beige. I have a preference for things being centered so all of the pages have the content centered in the main container. I also like clearly divided sections so there are borders utilized around the page's content unless the content is already itself bordered. The font used across the site is Avenir, a clean looking sans-serif font that I thought looked smooth as easy to read from a distance. Each page has the navigation header at the top with the home page link embedded in the logo picture. The buttons on the "Contact Us", "Shop", and "Cart" pages are all really similar in looks to help with cohesive theme.

Let's start looking at specific pages of the site. The main home page has a quick intro of the business, the shop's best sellers, and the location and hours of the physical store at the bottom. This should be the main information that the customer is looking for and thus is easy to access. The best sellers section of the home page is a link to the "Shop" tab for faster access. The "Contact Us" page has the business' phone number, email, and a form for the customer to leave a direct message. The information is broken up by headers that help the eye travel down the page. Next, the "Types of Tea" page has a table that breaks down the different types of teas and their proven benefits. This is not directly related to the products sold by the business but the information relates to the general products and is helpful to the user. The style of the table is the same as the table that is on the "Cart" page. The rows have alternating colors to help with readability. The header at the top and left side of the table are also my accent orange color to denote them different from the table information. The "Cart" page table is for the items that the customer has selected to buy from the "Shop" page. The "Shop" page has multiple containers, one for each item. These containers currently have placeholder images but would hold an image of each individual product in the final look. The item title and price are also listed in large font so that the customer has no struggle to see and understand what the product is.

Opportunities for Improvement and Growth

As stated above, I would like to integrate a database and JavaScript into the website. This would make the website interactive and functional. For instance, when a user clicked on the "Add 1 to Cart" button on the "Shop" page, a listing for that item would show up on the "Cart" page. Also, the direct message feature in place on the "Contact Us" page needs this integration to actually store the information from the form for the business to look into. Also, the Shop page can be populated from a database/inventory of items, so that adding and removing stock would be easier for the business. JavaScript and a database would make the website upkeep, maintenance, and editing easier for the business to keep up with by removing so much hard-coded information. Once the business is more established on the web, it can use user compliments to help advertise their site by incorporating the accolades on the main home page. Another improvement and also page addition is the page where the customer would actually checkout and pay for their items.