Encouraging readers to explore the world
Carefully weighing the options
Working with a group of 3 (including myself) with the ability to choose our own topic was actually quite difficult. Imagine the scenario: Friday night your best friend messages you to hang out and grab some food. After thirty minutes of talking you narrow it down to four places, where finally you agree on one place. Mid-eating you are still longing for that third choice. This was our group in the (meal) planning phase of the project. Am I mad we got up and left our food that we had half eaten? Not at all. After deciding on a topic that we were all originally very excited about, we found out the quality of images just weren’t as good as we hoped. Sometimes the best thing you can do as a designer is crinkle up the paper and walk away.
Taking care of business
After deciding on a travel theme we narrowed down the options to four travel locations - Angkor Wat, The Pyramids of Giza, The Taj Mahal, and St. Basil’s Cathedral. These were places my team and I wanted to visit, we couldn’t wait to jump back into the planning phase.
Before we planned some layouts I did some research on any past magazines or catalogs that had done travel guides well before. I found a lot of wrongs (see example above). The image above is a recent catalog advertising for next years discover tour with heavy text, lots of pages, and confusing guidelines. We wanted to create something that was seamless, easily readable, and kept the user engaged.
My team created a whiteboard layout based on ideas we had talked about and we jumped right into the project. After delegating tasks I was put in charge of adding animations and interactions to our project.
The first task
Figuring out how to get Hype and iBooks to play nicely (*spoiler alert they don’t). Our first feature idea was to have 5 phrases for each country that would be valuable to get around if someone near you didn’t speak your same language. I researched some of the the best phrases or words to get around in a city and complied them for 4 countries.
Starting to record
After compiling all the phrases I used google translate to help me understand how to say them. I had to type the words in English and then get the translated version in the language depending on the country. I recorded each phrase individually on my desktop with google and then organized them by folder.
The problem with Hype
Our groups plan was to be able to let the user touch to hear the sound. I created an animation in hype that would allow the user to touch the play button and then the phrase in a different language you would be able to hear and watch as it animated through a sound wave. After exporting all of my widgets I realized that sound exported in an iBook from Hype doesn’t work.
Finding a solution
After spending hours on cutting 20 different phrases in pieces and linking them to sound it failed. I did some research on iBooks and thought that I’d be able to use Tumult Hype animations and then link the sound over the widget and found that you can’t do that. Ultimately I had to separate all the audio files and turn my animations into single pictures. Another member on my team then linked all the sound on top of the pictures and use iBooks play button for animation since we couldn’t link our own.
Planning out a checklist
The next feature we wanted to add into the iBooks was a packing checklist. This would give someone an idea of specific things they would need to bring if traveling to that area. We had originally discussed a grocery list type approach where the user would be able to draw and mark off in red which items they had already packed. After laying it out in Hype I realized this was a bad approach. 1- Once the user crossed off or drew on top of the checklist there wouldn’t be a way to change it without adding a separate eraser tool. 2- This would be a feature that could help someone plan their trip. I felt it would be useful to be able to have this list in the future or to share with others.
A member of my group did research on each of the areas which helped me narrow down what I needed to include in the checklist. The image above is a list she made to help the animation process go quicker.
Moving the user along with a Fact Timeline
The last feature I voted we add in was a timeline. Our guide was coming along well but we had a huge empty space near the bottom of a few of the pages. There are so many interesting facts about each country! I thought it would be a fun way to keep the user interested as they move through the pages.
The last piece
Using the same color scheme as my phrases section above the timeline was the last portion of the project. I wanted to keep the timelines predictable for the user, but also have some slight variation. Two of the countries begin with a photo fact and the alternating two begin with a fact without a photo. I tried to pick compelling facts about each country with clear imagery.
Although our iBook is most compatible with an iPad I wanted to test it on my iPhone X to see if any of the features would be functional. To my surprise everything worked really well. I was worried about the touch space on the checklist and phrases section but everything responded perfectly on an iPhone (just in a smaller way). The one thing I noticed where the user may have a problem is in the fact timeline.
When you click on the popup it fills the whole screen and gives you an option to exit out with a tiny icon in the upper left corner. I really hated using this because the purpose of the timeline was to move the user along and this forced the user out of the travel guide. Overall on my iPhone everything was responsive so I felt like my testing went well.
Working in a group was one of my favorite parts of this project. It was fun to be able to brainstorm and think of how to approach our user with other people. One of my favorite things about being a designer is always having opportunities to learn and grow.
Cassidy Bouse is a student in the Digital Media program at Utah Valley University, Orem Utah studying Web Design with an emphasis in Interaction & Design. This article relates to the DGM 2260 Immersive Authoring Course and is representative of skills learned during the Final iBooks Project.
Click below to read about my team’s contribution to our project