TheTeaShop

Founded by Reginald Tan & Jerel Sim in 2021, The Tea Shop is passionately dedicated to tea appreciation and sharing our knowledge about tea culture.

We aim to share the health benefits of tea drinking with our customers and aspire for our customers to appreciate our specially curated tea blends.

Our 2 product lines allow YOU to choose between a strong, aromatic kick or a delightful, blossoming infusion.

Disclaimer

• The Tea Shop is a mock business idea and is NOT a licensed business and tea distributor
• Please note that The Tea Shop was developed in ID ASG1 & ASG2, referred to as TTS v1 & TTS v2 respectively
• Do not confuse the GitHub repositories for TTS v1 and TTS v2, known as "the-tea-shop" and "TheTeaShop" respectively

Links to Website

• Link To Website (TTS v2)
• Link to Old Website (TTS v1, for comparison purposes only)

Website Pages, Features & APIs

Pages

• Home Page
  • News & Promotions
  • Discover
• About Us
  • About TTS
  • Corporate Responsibility
  • Our Team
• Products Catalogue
  • The House Specials: Earl Grey
  • The House Specials: English Breakfast Tea
  • The House Specials: Matcha Tea
  • Floral Fantasy: Bloom
  • Floral Fantasy: Reverie
  • Floral Fantasy: Bliss
  • The Tea Gift Pack: 4 packets of 3 teas
  • The Classic: 2 packs of 3 teas
  • Bouquet of Dreams: 1 pack of 3 teas
• Contact Us Page

Features & Functions

• Reactive & Website Interactiveness throughout the website
• Reactive social media icons
• Mapbox iFrame
• Responsiveness for the following:
  1. Large Screens: 2560px
  2. Desktops: 1440px
  3. Laptops Screens: 1024px
  4. Tablets Screens: 768px
  5. Mobile Screens: 480px

APIs Implemented

• Mapbox API (Jerel)
  • We used the Google Maps API to import an iFrame into the website to show the location of our physical store
  • This API also allows the user to obtain directions by clicking the button in the top-left hand corner
• Swiper API (Reginald)
  • Swiper is a JavaScript library that creates modern touch sliders with hardware-accelerated transitions by offloading graphic-intensive transitions to create smoother visuals.
  • This API was used to display all of our products in a consolidated manner on our home page
  • It was implemented by creating a new file swiper.js and initialising swiper with key-value-pairs for the animation data

Technologies Used

1. HTML, CSS
   • We used HTML & CSS to format, build (HTML) and style (CSS) TTS v2
2. JavaScript
   • We used JavaScript to build functions in our website as listed above in the Features & Functions section
   • Some examples of this includes the scroll up button that appears after scrolling down for a set number of pixels and the accordian for FAQs
3. Adobe XD
   • We used Adobe XD to design the wireframe and plan the UI overhaul regarding TTS v1 (The Tea Shop website from ASG1 built by Reginald)
4. Adobe Photoshop
   • We used Adobe Photoshop to alter the renders based on the requirements for this website (cropping, resolution control, scaling of image, colour balance)
5. Visual Studio Code
   • We used VS Code as our IDE for building TTS v2 (The Tea Shop built for ASG2)
6. Webfont Generator
   • We imported our font CSS files into Webfont Generator and used it to import them into styles.css
7. Notion
   • We utilised Notion as a project management tool, making use of their Kanban board and Timeline visuals to track our progress and keep each other updated on individual task progress
   • Notion was also used for our lecturer to check-in on our progress from Day 1 and ensure constant and consistent progress

Design

Colour Scheme

• Orange Dark (#E68D19)

• Orange Strong (#FF9E1B)

• Orange Light (#FBB03C)

• Pantone Black (#101820)

• Grey Strong (#3D3D3D)

• Grey Medium (#777777)

• Grey Light (#DFDFDF)

• White (#FFFFFF)

Typography (San Serif)

• Avenir Next
  • Avenir Next LT probold
  • Avenir Next LT proBdCn
  • Avenir Next LT prodemi
  • Avenir Next LT prodemiCn
  • Avenir Next LT proitalic
  • Avenir Next LT proregular

Font Control

• h1 font size:

• h2 font size:

• h3 font size:

• h4 font size:

• Large screen font size:

• Desktop font size:

• Laptop font size:

• Tablets font size:

• Mobile font size:

• font medium:

• font semi bold:

• font header bold:

• heading font: 'Avenir Next lt Proregular', sans-serif

• body font: 'Avenir Next lt Proregular', sans-serif

Products

• The House Specials
  • Earl Grey
  • Matcha
  • English Breakfast Tea
  • The Classic Tea Gift Pack (3 packs - 1 of each)
  • The Tea Gift Pack (12 packs - 4 of each)
• Floral Fantasy
  • Reverie (Lavender, Earl grey)
  • Bloom (Rosehip, Rose Petals, Lemon Balm)
  • Bliss (Linden Flowers, Vanilla bean extract)
  • Bouquet Of Dreams (3 packs - 1 of each)

Credits & Resources

Thank you to Dylan Chong & Yap Yi Xuan for producing the renders and collaborating with us on this mock business idea

People

1. Dylan Chong (The House Specials, Logo)
2. Yap Yi Xuan (Floral Fantasy)

Links & Resources

1. Google Drive with Resources
2. Notion for Project Management
3. Fonts
4. What is Organic Tea?
5. Environmentally-friendly Packaging