A NASA Re-Design
The interactive Cassini iBook with a printed AR piece
Who doesn’t love NASA and all the fascinating technology they have to offer us earthlings? Back in the 1800s, I am sure no one would have ever imagined we would have had a mission to Saturn. Fast forward to 1997, and we begin Cassini’s 20 year long journey into space to capture images and data unimaginable to us all. To re-design anything that NASA does is making a pretty bold statement. They have a fabulous website and other app designs available. However, if we take a look at the Cassini iBook designed by NASA, I think they may have missed the mark.
NASA’s Cassini iBook is full of text and images, so what is missing do you ask? As an interaction designer, I have to ask myself; is this the best experience I can get from viewing this content digitally? What separates this experience from purchasing a physical book or magazine with the same content? Nasa’s iBook doesn’t have much as far as interaction. There were a few items but it was mostly text and images. In fact, it wasn’t until page 72, that I found the first interactive feature, which was a video. Needless to say, this iBook wasn’t taking advantage of the interactive opportunities an iBook can offer to it’s reader. Thus, I felt a re-design was in order.
MY DESIGN PROCESS
I wanted to keep the integrity of the imagery that Cassini has given us. The beautiful dark sky with the stark white planets and moons that we have all seen in the original book. However, I wanted to make it a different experience visually by adding some initial flare and movement that would immediately tell it’s reader, “yes, this will be a different experience than your average coffee table book.” I started off with the chapter cover designs and wanted to give them a sci-fi type feel, add flow and movement, yet still keep the elegant feel. I started with sketching out my ideas of how I wanted my layout to flow.
I ended up keeping a lot of the original ideas of my initial sketch. for the Chapter cover page. I used a video clip of geometric shapes with movement and shimmer on a dark background. I also wanted Cassini to animate in, using line imagery as to imitate the beautiful lines and symmetry we see in Saturns rings.
Keeping with the beautiful thin lines and spheres that we see in the saturn imagery, I created graphics that I would use throughout the book and timeline.
After creating my basic graphics, I wanted to integrate them onto a seamless background that would naturally lead the viewers eye to the following page and help keep the content flowing, yet still leave elements of surprise by having the viewer want to see how the images are connected to one another throughout the pages.
The same geometric background was then used on the timeline pages in each chapter. This helped keep the books overall theme consistent in the design.
Technical Features
I wanted to tone down the background a bit so I added a low opacity black box over top of the background to give it a more subtle feel. This helped the timeline stand out against the dark background, while still giving credit to the imagery in the background of the timeline.
In the images above, you can see that the lines from Saturns rings continued with the design of the timeline. Stacking the lines atop one another helps give it more texture rather than just a single stark lonely line crossing the page. It has more visual interest and leads the viewers eye to the next page. The red buttons indicate the significant event that took place, which is also annotated on the timeline. With a tap of each dot, more information is displayed, so the viewer is still receiving the information that was presented in NASAS publication, however, it is presented in a much cleaner way. Using progressive disclosure, the reader is never overwhelmed with too much information to take in all at once. They can enjoy the journey one step at a time.
The following interactivity is found within my re-design: Intro video to Cassini’s journey. Popup video of Cassini’s launch, Sounds captured in space by Cassini, popup images, popup information charts, popup video, HTML content that allows images to be in constant motion without the viewer needing to press a play button, Finale video of Cassini’s last days at Saturn. Last, but not least, we address the 2nd part of the title caption: PRINTED AR ELEMENT.
Adding An AR Companion Piece
To make this ibook even cooler, I wanted to add a tactile piece that the viewer could still interact with in a digital realm. Adding Augmented Reality to print is a great way to integrate technology into tactile pieces. They simply come alive in a whole new way. I wanted to think of something unique that would add a fun element to a print piece, yet would still go hand in hand with the Cassini iBook experience.
While Cassini was in space, not only did it discover beautiful moons, send the Huygens probe to land on Titan and other amazing discoveries, but we can’t forget the sound waves that were captured from not only Cassini, but other Satellites too. Creating a downloadable and printable poster that the viewer could hang on their wall and further discover sounds captured in space was a cool little bonus piece to purchasing this iBook. So, began the design for sounds in space.
Looking through images of space posters, I was really drawn to the idea of a retro type poster feel. This type of design seemed like it would appeal to younger and middle age generations alike. I wanted to make the front side something that could be framed and hung on a wall, while the backside would have more information and lend the codes to receive the AR experience.
Using Zapworks as the platform to create my codes, I was able to create a unique printed/interactive experience. When using the Zappar App on your phone, you can hover over the codes displayed on the brochure. Each code pulls up an image that can be tapped and enlarged, plays the sound discovered in space and has an information button that can be tapped to learn more.
Although I wanted to add more interactive 3d objects that the viewer could interact and touch to move, etc.; I was not able to learn all the necessary steps to integrate that level of coding in the immersive authoring class I was in, so I used Zapworks widgets and designer to create my experience.
User Testing
I did however, run into a little trouble with the zappar app, in that having several codes on one page was information overload for the app. The app is so good at finding codes, that it finds other zapcodes near it very easily. Having multiple zapcodes on ones page confuses the app and makes it work a bit finicky. This raises a question if this type of print piece would be useful in the design of this iBook. For future reference, this could possibly be either a digital download that presents each code one at a time so that the viewer is having a seamless guided AR experience. Or, if it stays a print piece, maybe it would need to be a booklet with each zap code on it’s own page. This way the image recognition and code would not be confused with other codes.
For the iBook user testing, I found that because of the use of circles as my interactive icons, most of my test subjects tried to interact with anything that was circular. If you notice in the above image of the chapter cover, their are circles their as well as the larger circles that tie the image background together. Because of this, I decided to create an information guide as a button popup in the beginning of the book to show the viewer which items to tap on throughout the book.
With further testing, this seemed to help my viewers try to find the objects that looked like the ones in the instructions. There was less confusion doing it this way.
Conclusion
Overall, when I showed my test subjects the NASA iBook and then my re-design. I asked each user which experience they enjoyed more. Out of the 5 user tests, all 5 enjoyed my book over the NASA book. When asked, if they would appreciate the AR companion piece and if it was something they would print, most said they would prefer to have it open to another digital experience rather than it be something they would need to print out, even though it looked really cool.
What I gathered, was that my initial theory of creating a unique experience more relative to a digital realm seemed to be the preference of all the users I tested. NASA unfortunately missed the mark on their ibook.
I also learned that the AR print bonus didn’t seem to be a relevant sell to most of the users I tested. What I did find was that a print piece was more enticing to my test subjects if it was already created. They didn’t want to bother with having to print out another piece. So most people don’t want to transition from digital and have to print, but they were interested with the idea of a printed piece leading them into a digital realm. As a UX designer, it is important to document these tests.
Some may call these tests design failures, but the way I see it, in order to get it right, you first have to eliminate what went wrong. And that is the beauty of UX design.
View my iBook Demo here:
