2025 | ART DIRECTION & LEAD DESIGN

Jendrix Rock Bar

Digitalizing a Rock & Roll Landmark.

Mobile views presenting home page and events page view

Overview

Goal: Create an immersive digital experience for a local landmark.
Context: Pro-bono project focusing on community engagement and event promotion.
The Edge: Merging bold rock aesthetics with high-performance technical feasibility.

The Strategy

From Analog Chaos to Digital Harmony

Challenge:

Rock fans need authenticity, not just a menu. How do we translate 30 years of bar smoke and vinyl into 600 pixels?

Approach:

Using your illustration background as a strategic tool, not just decoration.

The Pain:

Disjointed event info, outdated visual identity, and zero mobile engagement.

The Solution:

A centralized event hub, neon-infused UI architecture, and a mobile-first experience built for high performance and seamless venue navigation.

From Sketch to Screen:

Solving Event Density

Managing event density was the core UX challenge. Through iterative wireframing, I prioritized a tiered hierarchy that delivers key info in under 2 seconds, regardless of device.

Engineering Meets Aesthetics

Technical Feasibility of Aesthetics (Performance)

Websites with strong branding and abundant multimedia content often suffer from performance issues. My Frontend Development experience allowed me to specify solutions such as the use of optimized image formats (WebP), the implementation of lazy loading, and a lightweight component architecture, ensuring the bold aesthetic was fast and efficient.

Prototyping Dynamic Interactions

I used high-fidelity prototypes to simulate the site's dynamic interactions (e.g., transitions, band carousels), which are essential for the immersive experience. This guaranteed that the visual design was optimized for a clean code implementation and good navigation performance.

Technical Feasibility of Aesthetics (Performance)

Prototyping Dynamic Interactions

Visual Recipe: Branding meets Scalability

Transforming the bar's neon aesthetic into a structured design system. Custom iconography and a high-contrast palette ensure accessibility without losing the rock & roll essence.

Electric Chill

SURFACE / #C5EFFF

Electric Chill

SURFACE / #C5EFFF

Voltage Blue
GLOW / #10BEFE

Velvet Rose
SURFACE / #FF9DD4

Rebel Pink
GLOW / #FE259B

Haze Mist
SURFACE / #E0B6E8

Voodoo Purple
GLOW / #9709B3

Amber Glow

SURFACE / #FFBF91

Amber Glow

SURFACE / #FFBF91

Marshall Orange
GLOW / #F47D28

Design System Logic: Surface tokens prioritize WCAG readability over dark backgrounds, while Glow tokens manage the neon aesthetic and stroke intensity for brand reinforcement.

Deep Purple FOUNDATION / BG #1E0B22

Design System Logic: Surface tokens prioritize WCAG readability over dark backgrounds, while Glow tokens manage the neon aesthetic and stroke intensity for brand reinforcement.

Electric Chill

SURFACE / #C5EFFF

Voltage Blue
GLOW / #10BEFE

Amber Glow

SURFACE / #FFBF91

Marshall Orange
GLOW / #F47D28

Velvet Rose

SURFACE / #FF9DD4

Rebel Pink
GLOW / #FE259B

Haze Mist
SURFACE / #E0B6E8

Voodoo Purple
GLOW / #9709B3

Deep Purple FOUNDATION / BG #1E0B22

Impact & Project Reflection

Business Outcome

The redesign successfully translated the bar's physical energy into a high-performance digital hub. The centralized event architecture now allows for 1-click event discovery, drastically reducing friction for users looking for real-time information on mobile.

Key Learning

This pro-bono project was a masterclass in balancing creative freedom with technical constraints. I learned to leverage custom illustration not just as an aesthetic choice, but as a strategic asset to build brand authority in a crowded local market.