Second Prototype: Development

The second prototype builds upon our first one, taking a couple of small steps to get us in the right direction for the final application. At this point we’re still focused on working out the basic functionality of how the app will work and users will interact with it while the design for the application is still being finalised.

The main difference here is the addition of a navigation controller into the app. The navigation controller allows us the switch between different views. In this case, we have the initial view of the zoomable Magna Carta image, and it needs to switch to a different view which will contain the details about each clause when tapped on.

We also added a couple more hot spots onto the image to test and implement the class made to control the coloured overlays.

Below is a screenshot of the Overlay class. It takes three pieces of data at this point (but more can be added if needed). For it to be initialised, we need a name, a colour (which later will be used to separate categories) and a frame (which is the size and location of the overlay rectangle).

Screen Shot 2015-04-19 at 13.09.20
The class for the overlays

In the View Controller, the overlays are stored in an array as it seems to be the easiest and tidiest way to store all the initialisation data. The benefit of this method is that it is very tidy, easy to read and will be easier to implement later when we place the overlays on the image.

The array used to store the overlay data.
The array used to store the overlay data.

The overlays are then placed on top of the image using a for loop which uses iterates through and places all of the overlays in the ‘overlays’ array. They are placed down by added a subview on top of the Magna Carta image in the Scroll View Controller and then a Tap Gesture Recogniser is added to each overlay so that it can act as a button.

When one of the overlays is tapped, it transitions to a new view, which is the view where the details of each clause will be. At the moment the prototype transitions to the same page for every overlay as we, again, wanted to show the client our progress so they could get a better understanding of the type of functionality we’re aiming for. Much like the overlay class, A ‘clause detail’ class will need to be made to store all the information for each of the different clauses and create unique links on each clause.

Below is a Gfycat image of the prototype in action. Showing the zoom and scroll functionality and the transition to the detail page for the clauses.

In the future we want to add more functionality to this, which we will be working on as we can. One of the main things we’re interested in is adding some sort of filter for the clause overlays to separate them by categories/ themes (where the colour coding will come in handy). One of our main concerns at this point is that if we have too many overlays it could overpower the Magna Carta image and ruin its aesthetic. One possibility here could be limiting the clauses we have highlighted to only the most important or interesting ones so that the app isn’t flooded with too much information which will make it less user friendly.

First Prototype

Producing a prototype for the client to see is an essential part of client to agency development. We have been working in recent weeks in developing our ideas with the clients to create a section of the application to fit their needs and requirements.


From our creative ideas, the discussions with the client and the requirements  of a heritage applications we have established understanding of an application which would fulfill a specific need for the client/Cathedral. The idea was disscussed in the pervious post feedback.

From our MoSCoW (the application requirements) we have produced a prototype of the hot spots on the image working.

The idea for this prototype was to get a basic understand of how the app with function and look, both for our sake and for that of the client. For this prototype we used an image found online as a starting point as currently we don’t have the official high-resolution image we’d need to use in the final app.

The image was put into Photoshop so we could find the exact pixel coordinates so that we can draw the hot spot boxes over the clauses in Swift. At this point we don’t actually know where each clause starts and ends, so we made random selections as examples to show how it looks.

For this prototype we only had one hot spot as it would be a waste of our time at this point to bother making more as we don’t have the correct image, and we don’t know the actual locations of the clauses.


Below is the code that was commented to help the project move along, so the teams members that we programming the application would be able to understand what parts of the code do what. The main focus for the first prototype was to work out the gestures and basic functionality of the app.

Screen Shot 2015-04-20 at 11.27.31
Code for User Interface

From the code above, it defines what image is going to be used for the user interface. This code is important and its the basic structure of how the application will be used as the client wants the High res image of the Magna Carta as the core navigational structure.

Screen Shot 2015-04-20 at 11.27.43
Code for Double Tap Recognition

As part of the gestures that will be used in the application this is the double tap gesture. The benefit of using this gesture is that everyone that owns or uses an iPad are familiar with this gesture therefore to conform to the style of apple products it makes sense to have this gesture included within the app.

Code for maximum zoom
Code for maximum zoom

As we are used gestures to be able to zoom into the image, it is important to define how far we want the image to be zoomed into otherwise the user will be able to zoom into the tinniest pixel which isn’t useful therefore we have defined it by 5x zoom.

Screen Shot 2015-04-20 at 11.28.43
Code for alert

The whole concept for the app is to be able to click on parts of the Magna Carta on the clauses therefore it was crucial for our first prototype to have an element of this. This part of the code is the start this. The function that is called is when the overlay is tapped something is meant to happen, in other versions it will pull the information of the clause that is selected but as an initial prototype this code activates an alert.

Screen Shot 2015-04-20 at 11.29.10
Code for Gestures

It was important that within the tap gestures that we defined how much the double tap will scale in (zoom). At the moment we have defined the number at 1.5 so each time you double tap it zooms in by an appropriate amount. As you can see by defining the ‘newZoomScale’ of and setting a maximum it has achieved this.

View the whole commented code here.