Web Design/Development & UX/UI Design Case Study: Terracotta Cafe & Bakery

Project Goals

Create a premium digital presence reflecting the cafe's authentic Colombian heritage and artisanal quality.
Increase online orders and menu views through intuitive calls-to-action and seamless navigation.
Showcase the complete culinary experience from freshly baked goods to Colombian coffee in an engaging, scroll-driven format.
Build local SEO authority targeting Orlando and St. Cloud audiences searching for Colombian food and coffee.

Challenges

Problem: Standing out in Orlando's competitive cafe market while maintaining authentic Colombian identity.
Technical Challenge: Balancing rich animations and visual storytelling with fast load times and mobile responsiveness.
User Need: Creating an immersive experience that conveys warmth and quality while making online ordering effortless.

Solutions

Interactive Storytelling: Scroll-triggered animations, deck slider for menu items, and dual-language support for diverse customers.
Visual Showcase: Split-column pastry gallery, video reveals, and card-based product displays to highlight food quality.
Technical Implementation: GSAP animations, responsive design with mobile/tablet adaptations, and structured data for SEO.

Process

Discovery: Analyzed local competition, identified key customer personas (locals, Orlando visitors, Spanish speakers).
Design System: Developed warm color palette (#F9F1E9, #4A3728, #BC6C5C) with Playfair Display and DM Sans typography.
Development: Implemented smooth scroll animations, interactive navigation, and responsive breakpoints for all devices.
Optimization: Added schema markup, meta tagging, and performance optimizations for SEO and user experience.

Key Features

Immersive Hero: Animated text reveals with dual-language support and clear CTAs.
Product Gallery: Interactive card slider showcasing 8 menu categories with visual storytelling.
Social Integration: Instagram feed display and review widget for social proof.
Business Tools: Integrated online ordering, menu viewer, and location finder with modal map.

Impact

Brand Elevation: Transformed digital presence from basic to premium, reflecting the cafe's quality.
User Experience: Created an engaging journey that guides visitors from discovery to conversion.
Technical Foundation: Built a scalable, maintainable codebase with comprehensive SEO and accessibility features.
Business Alignment: Direct integration with existing ordering systems and social media for cohesive brand management.

Reality AI - Presentation Generator

An AI-powered tool designed to help educators create engaging, tailored slide presentations based on specific topics, grade levels, and educational objectives.

View

Hüsler Website Redesign

Transforming an outdated website into a modern, user-friendly product.

View

1X NEO Robot - Landing Page Website

Creating awareness to the 1X NEO Robot and its capabilities.

View

Memory Maker Application

An app aimed to help increase Alzheimer's patients' memory strength, preserve memories and help caretakers.

View

NAVIGATE

Project Overview

Project Goals

Challenges

Solutions

Process

Key Features

Impact

Business Discovery

Interactive Design

Hero Section

Displaying Menu Options

Video Scroll Animation

Google Reviews & Instagram Integrations

Outcomes & Takeaways

Web Design Work

Reality AI - Presentation Generator

Hüsler Website Redesign

1X NEO Robot - Landing Page Website

Memory Maker Application