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.

Ryan Hartley

Downloadable PDF

Interactive Culture Auckland

Aim

To Design a researched and tested user interface, which engages with the visitors of Auckland’s cultural Institutions, through User Experience Design and Graphic Design. My aim is to provide a good user experience, by providing the right combination of appropriate function and aesthetics.

Context Discussion

The key contextual references in my work are based around user centred design. This concept explores the ideas that good design is not just on the surface level of design. Good design is good inside and out, the two complement each other. User centred design considers who the users are and what their needs may be. The overall design is fitted to a specific user, by iterating and testing the design, until the user’s needs are met.

“The form follows function corollary is interpreted in one of two ways—as a description of beauty or a prescription for beauty. The descriptive interpretation is that beauty results from purity of function and the absence of ornamentation. The prescriptive interpretation is that aesthetic considerations in design should be secondary to functional considerations.” (William Lidwell, 106). Creating a user interface has really strengthened my beliefs, in the concept that form follows function. A interface can be graphically rich. However, if it has no functional design or is not communicative, people will not want to use it. The negative associations built from poor usability, will tear down any aesthetic values.

“Visual design impacts greatly on the usability of a product. Users prefer a beautiful look & feel over an ugly or dull one. Aesthetic designs are perceived as easier to use, whether they are or not. Good designers find a perfect combination of accessibility and aesthetics.” (Pascal Raabe). Remembering my role as a Graphic Designer, It is important to not get caught up to much in the idea, that functionality is everything. The graphics are equally important. I have just learnt that there is a lot more process that goes into designing an interface. A tested and functional foundation is needed, before any graphically rich design should come about. Functionality and Aesthetic feed off of each other. The right combination of functionality and aesthetic is what makes good design, take one away and the design will be unsuccessful.

A graphic element that I explored was the use of shape. I liked the idea of creating an interface that used circle shapes. My reasons were because I wanted to create something more unique. I also liked the idea that everything contained in the circle was as whole and related together. The circle united all the institutions as one. My final decision that I made was to use rectangular shapes. The reason why was down to the simple idea, in which form follows function. With the use of circles, I was unable to maximise the use of what is already a limited screen space. With this facing problem it made my decision clear to choose rectangular shapes and to not sacrifice function for aesthetic. With this decision I have been able to achieve the balance that I wanted.

Process and decisions

Designing a smartphone app has been a challenge for me and I have really learnt a lot working on this project. An app is a piece of software which is a combination of interaction, usability, product development and Graphic Design. This meant that I had to expand my knowledge as a designer. I have learnt new methods of working, drawn from user experience design. Some of the research methods that I used are personas, case scenarios and user testing. In doing this project I have learnt the importance in realizing that I am not the user and that the graphics and usability are for somebody likely with completely different tastes and knowledge.

Research played a big part in my work. Research influenced reasoning and decision making. I created personas as a research method. I personally found these to be quite useful. It is that constant reminder of who I really am designing for, every time I need to make a design decision. They take away assumptions and introduce considerations, like am I meeting the user’s needs and skillets. I found after working on a project for so long that it became personal and I got attached to it. Therefore I discovered personas were a good way to be reminded who the end design is really for. I based my personas off interviews to keep them accurate.

Case scenarios were quite a useful method before creating a visual timeline. It helped me uncover how the whole event of somebody using the application, might play out. Case scenarios lead onto visual timelines and wire framing. I found Site maps for app design only useful towards the end. A site map helped towards making the interactive wireframes. It was useful to have as a reference, in piecing together page links.

Paper prototype user testing, was a chance in letting people decide the placement of features and navigations. I found the results of this to be quite varied, it really came down to personal preference and knowledge. I learnt that I needed to dig deeper. I approached the research from a different angle. The new method used was to take away visual distractions, which was inspired by wire framing. The new approach was to get people to organise features into a hierarchy, of the most important to the least important features. After those results, it made me consider trimming less used features, such as gift shop which was on the bottom of the list.

A lot of time was invested into learning how to research, then undertaking research. My efforts paid off when it came time to make important design decisions. It meant I often had the answers. Research speed up the design process significantly because most of answers were already uncovered. Research is always an on going part of my process. There is always a new feat around the corner, ready to be challenged as work progresses.

What I have bought to the project is the design of the wireframes for the app, as well as the graphic design work produced for MOTAT’s application. I have learnt a lot in my area of working. For example how important a wireframe is, as it is the skeleton structure of design. I have learnt the importance of drawing by hand and how to balance my work flow. I know no when to separate myself, from my love affair of doing things regularly on the computer. Through this means I have been able to strengthen my design process.

Drawing up wireframes by hand meant that I could quickly flesh out the iterative process, in the first phase. Creating basic wireframes meant that the navigation and layout could be honed in on. In the beginning I started off doing fully rendered graphics and skipping wire framing. This approach did not work out. I discovered that it is so much harder to review navigation with fully rendered graphics. It was frustrating in critiques when people gave feedback on the visual aesthetics, when I was asking for navigation feedback. This led me to realise that graphics are distracting and blur the understanding of navigation. I use wire frames constantly now in my process, as I now fully understand there importance.

I learnt through experience, what the values are of drawing by hand. In digital wire framing it is easy to copy and paste navigations. This may not sound like a disadvantage for repetition. However it meant that I could paste layers less purposefully, without really considering the importance of its presence. Well I was drawing things down, I thought more carefully about whether or not something had to be there. I was able to register values better well spending time drawing individual elements. If something did not need to be there, it was a waste of the limited space we have designing for screen.

