Coffee & Tea Bliss is a fictional café and tea shop, a small family business located in San Bernardino, California. As a beverage brand, I aimed to create a peaceful environment for customers who appreciate a calm space to focus on their tasks while enjoying their favorite drinks.
Type: CSUSB Student Project
Role: Marketing Researcher, Graphic Designer, UX/UI Researcher & Designer
Timeline: January — May 2023
Tools: Procreate, Adobe Illustrator, Adobe Photoshop, Adobe Dimension, Figma
The purpose of this project is to practice establishing a startup and designing a coffee and tea brand, along with its product line. It provides me with the opportunity to take on various roles as a startup business owner, user researcher, and designer. This experience is valuable for developing skills in a real-world business context. The focus of my project is a coffee and tea beverage.
Solution
"Coffee & Tea Bliss" is a name I came up with for a beverage business that serves both coffee and tea drinks. Landing in San Bernardino would be advantageous due to the high traffic and the variety of coffee and tea businesses available to students at California State University, San Bernardino. These establishments provide a convenient and calm space for students to complete their schoolwork while interacting with friends in a lively environment. It also gives college and working professionals a quick option for on-the-go orders that fit their busy schedules.
Marketing Research
I conducted marketing research among the target audience and competitors, focusing on demographics and persona development, and analyzed product sales and services, branding and packaging design, web presences, product line management, and business-to-consumer communication.
I used a persona to understand customers' pain points and frustrations better, and to identify the right demographics in San Bernardino, as part of my efforts to target the audience effectively.
My audience consists of a diverse mix of individuals, including full-time and part-time college students, alumni, and both college professionals and working professionals with 9-5 schedules. The demographic focuses on all neutral genders aged 18 to 60. Many prefer quiet spaces and usually make quick, convenient orders near their workplaces and schools.
The Strategy
I have developed a plan that includes creating a logo design and brand identity, developing a beverage product line with corresponding packaging, and building a ten-page responsive website that customers can access and make purchases through desktop, tablet, and mobile devices.
The foundational layer of the visual strategy emphasizes light, brightness, naturalness, and cleanliness. This approach creates an eco-friendly atmosphere and fosters a calm environment. Additionally, the visual strategy incorporates patterns and natural elements to infuse the space with coffee and tea aromas.
The Coffee & Tea Bliss logo incorporated a coffee bean and a tea leaf suspended above the rim of a coffee mug. This design effectively symbolizes the act of preparing and enjoying a cup of coffee or tea. I used the logo elements (coffee bean and herbal tea leaf) as a pattern, featuring the logo and its components, including a coffee bean, leaf, and mug.
Packaging Design
The dieline template for tea packaging includes two sections: the outer and inner sections. I sketched it first, then refined it in Illustrator. Both sections will be glued together to create a single packaging form.
Images below:
1) Outer section: Auto Lock Tea Box Dieline
2) Inner section: Tea Cube Box Dieline
Three Compositions of Web Presences
For this project, I designed a 10-page responsive web presence in Figma, creating desktop, tablet, and mobile compositions. My visual direction focused on an earthy, eco-friendly aesthetic that feels warm, inviting, and modern. I used a clean layout, generous white space, and a nature-inspired color palette to keep the interface visually calm while maintaining clarity and usability across all breakpoints.
Each composition must include the homepage, landing page, product pages, and seven additional pages of my choice for a total of ten pages. In terms of ten pages for my project, I wanted to include home, about, shop, menu, brew guides, contact, FAQ, customer profile, cart review, and how-to-brew guides for a Moka pot (from the brew guides page).
Each page features images of beverage product mockups that compose my logomark, product information, instructions for various types of coffee makers, a consumer profile, and online shopping options.
Tablet Web Presences
Mobile Web Presences
