After exploring these various design ideas I began to mock up the application structure in order to find the best way of communicating my research and the theories that I wanted to explain through the application.

Initially I planned out my application using paper based techniques such as sketching and Post – It notes. I found that planning and placing the content using Post – It notes was particularly useful as it allowed me to arrange all of the research information into various structures that I had thought of. By using this technique helped me create a plan for the prototype, which saved time when creating the application in Flash CS3.

At first I organised the Post – It notes into a linear format, similar to a timeline running from left to right. Although this layout is very common and is easy to understand I felt that for the volume of information I was trying to convey that another layout such as a circular shaped layout would be better, especially for showing the iteration in the design process and the communication between Client and Designer.

Building on the “Peeling the Onion” design idea I developed a circular shaped layout that I felt really represented the design process and had the advantage that it could be easily layered to organise the information. I decided that this idea now needed to be moved into Adobe Flash CS3 for development of the prototype.

Prototyping the application in Flash was essential to allow the users to interact with the prototype in the same environment and experience the application, on screen, in exactly the same way as the finished product will be used.

Initially I experimented with laying out the circle with different shapes around it and also various overlaps and text positioning. I found that a layout that was similar to a Venn diagram really worked as a menu and also provided additional information to the Client. The overlapping project steps symbolise the communication between the Client and Designer in all 5 steps of the project. I decided to locate the main navigation menu in a window on the left hand side of the stage.

After deciding on the main menu I began to work on the design of the five sub menus for each of the project steps. With this sub menu I wanted to try and communicate the different responsibilities of the Client and Designer plus show which tasks to be completed required shared responsibility. To do this I split the sub menu window, horizontally into the Client side and the Designer side to show this task allocation. To balance the main menu I located the sub menu window on the left hand side of the stage as shown in the screen shot below.

Below the main and sub-navigation I created a further window to hold a dynamic text field and audio / video controls, which displays related content as the user explores the application by navigating through each of the each of the 5 Steps. I then tested placing audio and video controls into the application, which was very valuable for me to learn how to do this in Flash. This would show the test users how the different types of media would be accessed in the final application.

After the design, layout and organisation of step (1) of the application was completed and tested, the coding was repeated for the other steps and the complete application was tested.

Prototype Reflections

The prototyping allowed me to learn various techniques and coding practices that will help me when producing the final version of the application. In the prototype I wanted to concentrate on presenting the information in a structured way and make the navigation of the application as clear and usable as possible.

When coding the application in ActionScript I found myself copying and repeating lots of functions which although acceptable for the prototype I would like to try and find a better way of performing the tasks, without repeating code, for the final application. This method should stop some of the small errors within the prototype, particularly with the audio clips.