Showcase & Discover Creative Work Sign Up For Free
Hiring Talent? Post a Job

Showcase & Discover Creative Work

Want to Learn More?

Isle Spy - Mobile Application

  • Isle Spy
    Helping you keep your eye on the music.
  • Isle Spy is an intuitive app designed to make your Isle of Wight festival all the easier to navigate. The purpose is to give the users a birds-eye-view of the festival compound, and allow them to place personal markers based on a range of topics, from stages and tents to toilets and meeting spots. It then tracks your location using the smartphones GPS to alert you when you reach them; making sure you won't get lost. I created the app using the jQuery Mobile framework, edited in XCode and incorporating Phonegap plugins.
  • Above is a quick video showing some of the main features of Isle Spy. I will now run through some of the main ones in picture form.
  • This is the app's home page. It was designed with touch technology in mind so the navigation was simple and the buttons were big enough to select. A simple recurring design theme of white, black, grey & blue was used to keep the design clean and the focus of the user firmly on the content.
  • Due to the small dimensions of the iPhone screen, I had to be economical with my space but still incorporate all of the relevant information. Therefore, I used a feature of the jQuery Mobile framework, collapsible content, to keep the layout neat, and make reading easier to digest. The about section contains a series of FAQ's as an alternative way of introducing the suer to the concept and key features of the app.
  • I also embedded an RSS feed within the app that is accessible from the about page. This allows users to remain up to date with any changes or future developments relating to the piece. This feed began prior to the completion of the app so that people anticipating it's release could track it's progress.
  • The marker map is the main purpose of the app's creation. When the user first launches it, Isle Spy requests permission to track the devices location. From this, it then marks the users position with a custom icon so that they can easily recognise their position in relation to the rest of the compound. (Note: this post was created from Bournemouth and not the Isle of Wight, but to prove that this works, below is a screenshot of the app tracking my position in Bournemouth in relation to the Isle of Wight compound:
  • The map starts populated with custom icons representing the three main stages. The toolbar then allows you to add more custom markers based on different things they find within the park, such as other stages, drinks tents, or setting a meeting spot with friends. They do this by simply touching the position on the map that they wish to mark; simple as that!
  • Above is a typical populated map. The top toolbar on the page then allows the user to hide or show all of the markers they have added, or hide, show or delete markers of a particular topic when that topic is selected.
  • Further implementation with the Google Maps API also allowed the custom markers that users placed to be visible on Google's 'Street View' feature. (Note: This isn't massively important as the festival compound is in the middle of a field, but in case a meeting spot is outside of the compound.....maybe?)
  • The 'What's On' section provides a simple guide of recommendations for what is happening within the festival of the weekend. 
  • For example, the music section allows you to view the acts that are playing on each of the days. Also implemented here is a radio function, that streams live radio, and what will be coverage of the Isle of Wight festival when the time comes.
  • Here are examples of a typical band and promotions page. Although quite simple in design, it provides a succinct description of each particular attraction. On the band pages, there is an option to 'listen to sample'. locally streams a short piece of a song by that band, allowing the user to decide whether they wish to see them play or remind them of what they sound like. On the both, there is also an option to add that location to their map. When this is pressed, the co-ordinates are then fed to the map, and automatically places a star icon in that particular place, to represent that it has been selected by the user. See below:
  • The star for 'Beady Eye' has been placed over the main stage to indicate thats where they will be playing, whereas the pringles tent is over the other side of the compound.
  • Finally, the 'How To' section provides simple instructions as to how to operate the app, including how to turn the reminders that appear when you reach a marker on or off, how to organise the different markers you add, and even an icon list to show users what stands for what if there was any confusion.

    This app was created from scratch in just under four weeks with no prior knowledge of the jQuery Mobile framework, or any other form of app development.