This project involved designing, prototyping and presenting an iPhone and/or android mobile app using -
AppFurnace is an easy-to-use tool to design mobile apps without having to know JavaScript and it allows you test it on different mobile phones. You can either preview your app on a mobile template on the AppFurnace website or through scanning a QR code and downloading the AppFurnace app you can see what it looks like straight on your mobile phone or tablet. Before being given the project brief I made a practice app to understand how AppFurnace works:
I created three pages and a button navigation system to move around the app as well as a border on the top and bottom of the screen. On the 'Home' page I added a random smiley face image and a text box. For 'Page 1' I decided to place a map on the page to use a bit of JavaScript code that we learned in class:
I created a zone on the map highlighting Quantock Court accommodation which means that if someone walks into the zone then the app will produce a pop-up message saying 'Welcome to Quantock Court'. For all three pages, I changed the background colour to blue and on 'Page 3' I added a random video. Through practising with the software, I found that it was really easy to use and it gives you the ability to create something that looks professional and will work on iPhone and Android.
We were given three design options:
1. UWE Fresher's Guide - to help new students get to know the University.
2. An Event App - an app to support an event such as a conference or festival
3. A Simple Game
After recently visiting Bristol Web Development conference, I decided to create an app to support this event. I decided that the app should contain a schedule of the talks, the workshop times, information about the speakers, and a map of the location as well as nearby restaurants.
The first thing that I did was to sketch out a basic wire-frame design of the whole app so that I could think about how I wanted it to be structured:
These are sketches of the 'Home' page but I changed my mind on my first design (left) because I thought that it was structured too much like a website, for example, with a traditional horizontal navigation bar. Therefore, I sketched out the second design which I preferred as it is laid out in a way that the potential user would expect.
These are the rest of the wire-frame sketches for the other pages. However, when I actually came to make the app I did have to alter my initial ideas slightly to ensure that it looked more like an app. I took away the navigation bar at the top and replaced it with an arrow icon to link back to main 'Home' page. Additionally, I took away the social media icons at the bottom and put them on the 'Home' page so that everything is in one place for the user.
The maps took up more space than I anticipated so I created extra pages. I had a map tracking the user's location on one page which is then linked to another page that displays a map of where the after-party is going to be held in relation to the conference venue. Furthermore, I created a separate page called 'Where To Eat' where I placed a map highlighting a range of restaurants that are nearby.
This flow diagram illustrates how the user will be able to navigate through the app. All the pages will be accessible from the 'Home' page through clicking an icon and then the user can get back to 'Home' by clicking on a back arrow icon. There will also be external links from the 'Speakers' page to their social media pages and associated work which the user can access by clicking relevant text. These links will need to be created using a bit of JavaScript code, for example, to link to the conference's Facebook page I would need to input:
On the 'Venue' page there will be a map that tracks a user's location so that they can find their way to the Watershed and when they walk into the area near the venue, a pop-up message will appear saying 'Welcome to Bristol Watershed' to tell them that they've arrived at their destination. I will also need to add JavaScript code for this to tell the app that when the user walks into that zone the message should appear using exampleFunction:
In addition, the 'Venue' page will be linked to the 'After-party' page via a clickable link.
This shows what I want my app to look like and I have included designs for the 'Home' page, 'Schedule' page, and 'Venue' page. I chose to use bright colours on the app to coordinate with the theme on the conference website and ensured that the logo was on every page representing the event. Additionally, I chose a simple font that is easy to read and displays information well. At the moment these designs are on an iPhone screen template but the app will need to work on android mobile phones too. Therefore, to ensure that it is responsive I will need to position elements so that they will appear the same on any mobile phone, for example, the logo will need to be given the 'Fixed Top' position so that it will always appear at the very top of the screen. The app will need to be tested on both iPhone and Android phones which can be done on the App Furnace website and/or on actual phones.
If I wanted to take my design to publication on the iPhone app store and Android Google Play store I would need to first get permission from the conference organisers and ensure that the app has been fully tested. Then I would need to press the 'Publish' button on App Furnace and pay for them to send it to the app stores. However, for the iPhone store I may have to wait a while because Apple reviews every app submission against criteria so if it doesn't pass then I would have to make changes to the app before trying again.
Overall, I was really happy with my app but to improve it I would try to learn more JavaScript to create a better looking app and also to improve the map on the 'Where To Eat' page. I had to input the map as an image file but for people with small screens or poor eye-sight they may not be able to read what all the restaurants are. Next time I would also put a link to the conference website so that users will be able to access both sources of material.
function openUrl() {
af.openLinkInWebBrowser("https://www.facebook.com/webdevconf?_rdr=p");
}
function exampleFunction() {
popup("Welcome to Watershed, Bristol!", "Hello there!");
log("A message you can see in the preview's Activity Log window");
}
Conclusions
function exampleFunction() {
popup("Welcome to Quantock Court, Student Village", "Hello there!");
log("A message you can see in the preview's Activity Log window");
}