Expert UI/UX Audit — March 2026

Truffle Nation Complete Website Audit

A comprehensive UI/UX analysis covering the homepage, Delhi & Hyderabad landing pages, reviews, blog index, blog articles, contact, and hire pages — evaluated against WCAG accessibility standards, design system best practices, conversion optimization, and performance benchmarks.

7.2
Overall Score
4.7
Accessibility
8.0
Best Page (Blog Article)
5.0
Worst Page (Reviews)
The content quality is exceptional — among the best for an Indian education brand. The visual design is clean and professional (Level 5 on the UI quality scale). The two areas dragging the score down are accessibility (systemic failures across every page) and cross-page consistency (each page feels like it was built independently rather than from a shared design system).
01
Visual Hierarchy & Layout
What's Working
  • Strong 60-30-10 color rule: Cream/off-white backgrounds (60%), burgundy/white cards (30%), gold accents on CTAs and badges (10%) — textbook execution
  • Homepage section flow is logical: Hero → Social Proof → Campuses → Programs → Story → Differentiators → Testimonials → Graduates → Blog → CTA — follows progressive disclosure
  • Blog articles have excellent heading hierarchy (H1 > H2 > H3 > H4) with sticky sidebar TOC and reading progress bar — Level 5 quality
  • Clamp-based responsive typography (clamp(2.2rem, 5vw, 3.2rem)) is a smart move for fluid scaling
Issues Found
IssueSeverityLocation
Inconsistent hero patterns across pages — Homepage uses content+video grid, Delhi uses content+form, Hyderabad uses content+form but different badge stylingMediumSite-wide
Homepage vs. landing page nav mismatch — Homepage nav has "Book a Demo" CTA; Delhi/Hyderabad switch to "Apply Now"; phone numbers differHighNavigation
Graduate cards lack visual weight parity — Some have photos, some don't. Creates uneven visual rhythmMediumHomepage
Blog listing has no category filtering or search — 40+ articles dumped in a single scrollHigh/blog/
Reviews page is a video wall — 62 video embeds with near-identical cards and repetitive titles creates scroll fatigueHigh/reviews/
Recommendations
  • Standardize hero component — Create one reusable hero pattern (headline + subhead + stats + CTA) that all pages inherit
  • Add category tabs/filters to blog — Career Guide / Business / Courses / Techniques as filterable tabs
  • Restructure reviews page — Add featured text-quote carousel, categorize videos by outcome, add pagination
  • Unify phone number across all pages to one primary number
02
Typography
What's Working
  • Playfair Display (serif) + Inter (sans-serif) is a classic, well-paired combination — serif for headings conveys authority/trust, sans-serif for readability
  • Type scale is well-defined: Display (2.6-3.2rem) > H2 (1.65rem) > H3 (1.15rem) > Body (0.95rem) > Caption (0.78rem)
Issues Found
IssueSeverity
Body text at 0.95rem is slightly undersized — For a content-heavy educational site, 1rem (16px) should be the floorMedium
Line height inconsistency — Ranges from 1.12 to 1.7 across sections without clear logicMedium
Caption text drops to 0.7rem — Below 12px minimum. Fails accessibility for low-vision usersHigh
No font-display: swap detected — Risk of FOIT if Playfair Display loads slowMedium
Inconsistent letter-spacing on uppercase badges (0.05-0.08em) — pick one valueLow
Recommendations
  • Set body minimum to 1rem (16px) — the universal readability floor
  • Standardize line heights: headings 1.2, body 1.6, captions 1.4
  • Never go below 0.75rem (12px) for any visible text
  • Add font-display: swap to all @font-face declarations
