Luva
Luva is a personalized tea app that transforms tea drinking into a wellness experience by combining health data and real-time weather insights.
By integrating with Apple Health, Luva analyzes metrics like sleep, hydration, and activity to recommend tailored tea options that align with individual wellness goals.
The app’s sleek, calming interface and interactive features, such as step-by-step brewing guides, ensure an immersive and user-centric experience. Designed to bridge the gap between tradition and technolog, Luva reimagines tea as more than a beverage—it's a personalized ritual for better living.
Project Scope
This project involved designing and building the homepage of Luva, focusing on seamless interactions, sleek animations, and responsive design.
Our goal? To make Luva's first impression unforgettable—blending sleek design with its mission for personalized wellness.
Custom GSAP animations ensured seamless transitions across devices.
Technical Complexities
Ensuring the animations performed smoothly across devices required precise optimization.
Lazy-loading assets, managing Webflow’s limitations, and combining custom code with native functionality were critical to achieving high performance without compromising visual fidelity.
Personalizing a Timeless Ritual
Tea is a universal symbol of wellness, but modern tea experiences remain impersonal. While many seek tea for health benefits like better sleep or focus, they face generic options that don’t address individual needs. This highlights a gap: how can technology bridge tradition and innovation to create a tea experience tailored to each person’s lifestyle and goals?
Transforming Tea Into Personalized Wellness
Luva reimagines tea as more than just a beverage—it’s a personalized wellness tool. By integrating with Apple Health, Luva analyzes metrics like sleep, activity, and hydration to recommend teas that align with individual goals, such as better sleep, enhanced focus, or relaxation. Additionally, real-time weather data ensures the suggestions feel timely and relevant, adapting to hot or cold days. Luva bridges the gap between tradition and innovation, offering a sleek, user-friendly experience that transforms tea into a ritual of personalized care.
☕️ Personalized Tea Recommendations
Luva uses Apple Health data to tailor tea suggestions to individual wellness goals. By analyzing sleep patterns, activity levels, and hydration metrics, the app recommends teas that promote better sleep, focus, relaxation, or energy. Each suggestion is thoughtfully curated to align with the user’s unique needs.
❄️ Weather-Adaptive Suggestions
The app integrates real-time weather data to provide tea options that suit the day’s conditions. Whether it’s a cozy chamomile for a chilly evening or a refreshing iced green tea on a hot afternoon, Luva ensures every cup feels perfectly timed and appropriate.
🔥 Sleek and Intuitive Design
Luva’s interface is designed to feel like an extension of the tea experience—calm, inviting, and effortless. From onboarding to daily recommendations, the app’s visual flow simplifies the user journey while maintaining a sense of elegance and tranquility.
🍵 Guided Brewing Experience
Luva goes beyond recommendations by offering step-by-step brewing instructions tailored to each tea. Users can follow precise guides to achieve the perfect flavor, elevating tea preparation into a ritual of care and mindfulness.
🪵 A Bridge Between Tradition and Innovation
Luva redefines tea culture by merging timeless tradition with cutting-edge technology. By connecting health insights, weather patterns, and a passion for tea, it delivers a uniquely modern yet deeply personal experience for users.
Global Tea Consumption Trends
Tea is one of the most widely consumed beverages in the world, yet its personalization for wellness remains untapped. This sets the stage for an innovative product like Luva.
Key Metrics
- 7.3 billion kilograms: Global tea consumption in 2023, projected to grow to 8.3 billion kilograms by 2029.
- 4 billion gallons of tea consumed annually in the U.S., highlighting the massive audience potential.
Wellness Market Growth
The wellness industry’s exponential growth reflects a consumer focus on personalized health solutions, positioning Luva at the intersection of tea and health tech.
Key Metrics
- The global wellness app market is valued at $11.27 billion in 2024, projected to grow at a 14.9% CAGR, reaching $26.19 billion by 2030.
- Rising demand for apps that offer tailored wellness experiences, such as fitness tracking, mental health support, and health data integration.
Demand for Personalization
Modern consumers want products and services that are tailored to their unique needs, making Luva’s ability to recommend tea based on health data and weather a standout feature.
Key Metrics
Competitive Market Gaps
Current tea apps focus primarily on e-commerce and lack dynamic personalization, creating an opportunity for Luva to fill a significant niche.
- Less than 15% of tea apps incorporate health insights or real-time environmental factors into their recommendations.
- Few major competitors currently combine tea recommendations with platforms like Apple Health.
Luva redefines how we interact with wellness, bridging data-driven personalization and elegant design to create a digital experience that feels both intuitive and essential.
Interface System / Adaptability
Luva's interface unifies diverse wellness data into a cohesive experience. Each component adapts to show different content types - from weather predictions to sleep metrics - while maintaining consistent visual patterns. The system's modular cards and notifications flex naturally to accommodate varying content lengths and data types, ensuring users always know where to find their personalized tea insights.
Visual Language
Luva embraces a minimal yet premium aesthetic, anchored by a signature emerald gradient that evokes both wellness and sophistication.
The color system intelligently shifts between states - emerald for core interface, amber for energy, indigo for sleep metrics - while maintaining visual harmony.
Glass-morphism effects and subtle shadows create depth without sacrificing the clean, modern interface. Every visual element serves the goal of making complex health data feel elegant and approachable.
Color Palette: Creating a Sense of Wellness
The color palette was designed to reflect the brand's core values of wellness and tranquility.
"Wellness Haze" provides a subtle gradient, evoking a sense of calm and balance. "Forest Green" grounds the design with a natural and modern aesthetic, while "Off White" introduces a clean and minimalistic touch to enhance readability and focus.
These colors work in harmony to guide users through the website, ensuring a visually cohesive and inviting experience.
Logo - Minimalistic Precision in Branding
The logo encapsulates the essence of Luva's philosophy: simplicity, clarity, and balance. The bold, clean typography ensures legibility while projecting confidence and modernity.
The carefully maintained spacing and alignment contribute to a harmonious design that reflects professionalism and elegance.
The use of Forest Green from the brand palette strengthens the association with wellness and natural harmony. The grid system emphasizes symmetry, maintaining a cohesive visual identity across various applications and mediums.
Layout Choices and Design
The website layout was structured to ensure seamless navigation and clarity.
Each section was strategically designed to highlight key information while maintaining an intuitive flow.
By balancing visual hierarchy with modern aesthetics, the design guides users effortlessly through the content, enhancing engagement and understanding.
Hero: Brew What Your Body Needs
The hero section sets the tone for the website, emphasizing personalization and wellness.
With the tagline "Brew What Your Body Needs," it captures the essence of Luva’s mission: creating tailored tea experiences for every user.
A supporting subtext invites visitors to explore a new daily wellness routine, while a prominent call-to-action button ensures immediate engagement. The gradient background reinforces the brand's calming and modern aesthetic.
GSAP: Bringing Words to Life
The homepage features GSAP-powered text animations and interactive elements that guide users effortlessly.
Parallax scrolling effects and hover states bring the interface to life, making every interaction feel intentional and immersive.