Start Screen VS End Screen

We decided after a group meeting and a substantial amount of dialogue that we all agreed on soundbites as the name. We believed this was a good idea for our app as it was a soundscape based game, with a clear narrative which was based around our fictional character as a symbolic representation of the magna carta itself. Keeping in fitting with the empathy that we was trying to create through the use of the Magna Carta man. We included him in both the start and end screens of the game. As we considered him a fundamental part in the experience for the user. So with all this in mind we decided to have the game enclosed within the start and end screen and him making appearances throughout. We incorporated the idea of bites into the name as the sounds were short which has two meanings firstly from a data perspective they would consist of (data memory in the form of bytes), and secondly and more importantly the way in which our target audience were more likely to recognise the sound clips were short which could be compared to bites in the way that it would consist of multiple smaller bites rather that the thing dissapearing in one go. Along with the fact that each correct answer was signified with a new slice of cake.

The design of the start screen was designed in a way that you would instantly come across the character in an interesting way, so this was conceptualised by using illustrators tools in order to create a 3d title and make it look like the title was resting on a plate in the same way that the cake would be in the end screen. Following on from this the title was made to look like it was being eaten by the character in order to make the game seem more humorous and appealing in a friendly nature.
start screen
The design of the end screen was created using illustrator as was the majority of the app. due it capabilities of working with vectors instead of pixels, allowing for the designs to be designed with responsiveness in mind. The concept of the end screen was to show an elated character, due to the fact that you had completed the game therefore getting him a cake for his birthday. As the birthday (due to the 800th anniversary of the magna carta) as displayed with the number eight hundred on top of the cake. The cake was also a continuous theme throughout as each level was rewarded with a new slice upon completion, this made the transformation into an entire birthday cake at the end. Along with the cake the character was is wearing a party hat. To reinforce the fact it’s his birthday.

magna carta man end screen


The Border Design and Creation.


With the architecture of Salisbury’s Cathedral being such an allure for visitors both new and returning, and with the best kept version of Magna Carta Being displayed at salisbury cathedral. Although the cathedral isn’t completely intrinsic with the Magna Carta. Given however, that the environment of the church will be the setting in which people will be experiencing the app along with the fact that we want to give a historical yet playful feel to the app. It therefore made sense to include the cathedral within the app. So this required some further research.

It became apparent from both my own experience and its reputation that the architecture is very aesthetically pleasing, and definitely leaves a lasting memory. This is one of the key factors behind why it was chosen to be incorporated into the graphics of the app. It was decided an effective way of including this would be to create a border in the style of the architecture. The Cathedral is a very well kept example of Early English architecture. Salisbury Cathedral is unique in that it was built within a short time span (c1200-1275), thus its architectural style is predominantly Gothic. Upon further research into gothic architecture. It has become apparent  Quatrefoils are a big part of the design, they were popular back then and have remained popular through out the ages and can now be seen in a variety of different design circumstances. They are crucially about using symmetrical and geometrical designs to create beautiful complex looking shapes from simplicty. The basis of the design of a quatrefoil is 4 identical circles overlapping. As can be seen below.


the part of the cathedral of particular interest to me which served as my inspiration was this part.



As Illustrator is a vector based image creating software and the border would need to be created so that it could be re-sizeable through scaling it allowing for responsive design without loss of quality. This Meant the software used would need to be a vector based software for definite. I therefore chose to utilise the tools of adobe illustrator to create the design.


MAGNAMAN Trumpet with border

The design of this was then re-designed in regards to the use of colours so that it complimented the other elements better.


in play screen

The Narrative

With the code coming along well, our game structure appeared rigid in its simplicity (more like our inspiration from 4 pictures, 1 word). Aim to give the user self-gratification and closure within the game as well as there overall experience with the exhibition at Salisbury cathedral (thus moving away from 4 pictures, 1 word). Thus in order to inject more creativity into our game we made the development of including a narrative. We achieved this by setting the game at the celebration of the Magna Cartas 800th birthday! Thus coincided nicely with the resent development of a magna carta mascot.

App starts and Magna Carta man is sad because its his birthday and no one has bought him a cake thus the aim of the game is to answer each question to obtain a cake slice to give to him. This also provided voice for a more elegant design where a level system was no longer needed, instead a much more elegant progression bar, which didn’t increase in difficulty but instead provided closure to the end of the game while tying in more appropriately with the personification of the magna carta.

