Meowshroom Tea

Capstone Project

For my semester-long capstone project, I created “Meowshroom Tea,” a mock herbal tea brand that sells dried mushroom and herbal blend tea bags online. I challenged myself to develop the brand’s identity (logos, designs) and a functional website from wireframes to high-fidelity prototypes.

meowshroom tea display

TAKEAWAYS

CHALLENGES: One key challenge was transitioning from basic HTML and CSS knowledge to building a full website from scratch, including JavaScript functionality. Through self-directed learning and problem-solving, I navigated technical hurdles and expanded my development skills, leveraging online resources to implement effective solutions.

NEXT STEPS:
- Implement a fully functional checkout system for seamless end-to-end order processing.
- Develop a backend account creation system to enhance user experience for returning customers.

These features are planned for a future update to ensure a polished and well-executed implementation.

TASK LIST


  • palette Design a logo and packaging for individual product units to enhance brand identity.

  • laptop_chromebook Develop a user-friendly website with a strong UX/UI, enabling seamless product selection and ordering.

  • database Implement a backend database to efficiently manage and process incoming orders.

  • campaign Strategize and executed a product launch, conducting market research to optimize performance and identify areas for improvement.

DESIGNS


BRAND IDENTITY: Meowshroom Tea is an artisanal mushroom and herbal tea brand. I went for a cozy, woodsy aesthetic, reflecting the “natural” vibe of mushrooms and herbal blends.

BRAND DESIGNS: Drawing inspiration from online mood boards and the competitive tea market, I created original illustrations and logos for Meowshroom Tea.

assorted mushroom flower oyster mushroom chamomile
logo color palette

PRODUCT DESIGNS

I refined these three box designs in Adobe Illustrator. Each product has its own color scheme and label to differentiate original blends, “energy boost,” and “sleep time” variants.

product design
product design
product design

BOX MOCKUPS

Early versions of the box designs, further refined in Illustrator.

box designs original
box designs energy
box designs sleep

STICKERSHEET

Sticker Sheet

ANIMATIONS

I created these animations with both CSS (for subtle on-page effects) and Adobe Photoshop (for more complex frame-by-frame designs).

cat running frames
cat running animation
rolling ball

LOW-FI WIREFRAMES

LOW FIDELITY WIREFRAMES
LOW FIDELITY WIREFRAMES
LOW FIDELITY WIREFRAMES
LOW FIDELITY WIREFRAMES
LOW FIDELITY WIREFRAMES

DOCUMENT OBJECT MODEL

I built this site using HTML, CSS, JavaScript, and PHP (for backend functionality). Below is a visual DOM map of the HTML structure:

dom visualizer

LOW-FI PROTOTYPES

LOW FIDELITY PROTOTYPES
LOW FIDELITY PROTOTYPES
LOW FIDELITY PROTOTYPES
LOW FIDELITY PROTOTYPES
LOW FIDELITY PROTOTYPES

HIGH-FI PROTOTYPES

HIGH FIDELITY MOCKUPS
HIGH FIDELITY MOCKUPS
HIGH FIDELITY MOCKUPS
HIGH FIDELITY MOCKUPS
HIGH FIDELITY MOCKUPS

RESPONSIVE DESIGNS

Since I built this site with a mobile-first approach, I ensured it also scales well on tablet and desktop.

DESKTOP

HIGH FIDELITY MOCKUPS

TABLET

HIGH FIDELITY MOCKUPS

MOBILE

HIGH FIDELITY MOCKUPS

THE WEBSITE

The website is currently hosted on a temporary server. Feel free to view it here!

HIGH FIDELITY MOCKUPS