Modular Responsive Website
The Problem Statement
The client for this project is Joe Mathieu, a prolific book illustrator and designer. Over the decades of his work history, Mr. Mathieu has worked on over 150 books, including many universally beloved classics such as the Sesame Street books and several Dr. Seuss books. He has also created work in other genres, such as caricatures and album cover art, and it is entirely possible that he would branch out into new categories in the future.
The existing website was created over a decade ago, and a new site was clearly needed. Originally, the client envisioned a technology upgrade to make it more mobile-friendly, along with a visual face lift to make it look more modern. He planned on keeping the information on the site the same as it was on the old site.
The Discovery Process
During the discovery process, we concluded that the client’s current goals and priorities were no longer aligned with that approach. The main goal for the old website was to demonstrate his illustration skills for prospective book illustration clients.
That changed gradually over time, and now the main current goals for the new website were, in order of priority:
- Create a comprehensive library of work
- Connect to fans
- Sell original artwork
- Convey skills and ability to prospective clients
The old site’s portfolio approach meant the work was presented in a limited way, focused on showcasing only the end result, which is what the client thought a prospective art director would want to see. Once I realized what an immensely rich body of work he had, I convinced him that both his fans and his potential clients would want to see much more than that. The sketches, the behind the scenes stories, the evolution of classic characters over time - there was a treasure trove of information that was just begging to be shared.
Getting the information architecture right was the key to the entire project. It had to accomplish three things:
One, it had to be robust enough to house the stories of over 150 books in an intuitive, easy to navigate way, yet light enough to allow for a gradual addition of the content over time, since collecting and generating all of the content about them would take a lot of time and work.
Two, it had to have enough flexibility to accommodate the standalone books, the series with only a few items, and the series with dozens and dozens of items - all while looking good, being intuitive to navigate, and never overwhelming the user with an avalanche of unorganized books on a page.
Three, it had to encourage the user to explore further into the body of work. The existing website did not have Google Analytics installed, so we did not have much data to lean on, but based on the client’s past interactions with his audience, we knew that people usually found him because they knew he illustrated a particular book they loved. Based on that, we expected the new site's inner pages to draw a lot of people looking for information on a particular book and from there, we wanted to make sure they would have multiple ways of exploring related books, categories, and art.
A flexible site map that achieves all of the project's stated goals
Book Page Layout
This project uses several different layouts for different types of content. I am only presenting one of them in this case study, the book page layout, because the book pages are the most important part of the overall site.
Some books had delightful stories about their creation process, or evolution of characters over time. Others did not have much of a story at all. Some had art for sale associated with them, while others did not. Some were a part of a series, others were standalone creations. Some had several rounds of rough sketches, others not…there was a lot of content variety! This meant that I needed to create a few different layouts to accommodate the widely varying amount of information, while still maintaining a coherent, engaging content presentation.
The client provided all the visual content used on the website.
While I did all the site design and WordPress set up on this project as well, my main work on it has been all about the content. I compiled, organized, and analyzed the client’s entire body of work to make sure all of it would have a place to go in the finished website. I worked with the client to gradually shift the copy tone from the dry, corporate descriptions of his books to more of a storytelling, and to tell the insider stories that would delight site visitors. I set up an information architecture that would allow the client to take his time writing his books' stories instead of feeling pressured to have them all done at once, and I organized the entire project around the expectation that the site will grow and continue adding pages and sections long after we launch it.
I also created extensive documentation for the site for the client’s future use, including a style guide, to empower the client to continue adding and updating the site content going forward, while maintaining a visual and organizational cohesion of the overall site.