Square headshot of Jill McCracken inset on a mustard yellow backgroundSquare headshot of Jill McCracken inset on a mustard yellow background

Synopsis

Who

Award-winning soul singer-songwriter Jill McCracken

What

Website to improve content management while increasing fan engagement

How

Creating a destination for resourceful visitors and avid fans alike

Impact

A platform celebrated for its nature and ability to nurture

Jill McCracken is an award-winning singer and songwriter producing in a raw, retro soul style that plucks threads of nostalgia to serve her authentic feelings. Her work has been featured regionally and nationally, with multiple solo and band-backed tours delivering performances that fill venues and hearts. In her own words, “I’ve always been a lot: big ideas, high standards, and a loud voice.”

The brief

Jill was frustrated with the circumstances of her current web channel and how, as both an artist and a brand builder, it had painted her into a box. Managing its content was difficult, its capabilities limiting, and its experience—an essential factor for her art—was entirely disconnected in scope and standard to her state of craft. The goal then: delivering a website that unlatched Jill’s creative trap while offering a compelling venue for visitors to discover.

Mobile view of the About hero section, atop a photo of an arid field and skySpotlight of the music library pairing content, with title, subtitle, and sketch image on a light tan background

Defining a destination

When we started the project, initial surveying revealed that musicians’ websites tended to be simple waypoints bouncing visitors away to more helpful places, such as for ticket sales and merch eCommerce. We decided Jill’s should be a destination: an alluring garden where fans can step into a world under her control.

Essential to this strategy was creating a platform for content not available anywhere else. A music library was built to house Jill’s select discography, including lyrics, artist statements, and our idea of “pairings” where Jill’s whims, suggestions, and situations for each track were included as journal notes and sketches.

The CMS system itself is constructed for simplicity and flexibility, breaking down update tasks with clear actions and language to give Jill or her team time back to focus on the content creation itself. The site includes automated population for BandsInTown postings, simplifying ticketing without the need for CMS support. An editorialized about page gives readers deeper insight than most music websites divulge. And featured areas around the site give Jill opportunities to promote other revenue streams, such as her Patreon.

Music library page showcasing its unique hover state revealing album art, atop an aerial image of a desert roadExample of dynamic album art, whose graphic elements change color to match the art paired with itMobile view of song details on the music library release page, atop a photo of orange flowersShows ticket page with a list of available options, atop a photo of treesView of CMS entry from website's backend atop a photo of a partly cloudy skyConcept representing the link states of the website nav menu on a mustard yellow background

A dichotomy of style

As an artist, Jill’s tastes naturally were strong and complex. After discussions of her own process, inspirations, and visual output, we defined a creative direction that gleefully combines the maximalist drama of 70’s era pop media with the intimacy of shared literature. The concept recognizes the many contrasting poles in Jill’s expression and offers visitors the emotional range of her musical palette.

Physicality was an important factor in site’s art direction. Pages feel large and poster-like. Typefaces were chosen for their period connotation and their use is inspired by Jill’s own habits, such as her penchant for lowercasing in longform. Buttons smudge like stickers being set. The music library combines ideas from gig posters and record cabinets, transforming the UX of a typical list into a moment of digital crate digging. Like reading back cover of a spinning record, texture, color, orientation, interaction, and layout all contribute to a tactility that enhances the musical experience for fans and casual listeners alike.

Type sample page showing the character and example treatments of the website's three typefaces: Cooper BT, Libre Franklin, and TriptychFull image of a music library release page inset on a medium brown backgroundAbout page horizontal scrolling image gallery inset on a mustard yellow backgroundPhotograph of Jill McCracken playing on stageWebsite contact form designed to look like a postcard atop a photo of a roadsideWebsite videos page inset on a light brown backgroundMobile view of the homepage hero inset on a light tan backgroundAbout page section with two pictures of Jill McCracken, atop a photo of greeneryA home office scene with the Jill McCracken website displayed on an iMac atop a wooden desk with a bright orange retro chair.

All-access pass

The result is a place for revelry at any volume—for Jill, her art, and her community. The website gives Jill a central place to advertise new releases, update fans with tour information, and offer dedicated listeners ways to deepen their connection. Audience reaction to the launch was overwhelmingly positive, excited by the new art and content, and Jill felt she gained a platform for her work that equally felt of her work.

“asher, you are a god damn genius and the way you pour so much care into understanding me and my work, and carefully representing me, means the world.⁣”

The site’s creative direction has gone on to influence Jill’s own content design, strengthening her other channels’ output with consistency in vision and voice.

Live website

WorkTop