May 10, 2019

Designing a New Web Experience for a Grammy-Winning Production Studio

Matt Cameron
CXO & Co-Founder

In July 2017, John Marshall Media (JMM) came to Checkmate with a UX/UI project. JMM wanted to bring their Grammy award-winning audiobook production services to independent authors at an affordable price with an intuitive online shopping experience called Click to Produce. They wanted us to design Click to Produce as part of a new JMM web application.

The Challenge

For over 20 years, JMM has produced premium audiobooks for some of the biggest names in publishing, including Harper Collins, Cambridge, and Oxford University Press, earning 3 Grammys and over 50 Audies along the way. Their clients have always primarily been major publishers seeking a hands-on, high-touch experience, but JMM recently decided that they wanted to provide an additional option for independent authors and small publishers to get a high-quality audiobook at an affordable rate. This led them to create Click to Produce, a service that would allow users to pick a voice actor from a curated group of JMM actors who have their own in-home studios and can work well with little direction.

JMM had an existing web app for their Full Service production clients, as well as a website that promotes their brand. However, the two products were made at different times with different design approaches, so JMM put their trust in us to redesign the two as a single experience, with the addition of a Click to Produce service.

Our Solution

Using Sketch and InvisionApp, Checkmate’s preferred prototyping software, we created an interactive prototype of a new design that incorporated both an informational website and a web app for clients. The web app gives users the choice of either Full Service production, which is intended for major publishers, and Click to Produce, which is best suited to independent authors. The benefits of each are clearly communicated to make sure that users can easily select the right option for their needs.

From a user experience perspective, we wanted to ensure that the process of selecting a voice actor was as seamless as possible. These writers have already gone through the challenge of writing and publishing a book; we don’t want them to face further difficulty trying to produce an audiobook. While some authors might know the exact actor they are looking for, others might want to browse the library and compare their options. We had to ensure that UX provided a great experience for both paths, letting users easily evaluate their options or go directly to checkout with as few clicks as possible.

Keeping the interface consistent throughout the prototype was essential for making it as accessible as possible. Elements like search filters and the user’s projects always remain in the same place, making navigation easy.

We also needed to make sure that both user roles are fully prepared for the next steps which take place outside of the app. Click to Produce authors are prompted to get in touch with their chosen voice actor, while Full Service clients are given further options for meeting with the talent or with JMM.

Using several rounds of user testing and acceptance to refine our prototype, we created a UI/UX design that delivers the easy, accessible experience JMM was looking for.

“Checkmate’s design team streamlined our shopping and checkout process. What used to take 12 steps now can be done in just 4. They brought much-needed digital design expertise to our project, and helped bring our idea for a new audiobook service to life.”

- John Cheary
Founder & CEO of John Marshall Media

Results/Next Steps

With our designs complete, we delivered our prototype with documentation to JMM’s in-house development team. In addition to the InvisionApp and Sketch files of the prototype itself, we provided them with an Information Architecture document, a spec sheet that described all user roles and user stories, and a brandboard to reference for visual style. Everything was in place for them to begin development as smoothly as possible.

JMM’s new web app based on our UX/UI design is currently in development.

Similar reads

Subscribe to our newsletter.

Get monthly email updates about product design and entrepreneurship events, as well as news about the Checkmate Team.