Elevating Fine Dining Digital Presence for The Pearl Restaurant
Redesign The Pearl Restaurant’s website to reflect its luxury dining experience through elegant aesthetics while ensuring intuitive reservation flow and mobile responsiveness.
Challenge:
- Outdated Visual Identity: Existing design didn’t match the restaurant’s premium atmosphere
- Clunky Reservation System: Multi-step process led to abandonment
- Poor Mobile Experience: Critical elements (menu, booking) were hard to access on phones
Solution:
- Created a sophisticated color themed interface with cinematic food photography
- Developed a one-click reservation widget with OpenTable integration
- Implemented performance-optimized animations for subtle elegance
Category
Fine Dining / Hospitality
Clients
The Pearl Restaurant
Location
Dublin, Ohio
Project Duration
2023-2024
My Role
Lead UI/UX Designer & Frontend Developer
2. Design & Development Highlights
UI/UX Strategy:
- Dynamic Menu Presentation:
- Designed an interactive card system for burger listings, with hover-triggered ingredient animations.
- Added dietary filters (vegan, gluten-free) using CSS-driven toggle switches.
- Mobile-First Navigation:
- Replaced the hamburger menu with a sticky bottom bar for instant access to the menu, location, and cart.
- Implemented gesture-friendly swipe controls for image galleries.
- Micro-Interactions:
- Created a custom loader mimicking dripping sauce to entertain users during load times.
Technical Execution:
- Custom WordPress Integration:
- Developed a lightweight theme using Underscores (_s) framework for better control over templates.
- Integrated Advanced Custom Fields (ACF) for easy menu updates by Burgerstrefa’s staff.
- Performance Wins:
- Compressed hero videos into WebM/MP4 formats with lazy loading, reducing page load time by 50%.
- Eliminated render-blocking scripts by inlining critical CSS and deferring non-essential JS.
- Accessibility Enhancements:
- Added ARIA labels for screen readers and ensured color contrast met WCAG 2.1 standards.
3. Results & Impact
- User Engagement: Average session duration increased by 35% post-launch.
- Performance: Achieved a PageSpeed Insights score of 88/100 on mobile (previously 42).
4. Technical Details
- Frontend: Vanilla JavaScript, CSS Grid, Sass.
- Backend: Custom WordPress theme, ACF Pro, WP Rocket.
- Hosting: LiteSpeed Server with QUIC.cloud CDN.
- Launch Date: April 2024.
