Wanderlust — Case Study
An iBooks Interactive Digital Publication About Traveling.
This project showcases how to create an iBook that explores interactivity. This is an educational case study I executed for DGM 2260 Immersive Authoring, a course at Utah Valley University.
iBooks Author is a program that allows users to create immersive books. In this project our overall objective is to inspire people to travel, but we especially wanted to motivate people to travel to famous landmarks around the world.
The four landmarks that our team decided on were all culturally diverse: Pyramids of Giza, Angkor Wat, St. Basil’s Cathedral, and the Taj Mahal.
When I think of traveling, I dream of beautiful landscapes, towering architecture, and vast history. With this thought we wanted our iBook to mirror these concepts by utilizing images and videos of each landmark to showcase the natural beauty. We thought that the best route to take would be to let the imagery sell itself.
In the start
After coming up with our concept of showcasing landmarks and deciding who our target audience was going to be, it was time to brainstorm design concepts. There were a lot of directions we could have taken in our creation, and we knew we wanted something visually appealing that also gave our audience enough information to feel confident venturing on their own expedition. We sketched out our ideas on a whiteboard and came up with a general layout for the design.
The process of building the iBook required a lot of collaboration and delegation. There was a lot to conquer from interactive features, to image editing, to gathering text, and video editing. Because of this, our group decided to break up assignments and go from there. Since we were all working on different aspects of the design, we knew it might be a challenge to be visually consistent. To solve this problem we created a style guide to go off of to aid in a more uniform design.
You can check out my team’s case studies to learn more about their contributions to the project.
My role
During this project I decided to tackle the one area that I wanted to learn and grow my skills in more: video and audio editing. I also created the cover and chapter art. In order to do this I utilized Adobe Premiere Pro, After Effects, and Audition.
Videos
The strategy was to collect all media assets, try to make them consistent with each other, and splice them all together. I found high quality assets fairly easy through YouTube and imported them into Premiere Pro to cut and put them together. I used a LUT (Look-up Table) to make a consistent color grade on each video to make a more cohesive design.
Each of these videos were exported into After Effects to add text and motion effects. Following our style guide, I animated the text and graphics, which I thought was a way to make the audience more engaged instead of just having stagnant graphics.
After brainstorming some more we knew that we had to try and make the video flow seamlessly into the other pages as you scroll on an iPad. For each landmark video I added a line to our design to create a seamless transition from the video to the next page. One problem we ran into when exporting this was lining up the lines and matching the colors from the video to a stationary page. After exporting in Adobe Media Encoder, the colors of the lines altered, and this affected the seamless experience.
Along with these landmark introduction videos, I wanted to create an intro that played when you opened the book to immediately immerse you into the traveling mindset. This video was a bit trickier to create because I wanted to add audio to this version. I had different video clips come up along with a narrative that would appear on each page.
For a more dynamic approach, I tried to line up the audio with how the text and video materialized. This was where the learning curve occurred. Needless to say the world of audio editing is still indecipherable to me, and in the end I applied what I had learned and created a piece that I tried my hardest on. And there is a lesson to learn here:
Progression only occurs outside of your comfort zone.
You can view these videos here.
Cover Art
I knew I wanted the cover art to reflect the simplicity of the other assets we used by letting the picture be the focal point and catch the eye of the audience. The warm tone of the image I chose matched the warm tones of our style guide, and the title was placed in the same style as the videos with the title big and the subtitle underneath. [insert cover art, original and final]
I originally had created a landscape cover art, thinking that it was going to be the same dimensions as an inside page. But when placing it into the iBooks file, we realized that it was actually supposed to be made in portrait style, so to compensate for this we added a collage of the landmarks we used throughout the book to tie them in. In the end this collage added to the cohesiveness of the design.
For the individual chapter cover art I also wanted to follow a specific theme with the images. I found pictures for all of the landmarks at sunset or sunrise and created a template for the text so it was uniform across all of the pages. This page only shows up under the thumbnails, but to pursue the immersive experience we needed to create a consistent visual for this page as well.
Testing
After building out our iBook, it was time to test. All good designs are put through a wringer until almost all of the imperfections are flushed out. Keep in mind that I said the key word: almost. No design is perfect, but it is our job as UX designers to make it as complete as we can until we put it in the hands of our audience.
For this case study I will focus solely on my roles in this design while explaining the testing process. I tested our interactive book on an iPad Pro 12.9”.
As stated before I was slightly concerned how the image and color quality would export from Adobe Media Encoder using h.264 and “match source — high bitrate”. When put into the iBook and tested, I did see a small variant in the color of the line that should be seamless when sliding over from the video to the stagnant page.
While this minuscule imperfection was noticeable to me, it was slight enough that a user would not be too keen to focus on. But while this is the case, our readers would notice this difference if the lines of the video and the stagnant page would not line up. This unbalanced line is more of an eye sore than the former, meaning we had to make sure to pay more attention to this after testing. Fixing these errors will ensure that the audience stay immersed in the narrative we are creating.
When testing the cover and chapter art, there were minimal errors. One thing we caught while building was that the thumbnails for the individual chapters would glitch. After a while this glitch would go away so we decided that it was an error that was out of our control.
Also, in the thumbnail preview we noticed that we had to stop the videos at a certain point in iBooks so that they appeared with the name of the landmark. Without the name of the landmark in this view mode, it would be annoying for the audience to have to figure out which landmark they wanted to go to. In the image above you can see the left thumbnails do not have a title and the right ones do. Not only does it look more polished with the title showing, it helps the user navigate through the publication easier.
Conclusion
Digital publications can be more than just text and simple graphics. Adding interactivity to any project will give it that extra oomph to immerse your reader fully in the experience you are creating. Throughout this project I have learned that the key to success is experimenting with your designs and capabilities, and this will consequently provide more ways to engage the audience.
Kayla Waters is a student at Utah Valley University finishing her undergraduate degree in Interaction Design. If you are interested in seeing more of her experience, check out the article below!
