Rick Riordan: A Case Study on Creative Collaboration

Rick Riordan is the #1 New York Times bestselling author of over twenty novels for young readers, including the Percy Jackson series, the Kane Chronicles, the Magnus Chase series and the Trials of Apollo. He is also the author of the multi-award-winning Tres Navarre mystery series for adults.

Rick Riordan logo

When Rick initially emailed us about designing a site that could dovetail with readriordan.com (which we also designed and developed), we were thrilled. Many of our team members are big readers so we instantly connected with both the project and the author.

After taking a look at Riordan’s previous site, we identified a few areas we could improve. 

Previous Site Homepage
Previous Site Homepage

Understanding Riordan’s Vision

We knew we would want to make the site easier to navigate, more organized, and more cohesive with his personal brand. We spoke with Rick a few times, pitched these ideas, and he added a few more. The more information we received, the more detailed our list became, and we ultimately walked away with distinct site goals, two of which are listed below:

  1. Improve content organization and navigation
  2. Create and interactive and immersive experience for audiences

We approached each of these goals based on Riordan’s preferences, Riordan’s four main site audiences and our experience. 

Read below for more details on how we creatively collaborated with this fantastic author!

Improving Content Organization & Navigation

Riordan’s previous site was a little tricky to navigate. It was difficult to view his series, navigate between series and books, and see how everything connected (if at all – some of his books are stand-alone). This naturally led to a repetitive and confusing user experience.

As part of our problem-solving approach, we broke out our best sticky note skills and listed every single current series and book. We also listed the new series and books that would be announced the day of site launch. Once we wrapped our minds around the extensive content we had on our hands, we started thinking through how we’d organize it for others.

Getting To Know Our Audience

Which, of course, meant we needed to get to know our audience. We worked closely with Riordan to outline the following four audience groups and their goals:

  • Younger Readers (interested in an immersive experience)
  • Older Readers (interested in new release dates)
  • Parents (seeking information about the series and Riordan)
  • Teachers (seeking resources for classroom lessons)

Note the four main needs of these audiences: explore the series, find release dates, uncover series and author context, and locate classroom materials.

These needs (along with best practices) drove the information architecture.

The main menu is simple at first glance (there are only four obvious options), but the ‘BOOKS’ menu item expands on hover to list each series, where the younger readers can dive deep into exploration. ‘NEWS’ takes reader’s straight to Riordan’s blog (formerly on Blogger – we migrated all content) where they can uncover information on what’s next. And then ‘ABOUT’ and ‘TEACHERS & PARENTS’ provide more context, FAQs, classroom materials, and information than most people could think to ask for!

In this way, site navigation is clean, concise, and nearly effortless for Riordan’s users.
Rick Riordan Menu Expanded

Diving Deeper

So then, how do users explore individual books? And how do we link all the books in a series to that series? And what about all the other stuff like characters and extras and resources?

This is where our series template entered the picture. For each series, we knew we wanted to create a landing page that displayed

  • the ordered books in the series 
  • the guides and graphic novels associated with a series
  • the characters that appeared in a series
  • the parent teacher resources available for a series

The final product looks like this:

Rick Riordan Series Page 2

Once we had a handle on site content, it was time to make things interactive.

Crafting an Interactive Experience

JavaScript and SVGs

Because the series pages would likely draw the most traffic from the younger audience, we made these pages the most magical and experiential.  

To do so, Morgan created and animated a dotted line (using JavaScript, bezier curves, and SVGs – check out her tutorial!) that trails through series books on each series template. This line connects the books by location points. A solid SVG scrolls with the user. Next, we sprinkled little book extras throughout the line to create an air of discovery. Combine this with the overall atmosphere of the site and some pretty fantastic book covers designed by Disney Hyperion and you have quite a visual adventure!

riordan-scrolling

Functionally Fantastical

While we had a blast diving deep into JavaScript and SVGs for this, we also needed to make sure that the site was functional for both Riordan and his users.

To make the site more manageable for Riordan, we created several new post types including: Books, Book Characters, Extras, and Resources. For each of these post types, we added Custom Meta Boxes such as “order” to determine where a book would appear in a series site-wide, “quote” for the book quote that would appear beneath the book on the book page, and so on.

Book Admin

These Custom Meta Boxes gave Riordan quick and easy control over each piece of the site he may want to edit. The boxes also ensure that Riordan can easily add a new book, character, extra – all without a developer!

Book Single

To help ensure the site is user-friendly, we included a number of elements such as a related books module, related resource module, and an easy sidebar navigation on informational pages.

More From This Series Module

Related Resources

Sidebar Navigation

Head over to rickriordan.com to check out the site yourself!

Like this project?

View the Portfolio

Leave a Reply

Your email address will not be published. Required fields are marked *