Cup of Tea - Customer to Collaborator
Our journey with Cup of Tea began as passionate tea drinkers searching for a new local source after Teavana was acquired by Starbucks. Over the course of a year, we explored countless tea shops before stumbling upon a hidden gem tucked away in Clackamas, Oregon. From our very first visit, we were drawn in by the calm, welcoming atmosphere and the exceptionally knowledgeable staff. It quickly became our go-to spot, not just for premium loose-leaf tea, but also for connection and community.
Cup of Tea is a family-owned tea house offering a wide variety of loose-leaf teas sourced from around the world. Whether you’re sampling global teas, meeting friends for an event, or simply enjoying a peaceful afternoon, this cozy Clackamas gem invites you to slow down and savor the moment.
In late 2023, during a casual conversation, I mentioned to the owner that I’m a graphic designer. That sparked an exciting dialogue about the brand’s future. A few months later, I was invited to lead a full rebrand, beginning with the product labels and expanding into broader packaging design, a refreshed color palette, custom illustrations, and a website redesign.
Services
- Visual Identity
- Illustration
- Packaging Design
- Brand Collateral
- Website Design
- eCommerce
Visit Site
Cup of Tea - Customer to Collaborator
Our journey with Cup of Tea began as passionate tea drinkers searching for a new local source after Teavana was acquired by Starbucks. Over the course of a year, we explored countless tea shops before stumbling upon a hidden gem tucked away in Clackamas, Oregon. From our very first visit, we were drawn in by the calm, welcoming atmosphere and the exceptionally knowledgeable staff. It quickly became our go-to spot, not just for premium loose-leaf tea, but also for connection and community.
Cup of Tea is a family-owned tea house offering a wide variety of loose-leaf teas sourced from around the world. Whether you’re sampling global teas, meeting friends for an event, or simply enjoying a peaceful afternoon, this cozy Clackamas gem invites you to slow down and savor the moment.
In late 2023, during a casual conversation, I mentioned to the owner that I’m a graphic designer. That sparked an exciting dialogue about the brand’s future. A few months later, I was invited to lead a full rebrand, beginning with the product labels and expanding into broader packaging design, a refreshed color palette, custom illustrations, and a website redesign.
Services
- Visual Identity
- Illustration
- Packaging Design
- Brand Collateral
- Website Design
- eCommerce
Packaging Design: Telling a Story Through the Seasons
Before the rebrand, Cup of Tea relied on simple icon-based labels. These used a custom icon set, with each tea represented by a fruit or object placed inside the “U” of the word Cup. While a creative concept, these icons often felt disconnected from the brand’s theme. Many were clichéd or didn’t accurately reflect the tea’s flavor.
In early discussions, it became clear that the new packaging needed to capture the deeper meaning: the flow of Oregon’s four distinct seasons and the calm, grounding atmosphere of the shop itself. To bring that vision to life, we created a custom illustrated label system centered around a line-drawn Mt. Hood meadow. The artwork uses scanline-style strokes to create depth and texture, with three pine trees in the center and Mt. Hood rising in the background, a grounding, familiar landmark for locals.
Packaging Artwork
Tea Categories
There are nine core tea categories, each assigned a unique color and paired with a distinct illustrated moment. When viewed together, the collection forms a seasonal narrative, capturing the feeling of time passing, weather shifting, and nature evolving.
To further tie the system to the brand, each illustrated scene is masked within the silhouette of a tea cup. The flat top of the cup creates a natural space to showcase the logo. This layered visual identity brings cohesion to the packaging while celebrating the diversity of flavors within the Cup of Tea collection.
Packaging Artwork
Tea Categories
There are nine core tea categories, each assigned a unique color and paired with a distinct illustrated moment. When viewed together, the collection forms a seasonal narrative, capturing the feeling of time passing, weather shifting, and nature evolving.
To further tie the system to the brand, each illustrated scene is masked within the silhouette of a tea cup. The flat top of the cup creates a natural space to showcase the logo. This layered visual identity brings cohesion to the packaging while celebrating the diversity of flavors within the Cup of Tea collection.
Color System
Designed for Flexibility
To support a consistent brand experience across digital and physical touchpoints, two color palettes were developed for Cup of Tea.
- The primary palette is lighter and optimized for on-screen use and third-party printing, offering clarity and vibrancy across digital platforms and professionally printed materials.
- The internal-use palette is slightly deeper and specifically adjusted for the company’s in-store label printing equipment. While not an exact match to the primary palette, this version allows for more reliable color reproduction with the shop’s materials and print methods. Some colors naturally shift in tone due to equipment limitations, so the darker palette was intentionally celebrated to ensure consistency and visual balance in-store.
By creating this two-tiered system, the brand maintains visual cohesion across all customer touchpoints, from the website and gift sets to bulk labels and in-store displays, while respecting the technical needs of each environment.
Packaging: Front & Back
Label Infographics
The front label is intentionally split into two sections to accommodate the tea bag’s built-in viewing window. This allows customers to see the loose-leaf tea inside.
The back of each label uses a visual guide showing how to brew the tea. It covers steep time, spoon quantity, temperature, and cup size. The layout also includes ingredients, company info, and an icon. There are over 100 custom supporting icons to capture each tea category and flavor.
Packaging: Front & Back
Label Infographics
The front label is intentionally split into two sections to accommodate the tea bag’s built-in viewing window. This allows customers to see the loose-leaf tea inside.
The back of each label uses a visual guide showing how to brew the tea. It covers steep time, spoon quantity, temperature, and cup size. The layout also includes ingredients, company info, and an icon. There are over 100 custom supporting icons to capture each tea category and flavor.
Packaging
Bag Types
The new label system was designed to flex across different packaging formats. Pre-packed teas feature full-color illustrated labels and are sold online, in partner stores, and included in curated gift baskets.
For bulk purchases in-store, teas are packaged in brown pouches with a black-and-white printed label. These labels still incorporate the custom icons and product information, offering an eco-friendly solution that maintains brand consistency while extending the life of the packaging.
Packagaing
Bag Types
The new label system was designed to flex across different packaging formats. Pre-packed teas feature full-color illustrated labels and are sold online, in partner stores, and included in curated gift baskets.
For bulk purchases in-store, teas are packaged in brown pouches with a black-and-white printed label. These labels still incorporate the custom icons and product information, offering an eco-friendly solution that maintains brand consistency while extending the life of the packaging.
“Mark’s talents extend far beyond website development. He’s spearheading a complete reimagining of the labeling for our extensive selection of over 150 loose-leaf tea jars, crafting captivating retail packaging for store shelves, and devising a comprehensive marketing strategy for my shop. This endeavor demands meticulous attention to detail, and Mark has proven himself to be exceptionally adept in this regard. What truly sets Mark apart is his approachability and attentiveness…”
Susie S.
Cup of Tea Clackamas | Owner
A Functional & Visual Anchor
The Tea Wall
One of the first things customers see when entering the store is the tea bar, backed by a striking, color-coded wall of loose-leaf teas. Originally, the tea wall featured a dark, earthy color palette intended to reflect an eco-friendly, natural aesthetic.
As part of the rebrand, we introduced a brighter, more modern color system, assigning distinct hues to each of the nine tea categories. This not only revitalized the visual experience but also helped create a stronger brand presence within the space.
A Functional & Visual Anchor
The Tea Wall
One of the first things customers see when entering the store is the tea bar, backed by a striking, color-coded wall of loose-leaf teas. Originally, the tea wall featured a dark, earthy color palette intended to reflect an eco-friendly, natural aesthetic.
As part of the rebrand, we introduced a brighter, more modern color system, assigning distinct hues to each of the nine tea categories. This not only revitalized the visual experience but also helped create a stronger brand presence within the space.
Tea Wall: Loose Leaf
Jar Labels
Each jar now features a category icon, reinforcing the visual identity introduced in the packaging system. The hierarchy is simple: traditional teas are represented by a single consistent icon. Some traditional teas include an icon inspired by the Camellia sinensis plant, the botanical source of all true tea, while others use category-specific marks to maintain clarity.
Flavored teas feature different icons unique to each blend. This system creates a visual shorthand that makes it easier for customers to remember and return to the teas they love. The same icons appear across both the tea wall and product packaging, creating a seamless connection between in-store browsing and at-home use.
Tea Wall: Loose Leaf
Jar Labels
Each jar now features a category icon, reinforcing the visual identity introduced in the packaging system. The hierarchy is simple: traditional teas are represented by a single consistent icon. Some traditional teas include an icon inspired by the Camellia sinensis plant, the botanical source of all true tea, while others use category-specific marks to maintain clarity.
Flavored teas feature different icons unique to each blend. This system creates a visual shorthand that makes it easier for customers to remember and return to the teas they love. The same icons appear across both the tea wall and product packaging, creating a seamless connection between in-store browsing and at-home use.
Website Design
Bringing the Brand to Life Online
The original cup of tea website was functional. Customers could browse through hundreds of products and purchase their favorite teas. They could also signup for events. But the site didn’t capture the attention of the audience. It lacked storytelling, visual depth and a cohesive brand experience.
With the new design, our goal was to create a site that was visually immersive, intuitive to navigate, and rooted in the refreshed brand identity. Built around themes of nature with a modern twist, the site features custom organic layouts, layered negative space, and playful visual anchors. One of the standout features is the vertical slider homepage, which introduces the brand with motion and energy. As users scroll, the design plays with overlapping elements, subtle animations, and anchored shapes to guide the eye while leaving room to breathe.
The loose-leaf tea collection is presented in a staggered grid of color-coded buttons with matching category icons. A subtle parallax effect overlays a background pulled from the Herbal Tea label, reinforcing the brand’s illustrative style. Below, a carousel highlights upcoming in-store events, making it easy for visitors to engage with the local community. Further down the page, a series of call-to-action sections guides customers toward gift cards, teaware, and specialty products like Matcha.
The footer includes newsletter signup, contact information, and links to the latest blog posts, turning what’s often an afterthought into a useful hub for visitors.
Website Design: Category Pages
Navigating Products
On the previous Cup of Tea website, browsing for products could be confusing; users often found themselves stuck in loops or unsure how to explore the full range of offerings. To solve this, we built a clear, structured navigation system rooted in the updated category icon set and color palette.
Each tea category now features a dedicated landing section, introduced with a category icon, a representative image, and a short description that includes steeping guidance and tasting notes. Below, customers can browse teas within that category, displayed on color-coded backgrounds that visually reinforce their placement in the brand’s broader system.
To further clarify the shopping experience, the tea offerings were divided into two main groups:
- Traditional Teas, which include pure, single-origin teas with well-known profiles
- Flavored Teas, which are custom blends featuring added fruits, herbs, or spices
This restructured approach makes it easier for customers to browse, compare, and discover their favorite teas without confusion.
Web Design: Product Pages
Clean, Focused,
& Easy to Maintain
While the category sections use color coding to distinguish each tea type, the individual product pages take a stripped-down approach, using the brand’s core colors, black and the secondary tan, to create a more neutral, refined experience. This intentional shift simplifies the layout, keeps the focus on the tea itself, and makes it easier to update and manage new products over time.
Each page features clear product imagery, steeping instructions, ingredient details, and a short description. At the bottom, a “Related Products” section helps customers discover similar teas without having to return to the main menu, streamlining the browsing and buying experience.
View More
Projects
