Mitty portfolio-07.png

Boox

 

Particle in a Box

Mitty portfolio-05.png

Background

This was my capstone Project as a Masters candidate in the HCI program at Georgia Tech. The goal was to build a context based experience for reading complex narratives. Considering the worldwide popularity of Game of Thrones, I chose its source material A Song of Ice and Fire as the subject for this project.

 

Role: User research, Interaction Design, Narrative Development, and Programming

Tools: Illustrator, Paper and pen, HTML, CSS, Javascript

 

Introduction

Stories and narratives are an integral part of our lives, for education and for entertainment. I grew up in a family that reads at dinner tables and books have always been a huge part of my life. My brother and I have lived in separate cities and countries for 10 years now, but we still manage to share books because of the advent of technology and discuss specific characters and plot points.

On digging deeper, I found some of these amazing numbers around e-books and e-readers, and how these numbers are continuing to grow with each year.

Mitty portfolio-31.png

However, most of these readers provide the books in the form of static content. With the exception of a few children’s books, they have not leveraged the technology available to make these books interactive. I wanted to explore the idea of an application to provide contextual information while reading.

 

A Song of Ice and Fire

books.png

Initially I wanted to work with the 'Mahabharata', a complex Indian epic known for it's multitude characters and their weaving storylines. However, after further discussions with my mentor, I chose 'A Song of Ice and Fire' as my subject for the exploration since it would be easier to gain access to test participants for the series.

The series of epic fantasy novels is written by American novelist and screenwriter George R. R. Martin. It was exciting to work with the series since it has some unique characteristics

  • Three predominant stories interweave in this complex plot, the story traveling to multiple locations across the map.
  • Each chapter of the story follows a particular character and narrates the story from their perspective.
  • There are multiple characters gaining and losing importance as the story progresses and their changing allegiances increases the richness of the story.

As the story has progressed, it has become difficult to keep track of the multitude of characters. The HBO show 'Game of Thrones' based on the story deviates from the books significantly, contributing to this.

 

Competitive Analysis

While there are different devices available for the purpose of reading such as the Kindle and Nook, most of these devices do not provide any interactive features or enhancements. I conducted a competitive analysis to understand the gaps in the current market, and to understand what my prototype should aim to address.

Mitty portfolio-33.png

Kindle X-ray

The X-Ray feature on Kindles lets you explore the "bones" of the book. For example, you can see all of the passages in a book that mention specific ideas, fictional characters, historical figures, and places or topics.

 Screenshots from Kindle X-ray

Screenshots from Kindle X-ray

World of Ice and Fire

This is the official companion app for the books, to help readers get character bios and spoiler free information.

 Screenshots from World of Ice and Fire

Screenshots from World of Ice and Fire

 

User Analysis

To move forward with the design process, it was imperative to analyze the users and find their requirements.

Online Survey

To understand the general behavior of readers of a A Song of Ice and Fire, I distributed an online survey in forums and discussions groups revolving around the novels and received 969 responses. This is what the respondents wanted from the new tool:

Mitty portfolio-32.png

Interviews

After I analyzed the survey results, I conducted 5 interviews with participants who were familiar with A song of Ice and Fire series and had read them. These interviews helped me gain a deeper understanding of user behavior. 

Most users described two modes while reading: the Reading Mode and the Analytical Mode.

Mitty portfolio-27.png

Some other insights the interviews provided:

  • For most readers, wikis were needed to remember characters. While reading, checking quick facts about characters to refresh their history was necessary.
  • Readers mentioned getting distracted from reading due to the use of wikis. Users described ‘Wiki Walks’, going from link to link and losing the page where they started from.
  • Readers also wanted a clearer understanding of the family trees of characters.
  • The places mentioned in the books are fictitious. As such, readers had trouble orienting themselves on the maps of these worlds.
  • Many of the participants watched the television series and said that they had higher retention of faces than of names.
 

Design

Once I had a list of requirements and considerations ready, I moved on to the design phase. The focus of the design was a glance-able guide to story elements, and a way to provide contextual information about story elements which updates based on reader's knowledge.

Initial Sketches

These are some of my initial sketches, when I was generating as many concepts as possible.

 Exploratory designs for blurbs of contextual information while reading

Exploratory designs for blurbs of contextual information while reading

 Exploratory designs forInventory of all the characters in the series

Exploratory designs forInventory of all the characters in the series

More explorations

My next series of explorations focussed on the two modes from the interviews I had conducted.

 Reading Mode: where readers can quickly look up a character's information and go back to reading

Reading Mode: where readers can quickly look up a character's information and go back to reading

 Analytical Mode: where readers can explore a characters entire story arc

Analytical Mode: where readers can explore a characters entire story arc

Final Design

After conducting some heuristic evaluations, I finalized the design for the prototype. I created a functioning prototype using HTML and javascript. The design included a side-by-side panel: the one on the left for reading and the one on the right for auxiliary information. Information in the right panel updates based on what the reader selects. There is a menu to visit other story elements and see their inventory pages.

 Side-by-side panels for reading and analyzing

Side-by-side panels for reading and analyzing

 Information about the selected character is displayed

Information about the selected character is displayed

 Menu to explore other story elements

Menu to explore other story elements

 Directory listing of all the characters in the book

Directory listing of all the characters in the book

 

Evaluation of the Prototype

I conducted an evaluation of the prototype with 10 participants. I included a variety of participants, some were familiar with the books and the TV show and some had never seen or read either. The goal was to understand how useful the app would be for any kind of audience and of course, to understand what improvements to make for the next iteration. Here are some of the findings from the evaluation:

Mitty portfolio-29.png
Mitty portfolio-30.png
 

Closing Thoughts

This project is very close to heart, since I love reading and collecting books. I want to continue working on different aspects on making books interactive because I feel that books can be made so much more interactive with the technology available to us.

As a side project, I'm currently working on concepts for an interactive children's book around Indian mythology. With its colorful characters and symbolic representations, it provides a vast and interesting topic to explore and allows me to revisit my own childhood.