This also led to the suggested development that we provide a prize at the end of the game in the form of vouchers for cake at the café. The problem with this is that we wouldn’t know how many people would play the game and are not in a position of power to offer unlimited vouchers so therefor must act professionally and provide what the client was after rather than the user. To counteract this we devised a finishing screen where the user is able to give the magna carta a birthday cake. Thus give user closure and solidify an enjoyable game experience. This story telling element where each level is rewarded is also a common convention in video games such as assigns creed where parts of a story are accumulated and by completing the game the user is rewarded with the entire game. Thus the accumulated a cake slice within each level acts as an incentive to finish each stage.

The Mascot – The Development (Part 3)

While still in the process on deciding upon a mascot, the design team took an open minded approach to new ideas to express creativity and originality. Although we both found the rat character a fun addition to the app we identified problems with the idea before beginning any digital designing in an effort to weigh out the best course to take to suit the clients needs. The issue we found with using a rat as a mascot was its irrelevance to the Magna Carta exhibition in itself as well as being unable to give the app a linear-narrative structure which we desired (read about why we designed this structure here).

Thus to find a creative solution to this, we devised a character personifying the Magna Carta itself in order to inject life, emotion and ultimately creativity to the otherwise an unaesthetically pleasing document. With the addition of it being the 800th anniversary of the sealing of the Magna Carta, we incorporated this information by basing the app around the Magna Carta mans 800th birthday thus making our app a significant contribution to the exhibition as well as generating an emotional connection towards the subject of the exhibition.

The early conceptualisation focused on using the curvature of an aged scroll to form the wrinkles of a man which who was 800 years old. The incorporation of large un-groomed eyebrows, moustache and feather pen walking stick also ties in well this theme.

The initial gender of character was devised as being masculine. The logic from this came from drawing influence from the 13th century, a time where men held authority within the society. Here is the initial design for the magna Carta app:


Through further development on the design of the Magna Carta, the sex of the Magna Carta character became blurred through choice of simplistic facial features which corresponded with the neutral colour pallet. However the main alteration made through this process was the elimination of a torso contributing to the gender neutral design. Resulting in us moving away from the masculine values of the medieval era, to reveal a enlightened perception of equality and justice. Ultimately channelling the essence of the Magna Carta into the illustration; here are the finished designs of the multiple facial expression which will be used within the app:


The main interaction the audience has with the Magna Carta character is when the user presses the button to here the sound. This was our main attraction down the mascot route in order to generate an emotional connection towards the workings of the game.

Originally we had ambitions for this to be a short animation which played both sounds through separate animation which would show alongside each other showing  Magna Carta character blowing a medieval style horn. However upon consulting our coders, we realised this would present difficulty due to data restrictions. Thus the end result involved a single static image of the magna character blowing the horn on each question page which played the two sound which we merged together using audacity. Heres the end result and the instructions page which visually explains the workings of the game:

trumpet2Screen Shot 2015-05-01 at 14.39.13


The Mascot – The Who! (Part 2)

During the requirements gathering process in the early conceptualisation stage of our project, we attended Salisbury Cathedral in order to get a feel for how our app would work within the space. The requirements we obtained from being within the space can be viewed in here. However for me the most valuable part of this experience was being able to experience the tour ourselves, especially being students with an honest disinterest in history and likely not to visit the cathedral of our own backs. With this in mind,  we were able to draw upon our own experience from this university organised trip to understand our target audience of school students experience in the past – i.e what worked well and what we can improve upon through the presence of our app in the space.

Upon our arrival at the cathedral, we were taken on a 45 minutes tour of a small portion within the cathedral where we received a condensed historical timeline of the life of the cathedral, its involvement with the Magna Carta and the key historical figures who are buried within its grounds. This was presented to us by a retired, unpaid volunteer with an obvious and inspiring passion for history. However it was often difficult to keep up with her extensive knowledge and take in everything she was informing us about due to the sheer magnitude of information. Resulting us leaving the tour being unable to recall the majority of the information we had just been bombarded with. For me and the other co designer on the same tour as me, a section which sparked our interest and our own further research into its historical value was the brief tour of William Longespée tome and the mysterious story which came with it:


