Front page of the Jennifer Lawler website shown on a laptop, tablet and cell phone.

Jennifer Lawler

Project Overview

Jennifer Lawler is an accomplished author with over 40 non-fiction books and a developmental editor. Our team redesigned her first website, Club Ed Freelancers in 2021. This site has seen substantial growth as a mechanism for teaching her editing classes. In 2023, she decided it was time to give her author site, JenniferLawler.com a refresh. The purpose of this site is to proudly display and organize her numerous titles with book descriptions and links to purchase. This author website is a virtual book case for the avid reader.

Before

After

Screenshot of the old site with a background banner containing hard to read text and the top of a large picture.

Click image to enlarge

The site had all her books and was organized using the menu system, but it lacked a visual appeal. The banner image was an actual image so the text was unavailable to a screen reader and does not meet color contrast standards for WCAG.

Screenshot of the new site with a mystical looking tree and the name Jennifer Lawler with a button to explore books.

Click image to enlarge

This was the perfect site to use AI images created through Adobe Firefly. The mystical fantasy world in Jennifer’s books was a perfect subject for these AI images. The Kadence theme was chosen because of the modern technology working with the current block editor.

Challenges

  • As an author site, it needed specific details about each book including the description, testimonials, Buy Now link, and the SKU numbers. Making sure that a uniform presentation of all of the information was a challenge.
  • Some of the books are in a series, while other books are miscellaneous books within the same category.
  • Creating a home page that presented the books in an aesthetically pleasing manner without the need for continued scrolling.

Objectives

  • Design a customized back-end that is user-friendly for adding data, yet uses templates to organize the data into a consistent design.
  • Create an organized system of series and categories allowing for a user-friendly search of all books.
  • Create an aesthetically beautiful site consistent with non-fiction and fantasy stories while avoiding designs with dark and gothic images and assets.

Design

With the fantasy theme, it was the perfect opportunity to use AI-generated images. Adobe Firefly generated the images on her website. It was important to ensure that the images were not created using copyrighted materials. Adobe’s ethical statement regarding generative AI helped assure us that the images generated were ethically and responsibly sourced concerning other creators and their copyrights.

Click image to enlarge

Results

Screen video showing the different pages that display the book information from a series.

Click image to enlarge

This video shows how each page template is the same and offers the user to explore other books in the series while presenting the data in a cohesive design.

Book Organization

The incorporation of the contemporary, block-based theme known as Kadence played a pivotal role in enhancing the website’s speed and load time, creating a far more efficient browsing experience.

click the image to enlarge

Screenshot of the mega-menu with the books organized by series.

The Kadence theme includes a “mega-menu feature that allows for an easy-to-navigate menu for the different book series. Categories and custom files were used to organize the information for each book.

screenshot showing the back end with advanced custom fields

click the image to enlarge

Screenshot of the custom fields used to add each book.

Behind-the-scenes magic

One goal for this site was to simplify the process of adding new books. Kadence Elements were used to creat a design template for each individual book. Advanced Custom Fields were used with dynamic content to populate these templates. Adding a new book was as simple as filling out the form and completing the information.

click the image to enlarge

Quick filters are shown above the book covers.

Bookhoard (All Books)

The bookhoard page displays all of the books that this author has written. This design creates an easy and quick filtering system that allows a user to quickly filterthe books based on the series.

here’s what our Client Said:


“You have made my life so much easier. If there is one thing I NEVER worry about anymore, it’s crashing my website, getting server errors, and not knowing what to do about glitches. I remember wondering if paying more for managed hosting and support was going to be worth it. Well, it’s been worth it x10.”
Jennifer L.,
Founder and Owner

Let’s talk about how we can help you.

We would love to chat with you and discuss how our team can help you achieve a high performing website specific to your needs.

  • This field is for validation purposes and should be left unchanged.