The tail-end of my Interaction Design Fundamentals class (Fall 2012) was spent working on a group project. We were divided into groups of three and tasked with producing a design for an iPad magazine, based around one of three sample articles. The main deliverable was a presentation slide deck describing our process (competitive analysis, design vision, user personas, mood board, and design language), as well as a PDF of our final magazine layout (including cover page, table of contents, navigation, and the assigned article we chose).
For this project, I worked with two other students: Alina Onishchenko and Min Zhao. Of the three articles at our disposal, we chose “Bird Enemies” by John Burroughs.
We began by deciding which article we wanted to use, and choosing a general theme for our magazine. We decided fairly early on that we wanted to create a children’s nature magazine. From there, we investigated the various existing nature magazines targeted at kids.
After several iterations, we chose to target middle school teenagers as our primary demographic. Prior to this, our target age range was much larger (encompassing 10- to 15-year-old children), but we quickly learned that such a range is far too varied for a single market; 10-year-olds look for very different things than 15-year-olds.
With this demographic in mind, we created our user personas. Typically, a persona represents an aggregate of the research done into a particular user base, but for the purposes of this product, our personas were simply “ideal” users of our product.
Our next step was to create a mood board, with which to cultivate our design language.
This design language consisted of a color palette, fonts, icons, and a logo.
Once our design language was finalized, we began constructing our layout, using Adobe Photoshop and InDesign (the visual design was not done by me). On presentation day, each team put their magazine onto an iPad and brought it to class, where we had a “mingle session and party” with food and drinks. This was our chance to show off our design, as well as see the work of the other groups. Our final design is in the PowerPoint slide deck below.
Because the attached file does not include a description of the product, I will provide one here. To begin, the table of contents, rather than being a simple list, is shaped like a tree. The tree changes with the seasons, as this is supposed to be an all-year magazine. To navigate through the table of contents, you tap on one of the leaves on the tree, causing it to zoom in. This reveals additional links to magazine content. For this example, we tap on “articles”. To go back, you either tap on the air outside the leaf, or tap on the logo. To choose an article, you tap on the name. We tap on “Bird Enemies” for this one.
This brings you to the article page. To navigate to the next pages of the article, you swipe horizontally or tap on the little bird’s footprints in the corner (Note: the bird’s footprints change to different animal prints depending on the topic of the article). To return to the table of contents, you tap on the leaf at the bottom of the screen. Within each article, there are highlighted words. These are hyperlinks: you can tap on them to gain additional information (for example, about the animals in the article).
We designed our magazine to have a flexible layout to accommodate different types of articles. The sample article includes a title page, text-focused pages, and picture-focused pages. On the picture pages, you can tap on some of the pictures to gain even more information. The pictures on the text pages are non-interactive. Finally, the article end is signified by a small leaf logo. At the end of the article, you would return to the table of contents. It is in this way that, rather than being arranged linearly, the information structure of the articles ties back to the tree metaphor.
My contribution: I helped our group come to a consensus regarding our theme. When we started producing our design language, I provided many photos for our mood board, and wrote up the descriptions for all of our personas. It was my idea to structure the table of contents like a tree. Finally, when we created the final layout, I formatted the text of the article and chose several of the pictures we included in the article body.