chaiblend case study

tools used

Adobe XD, Photoshop, Illustrator, Whimsical, HTML, CSS, WordPress, Google Analytics, Google PageSpeed Insights, SEO Site Checkup, WAVE Accessibility Audit, Website Carbon Calculator, Namecheap Hosting, FileZilla

project overview

Chaiblend was developed as a major project for the MA Web Design & Content Planning programme. The project combines research, branding, UX design, illustrations and front-end development to create a fully functioning educational website dedicated to Indian chai culture.

The website acts as a curated digital resource that brings together chai recipes, cultural history, and ingredient health benefits in one place. By blending cultural storytelling with practical brewing guides, the platform aims to help users explore the traditions and wellness aspects of Indian tea.

The final outcome is a responsive website built using HTML, CSS, and WordPress with a custom theme for easier content management and future updates.

context

The project was inspired by the lack of reliable online resources explaining authentic Indian chai traditions. Many existing tea websites focus primarily on selling products or offering isolated recipes without providing deeper cultural context.

Chaiblend addresses this gap by creating a dedicated platform that educates users about chai’s origins, ingredients, brewing techniques, and wellness benefits.

The primary audience includes:

1. Tea enthusiasts in the UK

2. Health-conscious individuals

3. Home brewers interested in authentic recipes

work included

1. • UX research and competitor analysis.
2. • Content strategy and information architecture.
3. • Brand identity and visual design.
4. • Wireframing and prototyping.
5. • HTML/CSS front-end development.
6. • WordPress website development.
7. • SEO optimisation and analytics integration.
8. • Accessibility and performance testing.

design process

The project followed a user-centred design approach.

1. • Research: Initial research explored chai culture, flavour combinations, and user expectations when searching for tea-related information.
2. • Wireframing & Planning: Wireframes and user flows were created using Whimsical and Adobe XD to plan the website structure and navigation.
3. • Design & Prototyping: Visual layouts and prototypes were developed in Adobe XD, focusing on readability, cultural aesthetics, and intuitive navigation.
4. • Testing & Optimisation: The website was evaluated using performance and accessibility tools including Google PageSpeed Insights, Lighthouse, WAVE Accessibility Audit, SEO Site Checkup, and Website Carbon Calculator to ensure usability, optimisation, and sustainability.

key learnings

1. 1. CMS Adaptability: Learned to handle unexpected platform crashes (like WordPress Gutenberg editor errors) by quickly pivoting to stable alternatives like the Classic Editor plugin.
2. 2. Speed & Performance: Learned to optimize heavy media files by converting them into lightweight WebP and SVG formats, helping the site achieve a 99 on desktop and 78 on mobile on Google PageSpeed Insights.
3. 3. Sustainability in Web Design: Learned eco-friendly web development practices, leading to an A+ carbon rating that is cleaner than 94% of tested pages globally.
4. 4. Prototyping & Layouts: Learned to reduce project risk by following a step-by-step design workflow - testing layouts in Adobe XD and HTML/CSS before building in WordPress.
5. 5. Accessibility (UX): Gained hands-on experience using automated testing tools to find and fix contrast and usability errors, bringing the site up to WCAG AA compliance.
6. 6. Testing & Tools: Using tools like WAVE, PageSpeed, Lighthouse, and Carbon Calculator gave me a data-driven way to measure and improve the quality of the website.
7. 7. SEO Foundations: Configured structured JSON-LD recipe markup, sitemaps, and optimized metadata to build search engine discoverability from the ground up.