Mobile Tab eLearning Interaction
This is a mobile tab interaction that provides book recommendations based on four genres: fantasy, romance, thriller, and literary. This eLearning interaction gives book club members a quick and easy way to narrow down their next read by providing cover page images with links to Goodreads summaries and reviews.
Audience: book club members
I love chatting about new books with my book-club friends. One of the biggest challenges for having a monthly bookish conversation is finding a book that we can all agree on without having to sift through 15 different lists of recommendations. This is an eLearning interaction that provides current reading recommendations based on users’ genre interests. This interactive came about as a way for bibliophiles to see newer releases that have already been vetted by other readers.
I imagined this being linked to through a reading app like Kindle so that readers could pull up easy recommendations during their book club discussions without having to do a lot of searching around in the moment. Each book cover is linked to the book’s page on Goodreads, providing a summary, reader reviews, and a way to purchase the book from Amazon.
This was a quick project to develop. I was inspired by a Business Insider Reviews article that made recommendations based Goodreads users’ top TBR lists. After sorting through the recommendations, I edited the blurbs down to a mobile-friendly size, then created mockups and developed a prototype. I received feedback on the prototype and used those revision suggestions tweak the design and shape the animations in Articulate Storyline.
For this design, I wanted to use a colorful but streamlined design. The first slide has a splash of color in the rainbow bookshelf but is otherwise black and white with plenty of white space. The other slides incorporate color through thematic images at the top of the slide – red smoke for fantasy, hot peppers for spicy romances, a shadowy handprint for thrillers, and a classic pocketwatch for literary novels.
As I was drafting, I created a visual storyboard to map out interactions and links that would need to be incorporated into Storyline. I shared the storyboard with a community of instructional designers, who advised me to reconsider some of my links (which needed to be more bookstore-agnostic, given the various locations that book clubs meet). They argued that there may be a disconnect between linking to the Amazon Kindle page and the potential physical locations where users might access the content.
The visual element of the storyboard also helped me to see how the slides were missing the mark with balance and white space, which led me to make visual shifts around the back button and the images at the top of the slides.
As part of the prototyping process, I made several changes to the design based on feedback received on my storyboard. First, I shifted the back button to the lower right-hand side of the screen; this decision freed up white space on the lower right-hand side, provided some balance with the book cover images on the right, and made the button less likely to be bumped unintentionally. I also reduced the size of the images at the top of the genre slides to add more white space to the top of the slide so that the focus would be on the book selections.
After testing the prototype out with the user demographic and instructional designers, I pulled several extra triggers and variables so that the pathways were more refined. The process from prototype to full development was very quick, and I was pleased with the end result.
Results & Takeaways
This was so much fun to do, and I would have loved to expand it into something that’s a bit deeper and responsive to content shifts that would need to occur seasonally, at most. If I had had more time, I would have wanted to add more complexity to the design, adding individualized pathways for readers based on reading interests, previous favorite authors, and elements beyond genre.
Having said that, I enjoyed spending time developing in Storyline, and I love the simplicity and the aesthetic of this design.