Published on <a href="https://blog.prototypr.io/nintendo-ibook-c78b2aec1637?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Cam Sackett 
<h4>How we gave an iBook a UX power-up — Nintendo style</h4>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*q_dvqbzajGm0LO4Eh9iVfw.png">
<h3>Overview</h3>
As a Product Designer I think a lot about usability and interaction. I believe designing with empathy is essential to the design process. So what do I mean by UX power-up? If you’re going to make a book about Nintendo gaming consoles, you better consider your audience.
<blockquote>Focusing on the user experience is key to effective design.</blockquote>
The power-up part will come later. Read on.
Confession: I’m a video game nerd and I like hacking things for fun. Let’s be honest, iBooks author is meant to help people easily make digital publications and interactive iBooks. But is that all that it can do?
Why not push the limits of what an iBook can be. Even with simplistic platforms like iBook author you can do amazing things if you hack it enough.
For the Nintendo iBook project, my team set out to create a digital history book of Nintendo consoles; A brief history primarily highlighting system specs., fun facts, and what we consider, the most influential games featured on each console. Rather than focus on every single console, we chose to highlight four Nintendo systems that we felt were the most notable:
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*EEHThr0S1daq7WvIDHTooA.png">
<h4>Audience</h4>
For our audience we focused on two groups of people:
<ul>
<li>Older generation fans of Nintendo looking for nostalgia and information.</li>
<li>Younger generation fans wanting to know a little history of Nintendo consoles and tap into old school retro gaming.</li>
</ul>
<h4>Goal</h4>
Apart from creating a digital book that fans could enjoy, our goal was to push some of the limits of iBooks Author and transform something typically static with maybe some interactivity to something dynamic with a lot of interactivity. We wanted to create an immersive experience not typically provided by ebooks or digital publications.
<h4>My contributions</h4>
The rest of this documentation will focus on my contributions within our design team and what my part was in the creation of the Nintendo iBook.
I worked on design concepts, design guide, asset gathering, interactivity, compiling/building prototypes, testing and publishing.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*z459mcUzKSyfetWRXj5IZg.png">
<h3>Ideation</h3>
After defining our problem, our next step was to brainstorm and sketch up some ideas. Ideation is a crucial part to the design process. We had many ideas and went through quite a few iterations before coming to a final design prototype.
<h4>Concept Sketch</h4>
We wanted to use large images of the consoles and feature actual game cartridges. We also wanted to briefly talk about the controller.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*vkHTVAshgm63GuLur7-VSA.png">Concept Sketch for Nintendo iBook
Before going from a sketched layout to a digital layout, we made a design guide and gathered assets.
<h4>Design Guide</h4>
Making a design guide helped us focus, provided a road map, and kept things consistent.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*m5xrgTBAgxJnViwoXmdHZA.png">Design guide for Nintendo iBook.
<h4>Iteration</h4>
I created all my layouts with <a href="https://www.sketchapp.com/">Sketch</a>. The first iteration of the digital layout was based off of my original concept drawing.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*_tBbu3PZQMGKmHsz47Zd3Q.png">First Iteration: going from paper to digital.
The layout had to be tweaked a bit as the original image size had to be 2048px X 1496px to meet the requirements for a full page layout in iBooks Author which had to be 1024 ptx 740 pt.
Before continuing layout iterations, I wanted to animate the console on each page so I tried to create an animation where the console would be drawn first, fade in, then shift over, revealing the game cartridges. I was able to create the animation but ultimately, I decided it didn’t really fit the project and was more a “bells and whistles” thing rather than something that related to the project and had a purpose. Nonetheless, it provided a good exercise in animation (see initial animation <a href="http://ithilglir.com/NES%20Console%20Draw/NES%20Animation.html">here</a>).
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*8kJWySWCK7vrIr-LMMV2vg.png">Second Iteration: moving elements around to try and create consistency with other console layouts
I shifted elements around for the second iteration.
We later discovered using the actual game cartridges looked great but wouldn’t work due to each console’s game cartridges being different sizes along with the fact that finding high resolution photos of game cartridges proved difficult.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Gef057suA1JsBQ9kzefAYA.png">Third Iteration: where discovery and innovation presented itself.
After a third iteration, when I had moved the controller down to the bottom left corner, it dawned on me, why not make the book a video game of sorts!
Here is where our iBook received a UX power-up! Goes to show the value of iteration.
So we began the next phase…
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*z459mcUzKSyfetWRXj5IZg.png">
<h3>Production process</h3>
I began to create controller buttons in Adobe Illustrator which would be used to navigate through the book.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*66yzjU-MKhZEy0_cDT5F8w.png">First iteration of iBook controller
I used <a href="http://tumult.com/hype/">Tumult Hype</a> to create button overlays on the controller that were mapped and linked to various places on a page. The first iteration of the controller worked really well with the Nintendo console. However, when implementing it onto the Super Nintendo and other consoles, the controller design failed visually as it didn’t have a consistent look as one would navigate through each system. Therefore, I recreated the controller to be more universal with a little more of a flat design.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Ur3KRA3OnVjTQMhPKP2S9A.png">Second iteration of iBook controller
When the controller was setup and working, I created a start menu like one would see in a game and began testing the buttons.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*qD2F8L5hWlLdNELEj3OBwQ.png">
By tapping the D-pad up or down and pressing A to continue, the participant could go to a new page or section of the book.
I also created directional cues to help guide the reader through the pages. Here are some examples:
<img alt="" src="https://cdn-images-1.medium.com/max/600/1*niaX451srCX5eIpauCD5NQ.gif">
If Options is selected, pressing A takes the reader to the original controller image. This page kind of acts as a navigation guide. The participant can tap B to go back to the main menu.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*redVeos_ugyS3_tdMex_qg.png">Options Menu: Navigation Guide
I then made the console landing page which would open once the participant selected Start on the Menu page with the D-Pad, then pressed A to continue.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*oYgtJYgd4CasRm0Ia1WWoA.png">Console system landing page
Here one could scroll up and down with the D-pad to the different sections: Specs, Fun Facts, and Next. Then tap A to view the section.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*fWtGIXB2S2ULNeX3QsNekA.png">
Lastly, I moved the game cartridges to another page. Since we couldn’t find high quality photos of the cartridges, we opted for game covers. They ended up working better in the long run.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*hBWdCofJYWe-6NGkCXmanA.png">
On the Games section, the participant can use the D-Pad to select a game then press A to to continue to that particular game’s page. In the case below, the Legend of Zelda.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*67yYNGnUUPtuloJvgyxhGQ.png">
On each game’s page, I inverted the game controller colors to match the darker background which was an endeavor in and of itself because I had to remap all the buttons… In the end, it paid off and was worth going the extra mile.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*FRy5tRB1ItkJh_bB6bzfOQ.png">Legend of Zelda Gameplay
On this page, the reader can learn a bit about the game’s history and view gameplay footage by pressing Start.
The gameplay footage goes fullscreen showing a brief clip of the game. Our original idea was to somehow incorporate a way to actually play brief demos of each game using the controller I created but due to time constraints and other factors, we were unable to do it. I definitely would want to implement this feature in a later production.
The last step in producing the prototype was getting all the buttons mapped properly, animations smoothed out, transitions to be as seamless as possible as well as adding additional directional cues like this custom swipe animation.
<img alt="" src="https://cdn-images-1.medium.com/max/400/1*rsfpX45S8ax6C4Q8G_XJjA.gif">Custom swipe animation for a directional cue to go to next page.
Notwithstanding the simplistic design of the prototype, putting it all together and making buttons work effectively, believe it or not, was actually very complex.
I accomplished all of this in <a href="http://tumult.com/hype/">Tumult Hype</a> and with some Javascript coding then placed it in iBooks Author for export. Overall, it was thinking about information architecture and how parts fit together.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*z459mcUzKSyfetWRXj5IZg.png">
<h3>Testing</h3>
<h4>First phase</h4>
After the design was spread across all page layouts and made consistent, the next step was testing. To start, I did personal testing and worked out all the kinks I could find which were mostly inconsistent animations, transitions, sounds not playing, and a few buttons being mapped incorrectly.
<h4>Second phase</h4>
The second phase of testing was to put it in the hands of actual people.
Four out of the six people that tested the book didn’t use the controller and naturally began to tap on the images such as the game covers and text with no success. I thought to myself, isn’t it obvious? It’s a controller. Here I had designer bias; I failed to see the natural inclination for people to tap (especially on an iPad).
<blockquote>As designers, we need to be careful to not design with our own biases and assumptions, hence the importance of user testing.</blockquote>
Three testers were 45 years or older and one had no real experience playing video games. The other two testers instantly picked up on the controller navigation as they had experience playing video games and recognized a game controller UI. The test turned out to be quite interesting and informative.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*z459mcUzKSyfetWRXj5IZg.png">
<h3>Challenges</h3>
Although I considered the age and lack of experience to be outliers as the intended audience for the book, to begin with were fans, both older and younger generations (people who would obviously be familiar with video game controllers), it was nonetheless a poor experience for those testers unfamiliar with video games in general.
<img alt="" src="https://cdn-images-1.medium.com/max/426/1*vn4mkNpDzK5gJAH7NVuLDw.gif">Super Mario Bros. Game Over
Therefore, it was unacceptable — I needed to work on the usability. It had to have touch navigation. I went back to the design and made touch navigation a possibility.
Some other minor challenges I ran into throughout the process were adding video components, page transitions and mapping sound consistently throughout the book.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*z459mcUzKSyfetWRXj5IZg.png">
<h3>Conclusion</h3>
In a way, the controller probably ended up being a gimmick. Nevertheless, I still believe it enhanced the experience and added authenticity to the design (especially for those who are fans of Nintendo and video games in general). It pushed the limits and definition of what a digital book can be and provided a non traditional way of going through an iBook. While it wasn’t meant to be a fully functional game, nevertheless, it helped me think about design process and how to integrate technology in a unique way.
This project reminded me of the utmost importance of testing and iteration when designing products.
In the end, I believe we met our goals to design a dynamic book full of interactivity. We increased usability and hopefully created a delightful experience for Nintendo fans and non fans alike.
<blockquote>You can test one page of the iBook <a href="http://ithilglir.com/NES%20Games%20Example/NES%20Games%20Animation.html">here</a>. (It does have it’s limitations on the web). Heads up… It works best in a Chrome browser, zoomed out at 33%.</blockquote>
<blockquote>Or you can download the iBook for free <a href="https://drive.google.com/open?id=1q4YhlnOdJorndNXmkku9MIk2iRqhKEg3">here</a>. You do need iBooks App for it to work — It is built for an iPad (not ideal for Mac and iPhones even though it can run on them).</blockquote>
<blockquote>Enjoy!</blockquote>
Camron Sackett is a student in the Digital Media program at Utah Valley University, Orem Utah, studying Interaction &amp; Design. This article is an in-depth overview to an iBook project that was built in the DGM 2260 Immersive Authoring I course.
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=c78b2aec1637" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/nintendo-ibook-c78b2aec1637">When is an Apple iBook not an iBook</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

When is an Apple iBook not an iBook

How we gave an iBook a UX power-up — Nintendo style

Overview

Top Stories