03
Color & Contrast
What's Working
  • Brand palette is distinctive and cohesive: Burgundy (#6D2E46) + Cream (#ECE2D0) + Gold (#C4893B) — premium, warm, food-appropriate
  • Dark gradient hero sections create strong visual anchors
  • Glassmorphism testimonial cards (rgba backgrounds, backdrop-blur) add depth without clutter
Critical Contrast Failures
Gold (#C4893B) on cream (#ECE2D0) — Contrast ratio ~2.4:1, needs 4.5:1 for WCAG AA. This appears on module labels and badges site-wide.
Issues Found
IssueSeverity
Gold on cream background — Ratio ~2.4:1 (needs 4.5:1)Critical
rgba(255,255,255,0.7) text on burgundy — Translucent white reduces contrast unpredictablyHigh
rgba(255,255,255,0.85) for secondary text — Below 4.5:1 on some gradient backgroundsMedium
Recommendations
  • Replace gold-on-cream with gold-on-dark or darken gold to #9E6B2F for light backgrounds (achieves 4.5:1)
  • Stop using rgba for text — Use solid color values that guarantee contrast
  • Test every text/background combo with a contrast checker — at least 10 combinations currently fail WCAG AA
04
Components & Consistency
What's Working
  • Card components are well-structured — All follow badge > image > title > description > meta > CTA pattern
  • CSS custom properties for theming enable maintainability
  • Hover states are consistent — translateY(-2px to -4px) with shadow elevation
Issues Found
IssueSeverity
CTA button styles diverge across pages — Homepage text links, Delhi solid buttons, Blog gold buttons, Hire different variantHigh
Badge inconsistency — "Most Popular", "Sold Out", "Bestseller", "Featured" all use slightly different stylingMedium
Footer differs between homepage and landing pages — Homepage has full 4-column footer; landings have minimal centered footerHigh
Form patterns differ — Contact standard form, landing multi-step form, hire yet another variantMedium
No design token for border-radius — Cards use var(--radius-card) but buttons/badges use hardcoded valuesLow
Recommendations
  • Create unified button system: Primary (solid burgundy), Secondary (outline), Tertiary (text link with arrow)
  • Standardize badge component: One visual treatment with content-only variations
  • Unify footer — All pages should share the same comprehensive footer
  • Build one form component configurable for contact/qualification/hiring use cases
05
Accessibility (WCAG)
Weakest Area of the Site
Accessibility is the single biggest area of concern. Systemic failures exist across every page, affecting screen reader users, keyboard-only users, and people with visual impairments.
All Issues
IssueSeverityImpact
Missing alt text on most images — Curriculum images alt="", hero images no alt, graduate photos inconsistentCriticalScreen readers get no content
No ARIA labels on interactive elements — FAQ accordions lack aria-expanded, form radios lack labels, modals lack role="dialog"CriticalKeyboard/screen reader users blocked
No skip-to-content link on any pageHighKeyboard users tab through entire nav
No visible focus states — Only hover states defined in CSSHighKeyboard navigation invisible
62 YouTube iframes on reviews page with no captions/transcriptsHighDeaf users get no content
Color-only differentiation in form qualification stepsMediumColor-blind users may miss selection
Emoji used as functional icons in USP sectionsMediumScreen readers read emoji names literally
No prefers-reduced-motion media queryMediumVestibular disorder users affected
Sub-44pt touch targets on caption-level links and badgesMediumMobile tap accuracy
Recommendations
  • Add meaningful alt text to every content image. Decorative images get alt=""
  • Add aria-expanded, aria-controls to all FAQ accordions
  • Add role="dialog", aria-modal="true" to all modals
  • Add :focus-visible styles that match hover styles
  • Add skip-to-content link to all pages
  • Add @media (prefers-reduced-motion: reduce) to disable transforms/transitions
  • Provide text transcripts or summaries for video testimonials
06
Responsive & Mobile
What's Working
  • Three clean breakpoints (900px, 768px, 600px) handle major layout shifts well
  • Mobile CTA bar (fixed bottom) on landing pages is smart for conversion
  • Grid-to-stack patterns are well-implemented (4-col > 2-col > 1-col)
Issues Found
IssueSeverity
No tablet breakpoint between 600-900px — iPad gets awkward layoutsMedium
Blog sidebar disappears entirely on tablet — TOC navigation lost without replacementMedium
Reviews page loads 62 iframes on mobile — Devastating for performanceCritical
Multi-step form on mobile — 380px card may overflow on 320px screensMedium
No lazy loading on images — Curriculum section loads 15 images eagerlyHigh
Recommendations
  • Add loading="lazy" to all below-fold images
  • Reviews page: Load 6-9 videos initially, add "Load More" button
  • Add collapsible TOC for blog articles on mobile
  • Test form card on 320px viewport — may need max-width: 100% fallback
  • Use iframe loading="lazy" for all YouTube embeds
07
Conversion & UX Flow
What's Working
  • Multi-step qualification form filters leads before asking for contact info — reduces form abandonment
  • Lead scoring system (threshold ≥11) is sophisticated and well-implemented
  • Multiple conversion paths: form, phone, WhatsApp — covers all user preferences
  • Social proof placement (stats bar after hero) follows BJ Fogg model — motivation before action
  • Blog CTAs woven naturally into educational content — not disruptive
Issues Found
IssueSeverity
No clear path from homepage to conversion — Hero CTAs are "Delhi Campus >" and "Hyderabad Campus >" links, not direct "Book a Demo" or "Apply"High
Homepage lacks a form — Visitor must click through to campus page, adding frictionHigh
"Sold Out" badge with no waitlist CTA — Dead-end for interested usersMedium
Contact form validation is submit-only — No real-time inline validationMedium
No WhatsApp widget despite it being primary communication channel in IndiaMedium
FAQ placement at bottom of landing pages — Users with objections won't scroll that farMedium
Recommendations
  • Add lead capture form to homepage — Even a simple "Which campus?" + name/phone
  • Add a "Join Waitlist" CTA for sold-out programs
  • Add a floating WhatsApp button (bottom-right) — standard UX pattern in India
  • Move FAQ higher on landing pages or add anchor link in hero
  • Add inline form validation with clear error/success states
08
Performance & Technical
Issues Found
IssueSeverity
GTM, Google Ads, and Facebook Pixel load synchronously in <head> — blocks rendering, hurts LCPHigh
No image optimization — No WebP/AVIF format usage, no srcset for responsive imagesHigh
62 YouTube iframes on reviews page — Each iframe loads ~500KB+ of resourcesCritical
No preconnect hints for Google Fonts, YouTube, or analytics domainsMedium
Multiple Facebook Pixel IDs across pages — potential tracking conflictsMedium
Recommendations
  • Defer all analytics scripts: use async or load via GTM with DOM Ready trigger
  • Add <link rel="preconnect"> for fonts.googleapis.com, youtube.com, etc.
  • Convert images to WebP with <picture> fallbacks
  • Replace YouTube iframes with lite-youtube-embed (click-to-load thumbnails)
  • Audit and consolidate Facebook Pixel IDs
09
Content & Information Architecture
Standout Strength
The blog is genuinely excellent — 40+ deep-dive articles with real data (salary figures, fee comparisons, ROI calculations), proper heading structure, 12-22 min reads. Best-in-class for an Indian education brand.
What's Working
  • 40+ deep-dive blog articles with real data — salary figures, fee comparisons, ROI calculations
  • Graduate stories are specific — Names, roles, companies, batch dates. Not generic fluff
  • Curriculum disclosure is comprehensive — 15 modules with descriptions on landing pages
Issues Found
IssueSeverity
Homepage and landing pages tell different stories — Homepage = "India's #1" (thought leader); Landings = "Become a baker in 6 months" (direct response)Medium
No pricing visible anywhere — "How much are fees?" is FAQ #1 but answer is gated behind formMedium
Reviews page has no text testimonials — 100% video. Users who can't watch (public transport, hearing impaired) get nothingHigh
Recommendations
  • Add 5-10 pull-quote text testimonials to the reviews page
  • Consider showing fee ranges (not exact) on program cards to reduce friction
  • Align messaging tone — pick one positioning and use consistently as primary message
10
Page-by-Page Scorecard
Homepage — 7.0
Design
8
Content
9
A11y
5
Performance
7
Conversion
6
Delhi Landing — 6.8
Design
8
Content
8
A11y
4
Performance
6
Conversion
8
Hyderabad Landing — 6.6
Design
8
Content
7
A11y
4
Performance
6
Conversion
8
Reviews — 5.0
Design
6
Content
7
A11y
3
Performance
3
Conversion
6
Blog Index — 7.2
Design
7
Content
9
A11y
6
Performance
7
Conversion
7
Blog Article — 8.0
Design
9
Content
10
A11y
6
Performance
7
Conversion
8
Contact — 6.8
Design
7
Content
7
A11y
5
Performance
8
Conversion
7
Hire Bakers — 7.0
Design
7
Content
8
A11y
5
Performance
8
Conversion
7
11
Priority Fix Order
P0 Fix This Week (Critical)
  • Add alt text to ALL images across all pages
  • Fix gold-on-cream contrast failures (WCAG AA violation)
  • Add lazy loading to YouTube embeds on reviews page (performance emergency)
  • Stop using rgba values for readable text — use solid colors
  • Add ARIA labels to FAQ accordions, modals, and form inputs
P1 Fix This Month (High)
  • Unify navigation, footer, and CTA patterns across all pages
  • Add homepage lead capture form
  • Add blog category filtering/search
  • Defer analytics scripts (GTM/Pixel/Ads)
  • Add focus-visible states for keyboard navigation
  • Add skip-to-content link
  • Add text testimonials to reviews page
P2 Fix This Quarter (Medium)
  • Convert images to WebP with <picture> fallbacks
  • Add floating WhatsApp widget
  • Standardize button/badge component system
  • Add "Join Waitlist" for sold-out programs
  • Add collapsible mobile TOC for blog articles
  • Consolidate Facebook Pixel IDs
  • Add prefers-reduced-motion media query

Bottom line: The content quality is exceptional — among the best for an Indian education brand. The visual design is clean and professional (Level 5 on the UI quality scale). The two areas dragging the score down are accessibility (systemic failures across every page) and cross-page consistency (each page feels like it was built independently rather than from a shared design system). Fix accessibility first — it's both the right thing to do and a legal requirement under India's Rights of Persons with Disabilities Act.

Audit conducted March 2026 — 8 pages analyzed • WCAG 2.1 AA standard • 10 design dimensions scored