Graphic Design and Animation Graduates 2012

Online portfolio and print on demand catalogs for Graphic Design and Animation graduates from the Department of Design 2012. On this page you will find our conference presentations, and by hovering over the menu groups on the left you can read contextual documents. You are welcome to attend our Grad Show, opening on 29 November 2012 at 6pm, and daily from 30 November to 6 December 9.30am – 4pm.

Tee Tomu

ICA, (Interactive Culture Auckland) is a group of four graphic Design students who are collaborating on a yearlong user centered project. Our aim is to develop a common technology and interaction platform that will support content for visitors of the cultural Institutions of Auckland. Auckland Zoo,  Auckland Museum, Auckland Gallery and Motat. The ideal platform will be responsive and appropriate to the institutions and their visitors’ cultural, emotional and practical needs. The final framework will be in the form of an app that will be used across these institutions to enhance the users’ onsite experience. Because of the complexity of the project, collaboration is very essential to the final output.

Auckland’s Cultural Institutions

When we first started the project, the concept of user experience was still fairly new to us, which meant that the majority of first semester was research around user experience principles such as mental models, card sorting, persona’s, storytelling, information architecture, etc.  Getting a better understanding of user experience saw us start to form our objectives that would frame the project for the year.  Some of our initial objectives were :

To create a library examples of existing apps, (cultural institutions’ and regular apps), and analyze and compare them.

Looking into signage (way finding, display, caution signage) and analyzing  how the institutions set up the signage to help navigate visitors around the place. and how that affects their visitors.  

Institution Signage analysis

As we found in time, our objectives were too broad and generic, which narrowed our research findings in some ways. We ended up assigning ourselves with a certain group to focus on, mine being kids. This was however again too broad to try tackle due to factors such as kids’ mental development stages and interests. After narrowing the ages down to primary school kids (5-10 years of age), a shift in my work began to take place. This is when I had my first turning point.

Last year, when I did my neighborhood mapping kit project, my target audience was also primary school kids, so this gave me a starting point, research wise. I looked at practitioners such as Paul Rand, Amy Cartwright and Delphine Durand. I was looking at ways in which these designers used graphic design elements such as colour, line, tone and shape to communicate to their audience. I also looked at how they use visual language to engage interaction, conversation and learning. (Social Interaction) and how all this could be applied to the app.

My aim also shifted from just designing an app for the cultural institution, to designing an educational game that kids can interact and have fun with while they are at the institutions. The main goal is to enhance their onsite experience, but also have allow for them to still have that connection to the institution offsite as well.

New objectives are:

1. Research and analyze established educational mobile apps, video games and books constructed for children of primary school age, to understand how visual language is used to engage interaction, conversion and learning, (social interaction).

2. Compare and contrast old fashioned and contemporary games, constructed for kids of primary school age, to understand how the principles of graphic design, (colour, line, tone, shape, etc) are employed in the development of game graphics to appeal to primary school kids.

3. Research the history of historical educational cautionary tales that were/ are told to kids, so I can identify any elements that can be applied to my application to educate primary school kids in a fun way, that will result in a deeper, more personal relationship between the cultural Institutions and the kids.

4. Research and analyze historical and contemporary models of indexing. Find out what indexing is and why humans like indexed information, and how I can apply this information to the project to address user- centered design principles.

5. Research how graphic designers establish an order of elements by combining text and image, to help the viewer absorb information provided by a design (hierarchy in relation to information), and how this can also be applied to the app.

I conducted more research on existing institutional applications that were specifically designed for kids, and the most reoccurring theme was a likeable character that kids could relate to, and one that was used throughout the game as a guide. Based on that research I started to develop my own character.

I took some of the characters that I had developed last year and developed them further.

Original Character Sheet

