Overview

Shouts of Joy is a digital media hub dedicated to bass musicians celebrating both upright and electric bass artistry. The goal was to design a platform that bridges storytelling, education, and inspiration through interactive content experiences.

Design Challenge

Create a responsive, intuitive website that feels editorial yet approachable, helping visitors explore videos, gear reviews, and musician features seamlessly. The experience needed to balance musical heritage with a modern digital rhythm.UX & Interaction Goals

• Guide users through content discovery with minimal friction.
• Encourage engagement with both visual (video) and written (article) content.
• Design clear pathways between categories while maintaining a lightweight and immersive feel.

My Role

I led interaction design decisions from wireframes to live prototype, focusing on usability and flow.

Responsive Behavior: Designed breakpoints for mobile and tablet, ensuring consistent readability and rhythm.

Simplified Navigation: A persistent sidebar menu with a high-contrast orange background improves wayfinding and accessibility.

Card-Based Video Layout: Modular content cards allow quick scanning and intuitive clicking behavior.

Microinteractions: Hover states and subtle shadow transitions enhance feedback without visual overload.

Design System

Color Palette:
Vibrant orange (energy + creativity) anchored by white and black (balance + clarity).

Typography:
Clean sans-serif fonts selected for digital readability and editorial presence.

Layout:
Grid-based rhythm inspired by the structure of musical composition, with balanced spacing, visual beats, and clear call-to-actions.

Experience Highlights

• Smooth user flow between videos and editorial content
• Stronger brand recognition through consistent use of motion and color
• Lightweight yet immersive visual system
• Intuitive access to the latest content without cognitive overload

Outcomes

• A cohesive digital identity aligned with the rhythm and emotion of bass culture.

• Increased content engagement and time-on-site through improved visual hierarchy.

• Clearer information architecture, reducing friction between browsing and reading.

See the results