A technique I used to assist wire framing was to draw basic visual timelines, to consider how the app unfolds and to observe the work flow. Once this was done I could iterate pages because I knew what features were needed on each page. When high quality wireframes were together, I would draw them up in illustrator and simulate them using interactive wireframe software. Interactive wire framing was effective in showing work flow and to identify on whether or not any key navigation was left out. With a good wireframe template put together, it meant by the time when it came to doing graphics, it made easier to focus on just the graphic interface. I was able to purely commit my time to making graphic design decisions, since layout and navigations were resolved.

The design element that I have adapted to the most is the way I use space. Designing for screen limited the amount of space I had to work with. I was previously used to giving my work plenty of breathing space, with the higher flexibility of print design. The principles I have learnt to deal with limited space is control, layers of unlocking and chunking. The app is complicated, but presented simple though these principles. The user’s options are not all given at one point in time.

At the halfway point we had eight features on the institution homepage. I learnt through my user testing that this presented too many options for the user. There was no point including everything at one point in time, if it was not going to be used. Especially when considering space limitations. There is now currently three links in the app once it unfolds itself. Not everything was cut out, instead it was decided to be repositioned on the timeline. My user testing showed that features like gift shop, were not important in the app. From a business perspective it is important. The decision made was instead to influence the user to visit the shop at the end, through rewards and being able to take something home from the experience. Rather than having an online shopping page, which would not get used.

The app starts off with one navigation button and it unfolds itself as the user progresses through the tutorials and becomes familiar with the app. This level of control is important considering the main user is children. Through this concept the app is chunked into digestible information levels. In places like explaining how to scan an RFID tag, we have chosen to use video. A dozen frames and two seconds of time, are more efficient and easier to recognize, assisting the learning curve. This is opposed to having 150 instructed words to read.

It has been a challenge working for a whole raft of institutions. They are each very different and have invested a lot of money to be individuals. It was important to acknowledge this. The way in which we designed the information design template, was so that it could be reused over each institution. The only thing that changed is the graphics and the branding. The wireframe structure stays, it’s just the colouring in the lines is different. We visited each site several times observing physical elements. We built up some collateral of the physical, digital and branding that we could find, to look for visual trends.

I had less control over designing the home page. Each of the institutions wants to be heard, so the most important consideration was balance. The way in which I used space was slightly different for the homepage. I took on the angle that this page is screen real estate. The end goal was to take up as much space as I could evenly, with each institution presented on the one page.

Working in collaboration has been an essential part of my learning in this project. It took time to adjust to work in a team. In my previous years of study, I solely worked individually on design projects. All of the team members stayed mostly in our comfort zone, by working as individuals in the beginning. We each tried to take on this substantial project by ourselves. I have learnt a lot from the experience and I am grateful the skills that I have gained, of being able to work in collaboration. Rewards were gained and appreciated from the ability to collaborate.

The advantage of working team is that the tasks can be divided up accordingly, to each of our strengths. This meant that we could focus better on key aspects, rather than trying to achieve too many tasks at once. Multitasking often meant for us, more work was being produced however at a lower quality. We took advantage of our individual strengths and combined them. This resulted in stronger work, which could not have been achieved individually.

Being a part of a team is a small community. It meant that other designers were always there to critique my work. Team critiques often achieved better outcomes because when outsiders came in cold to the project, especially towards the beginning, it was harder for people to understand exactly what we were doing. Our project is so different and even we found it hard to grasp exactly what we were doing ourselves in the beginning. As I team we quickly achieved a grasp on the project, through shared understandings gained.

A fundamental yet simple improvement that benefited us as a team was to pin up all our work in our studio space. This method works on solo projects as well and can really strengthen ideas. For a significant amount of time, we as a team kept all our work hidden in our workbooks. The outcomes in learning that I have had from this experience, is that keeping to yourself in a collaborative project, was limiting ourselves and is inefficient. Pinning up all our work meant we could keep track of where the whole project was at. It meant that we could learn faster off of each other by observing and feeding on shared knowledge, like ideas, learning’s and techniques. Having everything open meant we could also map out connections. With my work in a more public space it was important to be able listen to feedback. There is often many different ways to solve a design problem, so it adds to the iterative process.

Outcomes

It was decided from the beginning that our work was going to be outputted to a smart phone device. The reasons why is because our goal is to bring wireless content to visitors of Auckland Cultural Institutions. This is achieved through a means of technology, which amounts of people already own and carry around with them all the time.

It was never within our expectations to have a fully finished and programmed model. To present my work I have chosen to make an interactive pdf, which can be transferred to a touch screen device. This output is the best suited because it can simulate very closely to what the real app will be able to do.

The interactive pdf has its limits on how we could present and showcase our work. Working with this new output, I have found out that I needed to include more medias of visual communication, to showcase our final solutions. This is why we have made a video to capture what is non existent in the pdf. Through the video we were able to demonstrate how the app works and highlight key touch points of the experience. The video allows to visually stage together things like how museums, people, technology, visitors and emotions can all come together.

To document all our research we decided to make a publication. The reason why we chose a publication is because we wanted something compact and portable, which could contain all the layers of the design process. The second reason is that it adds a level of professionalism to the project and the work that we do, as well as showcasing that we have the skills to now work with both print and digital media.

References

Lidwell, William “Universal Principles of Design.” Form Follows Function.
Rockport Publishers Inc. 2010. Pages 106-107.

Raabe, Pascal. “User Centred Design.” Good practice guidelines.
http://www.paznow.com. RNIB Clear print. 2010. Web. 11th July, 2012

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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

%d bloggers like this: