Interactive Catalog: Volkswagen Beetle

Summary

As part of a class at UVU, I was required to design and develop an interactive catalog. For this catalog, I chose the iconic Volkswagen Beetle as the subject matter and tried to incorporate its website and image content. This project aims to improve my design skills when creating interactive and visually appealing content.

Objectives

• Consider the audience.
• Design engaging layouts with interactive content.
• Demonstrate the principles of good design (UX and Visual).
• Demonstrate consistency in content and design.
• Create a fully functional and interactive catalog with enough content to be usable.
• Re-envision the company's product to a digital publication to better sales.

The Process

Most projects start with an idea. In the previous version of my class, Digital Publications 2, I found and interacted with the Volkswagen website and saw that I could use the content on their website in a cool way within the digital publication space. Taking this broad idea, I focused directly on my favorite car, the VW Beetle, that Volkswagen made. I wanted to redesign and reinvigorate their declining product using the images and interactions on their product pages. I borrowed image assets from their website and began to outline my digital publication using paper wireframes.

Paper Wireframe Outline

Each vertical/page was quickly thought out as a hand-drawn wireframe. The page count went from 5 to 7 during this wireframing process when I realized that the exterior and interior features would take up too many pages. The articles are as follows:

1. The cover
2. How to use the publication
3. Table of contents
4. History of the Volkswagen Beetle
5. Exterior color and features of the exterior
6. The features of the interior
7. Safety and Warranty

The cover and how-to-use pages were both straightforward. The cover page was a simple branded image of their product. The ‘how to use’ page was created using a previously designed interface. The interface was simple and effective in sharing how the publication would work with one minor tweak: an added icon.

The icon would move to show that this was an interaction.

The table of contents(TOC) page was also fairly simple in its design in its final stages. However, initially, it was more complex than my original idea, which was to have an animated drop-down menu with pictures and buttons attached.

the original idea for the table of contents

However, due to time conflicts and my lack of knowledge on how to incorporate the animation with the jumplinks to the different pages, I scaled my idea down to a more basic version. This idea was based on ideas found on the Internet and fully implemented through the InDesign document.

Finalized table of contents

For the history page, I researched the background of creating the Volkswagon Beetle’s design. I searched the internet for articles about the history of the Volkswagen Beetle and used the images and other content from these articles.

1. https://www.corsia.us/history-vw-beetle
2. https://www.forbes.com/sites/msolomon/2018/09/14/luxury-lineage-a-brief-history-of-the-volkswagen-beetle/#7401e9fd5048
3. https://www.fastcompany.com/90374568/volkswagen-beetle-timeline-a-history-of-the-iconic-car
4. https://www.caranddriver.com/features/g15378761/volkswagen-beetle-models-by-year/?slide=34

Using this gathered research, I organized the content into a standard magazine layout to make the article readable for the audience. For additional visual flair, I incorporated an image slideshow as the interactive element within the article.

The following two pages used the A-layer and B-layer to their fullest extent. These pages were about the Exterior and Interior of the Volkswagen Beetle Final Edition. These articles utilized the A-layer and B-layer, with the content being shown and covered differently. The content on these pages ranged from images to HTML objects and included text directly from the Volkswagen website.

I experienced some frustration on both pages as I laid content on the A-layer to cover the B-layer. I will first explain how the program works to provide more background on this issue. In Mag+, the Adobe InDesign plug-in, you can have multiple pages in one verticle. When you add a new page to the same document, it will have its A-layer and B-layer. The transition that is shown between the two pages is hard to mask. The content of the A-Layer on the second page will connect with the A-Layer on the first page, creating a seamless transition. Still, if the coverage ratio is too small, the content from the first B-Layer will show through as you transition to the second page. As I messed around with the layout multiple times,

I found the remedy for this problem. The fastest way to mask the transition was to have an image or object cover the entire B-layer. In two of these transitional sections, I broke apart an image into two pieces. The separation of the image allowed the program to combine the two pages seamlessly. This separation of images fixed the transitioning problem and made me pivot in my approach to how I wanted the layout of the article to be implemented.

The next page was safety and warranty. I designed this page to be more like my article on the history of the Volkswagen Beetle, with the standard magazine layout. On this page, I added three different interaction types. HTML, pop-ups, and slideshows. The HTML interaction was an image slider showing the car and the frame beneath it. I made the pop-ups to show a feature more interactively than purely having the text on the screen.

Originally, I tried to include two slideshows in this article. However, I accomplished only one due to the file format restrictions on GIFs included within the slideshow functionality. When combined into the slideshow, the GIF would not show up when previewed. So I disbanded the slideshow and formated the information. The other slideshow was made up of text and images. Then, in the end, as one final interactive element, I added a link to the external Volkswagen website where those who viewed the publication go to buy the vehicle.

I completed each article, which is ready to be exported to the production tool. Each attempt I made to have the project exported out as a .mib file failed. According to the research I did on the MagPlus customer service forum, the file size of each InDesign file was too big for me to export the product as a whole. I went back into each of the .indd files and adjusted the images to a smaller size, reducing the size of the files by a little more than half. The whole project went from 30 MB to 12 MB. When I tried the significantly reduced project file within the production tool, the project caused the same reaction where the production tool would freeze and have to be closed. In essence, the fully functional digital publication was not possible with how the production tool was trying to implement the file.

Outcome

I created a digital publication that is a catalog for a consumer product. The catalog features the history of the Volkswagon Beetle and the specifications of the final model to be put into production for the foreseeable future. (Video to come)

What I Learned

I never want to use MagPlus to create a digital publication unless they fix the bug that wouldn’t allow me to output my project as a .mib file. However, if asked to use the program again, I can and will be able to make any publication using this program. I also learned perseverance in the face of a problem that is hard to fix easily.