Sara Groves

It was such an honor and a delight to be able to work on a website for Sara Groves. Her songs are so incisive and well-crafted, and I also admire how she pours so much back into the artistic community.

Beginnings

I connected with Sara through her Patreon. I started supporting her in 2020, because her music had become such a meaningful thing in my life.

Our conversation started with me doing an unsolicited redesign, through which I shared some of my ideas of new content she could include on her site and new ways of organizing it.

A little while later, she ended up needing someone to help refresh her website in preparation for a new album of music, and she liked the ideas I had shared, so I got a chance to do the redesign in earnest 🎉 .

Goals

The main original goal was to port her current website from Squarespace 7.0 to 7.1, which required re-building it from the ground up, and then update the branding to match the new album. This was the more straightforward part.

We also budgeted some time for what I named "long-term cultivation", which involved the new content and organization ideas I had been developing. The first sub-goal there was coming up with a clear and versatile organizational structure (or as we called it “Sara's boxes”).

The second sub-goal was creatively integrating Patreon throughout her site. Patreon was already the place where she was sharing new things, but there was work to be done to make that more clear to someone browsing her website who was not a patron.

Organization

The first progress we made was identifying albums as the best way to organize the content. All the types of content Sara has (music, patreon posts, song lyrics, sheet music, lead sheets, items in the store, interviews, bonus content, etc.) could be tagged with one or more particular albums.

This required creating pages for each of her albums, which could then be populated by pulling in the various content types. If you are curious, I did this by tagging the content with the album name and then using a summary block to pull in any items with that tag. In her old site, there was only one page for all her music.

The organizational change also created new places to integrate Patreon. Over time, this can create a sort of archive that makes it easy for people to a find a demo or other bonus material.

Another thing I added was pages for all of her song lyrics, which is meant to be another way of giving people who are already fans a path to her website via SEO, which will then give them multiple paths to discovering what she is working on now via Patreon or an archive of what she has done.

Branding

Branding happened second, and was more difficult. Although I had solved some of the major organizational puzzles, the design was minimalist at this point, and felt too sparse and empty to Madi[link], the person on Sara's team I worked with the most. Madi was looking for a design that felt warm and inviting, and turning that description and those examples into a unified palette was the next challenge.

There was a beige color that Madi really liked, and it seemed clear that a dark brown instead of black would be a warmer text color that still had plenty of contrast. But there was also red-oranges, browns, teals, and yellows. Ultimately, I settled on the red-oranges and browns and had to say no to the teals and yellows.

Pure white still seemed too stark, so I added a light beige that has the same hue as the beige that Madi liked but less saturation and more brightness. That light beige ended up becoming the primary background, and it goes nicely when alternating with the beige, but there was a problem.

Depending on how many sections a page had, the bottom section of the page would end up having the same background color as the first section of the footer.

I ended up solving this by creating a tertiary background color that was always used by the first section of the footer, and only used sparingly near the top of other pages. I used a light beige-pink for that, which echoes the accent color and calls a little more attention to itself than the beige and light-beige, but it still light enough that the dark brown text has good contrast.

Beige header, Brown logo, dark brown header navigation

Unused Ideas

One of my favorite ideas that we ended up not using was using a paper texture background with flecks that I made from scratch using layers of sparse fleck patterns in Adobe Illustrator to make the repeat non-obvious. It ended up being more of a distraction from figuring out a set of versatile background colors, but could be useful for a different project!

Wrapping Up

By the end, we were all very happy with the site. The album pages and song lyrics were all up and organized. The album pages were only for the current content but ready to help organize future content. Madi and Sara both loved the color pallete, and it was satisfying for me to translate Madi's description of their brand and a simple moodboard into a united color palette and to explore the uses of a tertiary background color.

I'm excited to see how the site evolves as they create new patreon content and adjust pages for seasonal events and sales. It was a wonderful experience for me to tackle these creative puzzles for Sara to help organize and share her work with the world.

Visit Sara’s website