Being King Johns illegitimate half brother, however his tie with Salisbury Cathedral stemmed from his marriage to the wealthy heiress and countess of Salisbury, Ela Fitzpatrick. Longespée’s alliance with the king was not only assumed but frequently exploited through being sent to war often. In the latter years of his successful marriage and while Longespée was away at war, the king came to the assumption that he had died in battle and his wife, a wealthy widower, became a desirable suit for many prying men. When William returned from war he was shocked to discover his wife’s harassment and demanded compensation for his wifes grief. Several days later he died, assumed to be wounds of war. However upon moving the bones of his body centuries later, a dead rat was found in his skull to which an autopsy was performed revealing that the rat died of poison. Opening up the question to William Longespée mysterious death… did he die of poison? A culprit for his death could of been his half brother, and the king who’s corrupt reign set the Magna Carta in motion. Perhaps due to his jealousy for Williams impressive skills at battle, nicknaming his “Long Sword” and the king “Soft Sword”. It has also been suggested that King John would often bed his half brothers wife while away at war. Upon her husbands death, the countess of Salisbury knew her rights as a wealthy widower (as per the recent sealing of the Magna Carta) and dismissed further marriage proposals which would involve losing her wealth to another man – making this famous historical couple an interesting advocate for the Magna Carta.

This experience inspired us to include the rat found in William Longespée skull as a cartoon character within the game who would act as mascot to reveal interesting facts through the “4 phrases, 1 sound” game structure. Thus aiming to inspire the users with intrigue for history, rather than to bombard the audience with large volume of heavy historical knowledge. Already in the very informative exhibition, this seemed the logical approach to take in our conceptualisation of the app in order to create something original and unique to the exhibition.

Heres the early conceptualisation for the design of the mascot:


The Mascot – The Why (Part 1)

“An animal, person, or thing adopted by a group as its representative symbol and supposed to bring good luck”

Mascot definiton, Oxford Dictionary

With the code coming along nicely, our project was starting to look more like an app! However from a design perspective the formations of the app appeared a little too rigid for it to be considered a game, especially a game for 7-14 year olds. Although the game is essentially interactive through pressing a button to play the sounds, this aspect of the game seemed to lack creativity and originality especially when aiming to appeal to a youthful target audience. To combat this, we decided the best course of action was to create a fictional character to act as a guide/mascot for the game.

Not only would this breathe life into our app to make it more of an engaging game. This would be accomplished by adding a sense of realism, to bring the code to life through allowing the user to submerse themselves into its historical content. This seemed like the professional approach to take in order to suit the clients needs through it allowing for an emotional connection to be established between the user and the exhibition. Ultimately resulting in an enhanced memory of the educational content within the app through the mascots generation of empathy and attachment.



By drawing parallels between modern video game conventions and educational tools, we hope to further our apps goal to blur the lines between fun and learning.

Initial Pitching Process

After allowing time for our individual interpretation of the brief, we were able to form in groups of people who shared similar app ideas. The next step within this assignment was to combine these ideas and collaboratively create a unique idea in front of the other groups. This lead to us dividing our group of 5 students into 2 subgroups in order to devise 2 pitches as the lecturer suggested.

Individual Ideas

In one group members initial interpretation of the brief this took the form of a simulated conversational app where users immerse themselves into the role of a 13th century baron in order to make alliances and ultimately convince them to revolt against King John (Becky Goodchild).

Another strong idea involved position the user from within an interchangeable figure by which they can migrate from peasant to king through discovering historical facts, gaining prestige through gaining historical knowledge of the Magna Carta (Callum Sulsh).

A common element within this subgroup was the component of setting the app within an immersive environment through both apps positioning the user amongst the action of history! This steered the direction for our groups development as it highlighted the common ambition we had for the app: allow the user to feel part of the history of the Magna Carta in order to validate its importance from a personal perspective.


Collaborative Pitch

Through considering the level of difficulty these two ideas would have in their construction, a more simplistic yet still powerful creative solution must be devised.

This led to the initial idea of the app titled: “Which historical figure are you?”

Drawing inspiration from Buzzfeed’s popular cartoonist questionnaires which frequently appear on social media sites:


Our app idea would mimic the comedic and personal attraction of these questionnaires to make an game which injects reality into history. This idea would as have ties to social media through the target audience being able to share their experience at the exhibition with friends and ultimately continue to enjoy learning about the Magna Carta through the cartoonification of the key figures involved.

Feedback for Initial Pitch

Initial Feedback and evaluation, recommendation of soundscapes → link to “Early conceptualisation – The Magna Farta” blog