Creation of a Catalog
Mag[+]nificent publication
Many publications today are taking steps to make their content accessible to a wider audience and when doing so they are making tweaks to involve the consumer with interactive elements. A paper publication is designed in layouts that are simply for reading, the most interactive some can get is the scratch and sniff perfume advert. Now with the inclusion of digital publications into the industry, strides have been made as more content can be included at little cost and without cluttering an existing layout.
At the time of writing this, I work as a product and graphic designer for a company that creates and sells extreme sports protection gear and accessories. After creating several catalogs in a static PDF format, I took a second look, after using Mag+ and decided that I could create a dynamic prototype version to demonstrate how the product catalog could benefit from the interactions of Mag+.
Who? Why? What?
What is interaction design if I didn’t first ask myself questions as to why I was building a product and who it was for? Why build a dynamic catalog? Well, because it would allow products to be displayed in an electronic way that would engage consumers. It would make the updating process quick and easy to accomplish. Lastly, it would allow for a way to provide a dynamic layer (literally) of content that could further explain products and the technology used in them.
Who am I creating it for?
Current consumers who are buying product as well as potential customers. From previous research about current customers who are buying the protective gear I was able to determine certain factors of my audience.
Age: 8yrs — 50yrs
Gender: Male & Female
Hobbies: Mountain Biking, Snowboarding, Stunt Work, Skateboarding, Roller Derby
Creation
When Planning the catalog, I planned for at least 6 verticals (pages) to give a section to each area. The areas I planned to cover were: helmets, upper body protection, lower body protection and gloves/accessories. While building the catalog I found that my publication grew to 8 verticals (including cover) as I took the liberty of dedicating a few pages solely to one product and its interactive content. I also split up the gloves and accessories categories and displayed them on their own pages.
With each vertical, I made sure to include at least one interactive element, even if it was just a video. I was able to accomplish this goal with the several ways mag+ supports. On the helmets vertical, I added pop ups that give further detail into the technology of the protective wear as well as a HTML feature where the reader can drag horizontally to see a full 360 degrees of one of the best selling full-face helmets. Included in this vertical, is also a couple of slideshows so that the vertical could remain simplified while still displaying several helmet colors and models.
With the upper body vertical, I found that I didn’t have much interactive content on the page itself but I did use the opportunity to create a link to an accompanying page that had an HTML element where the reader can scroll up to reveal technology/selling points of the popular selling protective top. The HTML object I integrated into its own page using supporting software capable due to mag+ lacking the features that I needed. I originally used the snap function but content would keep moving off the page, where in this case I wanted it to stay.
The lower body vertical followed suit of its predecessors in that it contained pop-ups and a few other features. The gloves vertical again, remained similar but as I had was able to obtain detailed assets for a wrist guard, I created another HTML integration where the reader could see a breakdown of the wristguard and read in detail about the benefits of the wrist guard and the padding inside of it. Rounding out the publication with the tools vertical I utilized the video and pop-up features of mag+ to cover the extensive catalog of parts that go into products such as an “edge tuner” and tune kits.
Testing
Testing went mostly as planned with only a few mishaps that didn’t take long to redirect into a functional status. The first issue I experienced was with having the current snap function remain in place as other objects would come up and snap into place. The issue was the the elements would not stay in place and would carry on up the page. After checking with sources, I found out that I was not able to accomplish the feature I had planned and instead built the animations in Tumult Hype and then integrated it into Mag+
Overall the publication was not too difficult to build as my plans helped with structuring the verticals and I had many of the assets to begin with, therefore planning was made even more workable as I knew what I had to work with. The difficult part of the project was figuring out why elements weren’t working when exported which took some troubleshooting. Mag+ is a great publication tool and can be a great way to present information and images using simple A and B layers. The hard part of Mag+ comes when pop ups and other interactive elements are introduced. While some are simple to implement, a slight error of an object ID or button can break the whole feature. As I used Mag+ I found myself comparing it with Apple’s iBooks author and honestly, I feel that I could use either to achieve my desired effect but with Mag+, I would have to give credit a little more as it can do so much simply with its dynamic layering ability.
