Last modified on 8 June 2009, at 02:39

Software Engineering with an Agile Development Framework/Iteration Two/Interaction design/Wireframes

Map symbol attraction 02.png Case study Marine Quest

Group: Alastair Nicholl, Liz Coup and Janey Labes for Portobello Aquarium, with artist Serge Ratten


Mq menu initial.jpg
Our initial idea was to create a main menu that had different islands for different games. We wanted the user to be able to navigate to each island by steering the boat.


Mq menu islands.jpg

We added all of the islands so that we could see how it would work and how many there would be. We discussed at length whether to have a bird’s eye perspective or a first person perspective. We looked at different ways for the user to interact, either by steering the boat or by clicking on the individual island.

Mq menu boat.jpg
This was an alternative menu system. It uses text around the

Boat’s steering wheel. When the user clicked on a Game, the boat would steer and drive to that island.


Mq menu txt.jpg
This was an alternative text based menu option which was presented to the client. However the client much preferred the graphical menu.
Mq menu storyboard.jpg
After presenting the client with the alternative menu options, we decided to use the graphical islands concept for the Main Menu. We further developed the idea of this concept by drawing up a more detailed version of the island menu. These included additional details such as specifications for backgrounds, music and sounds.
Mq menu islands detail.jpg
Each of the islands was based on an existing educational programme offered by the Marine Studies Centre. We incorporated an island for each of the 6 primary programmes. We added the “Games” island as a place to put the extra games we had designed. The idea at this stage was that children would be able to use the treasure they had earned playing the educational games and “spend it” on this island.


The group received funding for an artist to implement their wireframes and specifications.


(This story continues in Software_Engineering_with_an_Agile_Development_Framework/Iteration_Three/Content_production, where the Group employed an artist).

Serge rotates.jpg
The artist initially came back with a radically different design where the screen rotated when clicked so that each island could be accessed. We felt that this concept was not user friendly as the functionality and affordances were not obvious. We wanted all of the islands to be presented in the Main Menu at once. We gave this feedback to the artist, who was receptive, and he created a second version that closely matched what was outlined on the storyboards.
Serge sketch.jpg

[[Image:Mq_early_menu.jpg]|left]]

Mq menu release.jpg
This version was released in second iteration. Visually, it appears to be the same as the previous version, but has been optimized significantly. This involved reformatting the flash file and changing the sequence of layers, removing unnecessary tweens, and adding the functionality of loading individual games. When this version was released to the client, we included the Rock Pool Relatives game. We wanted to test the navigation of the Main Menu, so left the individual game icons on the sub islands enabled. When the user clicked on the icons, they were presented with a “Found Game” screen so they would know that a game was to be added in that location at a later date.


The Group had decided to develop games incrementally. The functional delivery of iteration two had a subset of games. More were added in Iteration 3, along with a reworking of much code for optimisation and delivery.

Mq menu final.jpg An intermediate version was again more robust (not shown). They improvement in this version was the way that the games were loaded into the main menu. This version had three games integrated with the main men; Rock Pool Relatives, Crab Feeding Utensils, and Let’s Get Fishy!. In addition this version included functionality for the treasure. This is the third version that was released to the client. This version changed screen sizes from 700x400 to the 700x525 which uses the same proportions as an 800x600 screen (which is the screen size that we are developing for). This version had five robust games, Rock Pool Relatives, Crab Feeding Utensils, Let’s Get Fishy, Who Lives Here? and Sharky shark. Credits were also added to this version.



Map symbol attraction 02.png Case study Use your noodle

Group: Gena Salmon, Michael Brown and John Stefani for Iain Bonney



Adf usenoodle wire1.jpg Adf usenoodle wire2.jpg Adf usenoodle wire3.jpg