Crafting a Bold, Performance-Driven Burger Experience for Burgerstrefa
Redesign Burgerstrefa’s website to reflect its premium burger brand identity while ensuring seamless mobile navigation and fast load times for users browsing on-the-go.
Challenge:
- Visual Clutter: Overuse of animations distracted from core content (menu, location).
- Mobile Navigation Issues: Hamburger menu caused high bounce rates on smaller screens.
- Heavy Asset Load: Unoptimized hero videos slowed performance (especially on 3G).
Solution:
- Streamlined the interface with a minimalist dark theme to highlight food photography.
- Built a custom WordPress theme with vanilla JavaScript (reducing jQuery dependency).
- Prioritized performance optimization for low-bandwidth users.
Category
Food & Beverage
Clients
Burgerstrefa
Location
Poland
Project Duration
2024-2025
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.
