Home

10%

Books, Podcasts, & Videos

For the Ethics & Religious Liberty Commission

By Adam King

1. Bookstore

I was first brought in to help this client make their online bookstore nicer. They were planning to add a lot more titles (most really just redirecting to Amazon, but selling ebooks through their own system).

This is what the storefront looked like when the project was handed to me:

Books, Podcasts, & Videos

I was working with a backend developer, and were on a tight deadline. First I set out sketching a new master layout for the storefront and creating our store navigation.

For the storefront, the client wanted a promotional carousel at the top, and I added in a feature callout graphic beside it for wider screens (to keep the carousel from taking up too much space).

Books, Podcasts, & Videos

Books, Podcasts, & Videos

After getting a go-ahead based on those sketches, I started building in the browser immediately. Here was the product we had a couple days later:

Books, Podcasts, & Videos

Here are a few samples of responsive breakpoints for the storefront:

Books, Podcasts, & Videos

Books, Podcasts, & Videos

Books, Podcasts, & Videos

Here's what it was looking like on a tablet (portrait and landscape modes):

Books, Podcasts, & Videos

Books, Podcasts, & Videos

Books, Podcasts, & Videos

Books, Podcasts, & Videos

And here it is again on mobile. Pretty close to those initial sketches.

Books, Podcasts, & Videos

Books, Podcasts, & Videos

Books, Podcasts, & Videos

BOOKSTORE PRODUCT PAGES:

Here's the layout I inherited and needed to revamp:

Books, Podcasts, & Videos

For the product pages, we got rid of the stock cart components that were on every page, added author info, a share tool, and customized the system to allow extra options like "Buy on Amazon" and "Free Chapter" links. a couple screenshots of after.

Books, Podcasts, & Videos

Books, Podcasts, & Videos

2. Podcasts

Next, we started on a directory page for their podcasts. I created a wireframe to show how we could allow visitors to explore all three of their podcasts on a single page. I was paired with a developer to create the system, and he and I worked closely on production.

Books, Podcasts, & Videos

Books, Podcasts, & Videos

3. Videos

Later, we moved on to creating a Videos page for the site.

After an initial client brief, I sketched out some ideas for the layout for the "Videos" directory page. They wanted a live-loading player and then listings and filters on the same page that could be clicked to load up other videos in the player, rather than having individual video pages.

Books, Podcasts, & Videos

Books, Podcasts, & Videos

Books, Podcasts, & Videos

Books, Podcasts, & Videos

Again, we moved from there right into laying out in the browser. We got scripts set up to bring in their videos via YouTube's API and created the filter and listing system. Here, I was moving toward a simpler layout with less hard lines and colours, with the plan to go back and iterate the Podcasts page to match.

Books, Podcasts, & Videos

Here's an in-browser test of the filter interaction and live-load of a new video:

We worked on several other parts of this site, but ultimately the client opted to move platforms and the company I was subcontracting for didn't win the redesign, so all these systems were recently taken offline. Some semblance of the old site can be accessed on archive.org if you'd like to take a closer look, though mobile layout and some features and site content aren't available.

© 2026 Adam King

Samplings from various projects

Overhaul for a multi-million dollar Shopify store

A niche art magazine gets translated to the web

Ethical Coffee Chain

Making the supply chain personal.

Designing for Metrolinx & the TTC

An alpha UI in four days

Semaine jeunesse-arts

Kicking off National Youth Arts Week

Loading, please hold on.