Come Fight Me In The Dark
Podcast website
Summary
I designed a website for a comedic podcast called "Come Fight Me In The Dark". I worked with website owners to discuss strategy, design options, and future possibility for their brand.
After presenting various iterations on design, I implemented the chosen design on Squarespace. I designed merchandise and handoff material so that the brand could continue to grow and profit after my contribution.
Duration: ~50 hours over 3 months
Platform: Responsive Web
My role: UI designer and website developer
Reading time: 3 minutes
Discovery
Project brief
To start the project, I gave the website owner a list of questions in the form of a project brief, helping me create goals and learn about podcast space.
I met with the owner to discuss priorities and tone of the website. I also listened to the podcast, to understand who their audience might be. I gave the owner a timeline and we were able to start the project.
Problem
CFMITD owner is concerned that their lower listenership is due to their lack of central online hub. They've had issues with findability from social media platforms.
Goals
Reach a wider audience to increase listenership and create a portal to direct new listeners to, that will also be able to host additional content (video, photos, etc).
Comparative analysis
From the brief I was given a few sites that the owner liked that I could use for comparative analysis. I was able to pull ideas from each to influence the design of the website.
The McElroy website made use of Redbubble, which we utilized. They also made good use of social media and podcast links.
One Shot's website was lacking in some modern design areas but they made good use of calendar plugins.
Maximum Fun made good use of filters and added a trailer in their homepage that we utilized in the design.
Iterations
Low fidelity
Taking the insights from the brief and comparative analysis, I iterated on designs for site structure, navigations, and page layout. The goal was to create a simple site design, that could be updated easy, with a high level of accessibility.
I took the designs to Figma and created a low fidelity prototype, which I showed to the owner. It was very well received with only one minor change (getting rid of the advertising page).
High fidelity
The design then got iterated on in high fidelity. I created a light themed and dark themed design and presented them to the owner and co-creator of the podcast. Being that it's a spooky "Ghost Adventures" themed podcast, they went with the darker option.
For the dark themed design, I used the color palette from their logo design, using shades of green to create a glowing effect. For the typography I used a serif font family that looked more archaic, enhancing the paranormal vibe.
I created a responsive design for mobile and desktop. I knew that the design would be transferred to Squarespace so I tried to keep it simple, so that it could run without plugins or excessive custom CSS.
A closer look
Here's a closer look at the home page on desktop. It features a header navigation of drop down menus, social medial links, and a focus on navigating users to their Patreon. I used a preexisting design as a hero image, followed by a podcast media embed that would feature a preview for their channel.
Development
Squarespace
Going from Figma to Squarespace had its challenges. I used the latest version 7.1, which came with a lot of limitations. I wasn't able to make it quite as interactive as prototyped, without adding a lot of custom CSS, which could break in the future.
Pulling from an RSS feed and auto-populating site isn't possible through Squarespace, so I had to create a blog and upload each episode. This was tedious at first but I was able to create a 2 minute update method.
Handoff
I wanted to make it as easy as possible for the owner once I was done with the project so I wrote a guide. Anyone coming after me could read the guide and upload content, matching the style of the rest of the site.
As a bonus I also took provided imagery to create Redbubble merchandise page. I applied designs to a variety of products that could be linked to directly from the global navigation.
Results
The new website will create a central location for their content. It will increase their subscribers, patrons, and add merchandise sales.
My plan in to come back after a few months and look at the Google Analytics for site, making adjustments if necessary.
Reflections
By creating a business website from scratch, I was able to design end-to-end. I learned a lot about presenting to clients and leading exploratory discussions. The project ended with a satisfied customer and a live website.
Making the website on Squarespace has its challenges. I wasn't able to fully realise my initial designs and their were issues in adding filters for content organization. If I were to do it again, I might still use Squarespace, but go into the project with the expecation of limitations.