I ended up using a snake as my main character for the game for the zoo. The character is a female snake, whose name is Meredith. The storyline is that Meredith just moved from Australia to her new home Auckland zoo, she needs the kids’ help going around the zoo and getting to know all the other animals around the enclosures. The idea is that kids go around the zoo scanning QR codes that are at each animal enclosure. They, in return get facts about the animals, things like the animals name, date of birth, favourite food, etc, which is really what Meredith is after. As a reward the kids get a puzzle or a colouring in page which they can complete later on at their own pace. They then get points with each completion and with these points they are able to purchase locked items from a virtual zoo shop. Which they can then use to start a virtual zoo that needs regular maintaining. For example if they purchase an animal they have to login in regularly to feed the animal or else it dies. This enables kids to still have an emotional connection to the institute even when they are off site.

While I was developing this character I had made the assumption that all kids like snakes and thought that they were likable and friendly. However after some more research, this assumption was proved wrong. I watched movies such as the jungle book, and Harry Potter, and saw a pattern that snakes mostly had a negative connotation with them. Most people viewed snakes as evil, deceiving and scary, which went against the image I was trying to develop for my character. Also the fact that I was trying to introduce a fictional animal to the zoo, made my character choice a poor one. All the institutions spend a lot of money branding themselves and advertising what they already have, it was much more practical to take that and promote it through the use of the game. Although the snake had a lot of graphic potential, I had to change it.

My design process for character development usually starts with finding an image on the Internet, which I print out, and use as a reference for my hand drawing. I then scan my drawings and trace them in Illustrator using the pen tool. From that I just play around with colour and different tools and gradients to get the results I want.

Drawing process

I usually use the eye drop tool to extract my colour swatches from the original images. This can be problematic sometimes. In the snake illustration example the colours are very dull and boring. Research shows that kids respond more positively to bright, vibrant colours. (The psychology of colour in Marketing, June Campell).

Snake color swatch


Colour developments

Working progress

The ICA team put together a branding manual for the development of the app which works with all the institutions. The branding manual specifies colours and typefaces that we are required to use. This will hopefully liven up my illustrations up but still keep the game section similar to the rest of the app. For the typefaces however I have to use the right typefaces for my audience. Kids sometimes have trouble decoding letter variations that adults usually take for granted, ( Which is why there are typefaces that are specifically designed for kids or typefaces that are kid friendly.  Typefaces such as Monaco, Century Gothic, Chalkboard, Trebuchet Ms, Tekton Pro and Marker felt are all appropriate for designs for kids. After a few trials I narrowed it down to Century Gothic and Trebuchet Ms.

Branding Exercise

Final Color scheme

As I mentioned before my character wasn’t really appropriate for one of the institutions and I had to change it. This is my second turning point. My focus has shifted from trying to introduce a new animal to the zoo, to trying to promote something that is already there. The zoo just recently opened up a new exhibition space, Te Wao Nui. Only New Zealand plants and animals are exhibited in the space. By choosing a character from the space, it instantly gives the project a New Zealand identity, which is very important, as kids will relate to it better. Now the challenge is to develop a character that is likeable.

For the rest of the app development (pages), I sketch out wire frames first just to see where everything could go. This is a quick and very helpful way to iterate work without wasting time. Once the sketches are done, I use one of the wire framing software available online. So far I have tried mocking bird and Balsamiq and I personally prefare to use Balsamiq as it has more ready features at its disposal for users like me to experiment with. Although this is not as quick as sketching, it is still very necessary and helpful as it generates a presentable wire frame that can be used to present to clients in a way that they also understand. The wire frames are very easily editable, which saves a lot of time.

Wire frames

User experience as I have come to understand it, is designing an experience. This is not only based on the design of the interface alone, but also has a lot to do with how people feel and interact in a space. This is what visionary contemporary Don Norman called emotional design. A good user centered design, which offers the best user experience, incorporates three levels of visual design that are to be both usable and pretty, as invented by Norman which are Visceral, Behavioral and reflective.

As well as incorporating the three levels, we also have to make sure that through out the development of the app, we undertake a lot of user testing. We have undertaken a series of paper wire framing and card sorting exercises with different people. As we know everyone is different. They think and look things differently, so by undertaking such exercises, we ensure that we design the app to the way people think and expect certain things to be without making our own assumptions. User participation is essential for a successful application.

Paper wire framing

Card sorting


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


This entry was posted on August 12, 2012 by in Uncategorized.
%d bloggers like this: