Anwar Montasir

Web Development + UX Design + Instruction

Case Study:
The Judith Lights

The Judith Lights, formatted for desktop and mobile.

visit project

Project Overview

In 2017, New York City indie pop band The Judith Lights released their debut album Avenue. As guitarist, co-writer of the songs, and producer of the album, I had an obvious personal investment in this project.

By 2017 the band was no longer rehearsing, recording, or performing as I had left Brooklyn and moved across the country. As the site wouldn’t be evolving past the initial launch, the goals were simple:

  • Reinforce album branding.
  • Direct user to places they could hear the album (Bandcamp, Spotify, Apple Music)
  • Present song lyrics and album credits.

Album Artwork

My main source of inspiration in designing the album cover was the Facebook flyers I had designed for the band’s live gigs, combining imagery chosen by the band’s singer, Lora Grillo, with various color and light experiments in Photoshop’s layers palette.

The Judith Lights, flyer one The Judith Lights, flyer two The Judith Lights, flyer three The Judith Lights, flyer four

I’ve no doubt the album’s color palette was inspired by the work of Peter Saville, the first graphic designer I was ever really aware of thanks to his iconic sleeves for bands like New Order.

The cover began with the band’s favorite photograph from a session with photographer Drew Wiedemann, taken at Greenpoint’s Newton Creek Nature Walk.

The Judith Lights, photo by Drew Wiedemann

The album would not be printed as physical media, with the cover existing for most users as a tiny square in Spotify. I wanted vibrant and colorful, and while I attempted a few type treatments, the image made a bolder statement without.

The Judith Lights, Avenue album cover

I can’t recall if the influence of Stephen Sprouse was conscious, but the bold outlines around the figures are certainly reminiscent.


Competitive Analysis

Do bands especially need a website these days? Or is a presence on social media like SoundCloud enough? This was a question I had in mind when starting my competitive analysis.

A Google search of “best band websites” resulted in experiences that were entirely too complex and busy. Instead, I decided to investigate bands that impacted the band’s sound as direct competitors, and to search for minimal, colorful sites as indirect competitors.

view competitive analysis matrix (PDF) »


Strategy

As mentioned before, there was (unfortunately) no need for a long-term strategy. As long as the links for listening to the album were prominent and the album's branding was reflected, the site would be doing its job.


Exploratory Sketches

I sketched a variety of layouts, keeping the above goals in mind.

The Judith Lights, layout sketch one The Judith Lights, layout sketch two The Judith Lights, layout sketch three The Judith Lights, layout sketch four The Judith Lights, layout sketch five

Prototypes

Using InVision, I made medium-fidelity wireframe prototypes of two layouts based on my sketches. The first divided the lyrics and credits into panels, and involved scrolling horizontally on the desktop, though the mobile layout remained vertical.

The Judith Lights, wireframe prototype one

My second idea involved keeping the lyrics in one column for small screens, two columns for medium screens, and three columns for large screens. The album cover and listening links were far more prominent visually on the large screen in this version.

The Judith Lights, wireframe prototype two

I sent each layout to a handful of users, and based on their feedback I determined that the second version was easier to understand and better achieved my stated goals.


Conclusion

Measuring the success of the design was a bit difficult. The band got a tiny bit of press–the track “Blue Movie” was featured on emergingindiebands.com, and the album received a favorable review at Divide and Conquer–and few plays on independent radio, but mostly remains under the radar.

As of this project I had not yet created my lesson on Responsive Type, and the project likely would have benefited from this experience. The body copy is 13px, smaller than the minimum size recommended by sites like The Responsive Website Font Size Guidelines.