mobiledevelopment1

Appfurnace logo - Screenshotted from the appfurncace homepage -
http://appfurnace.com/

Resources

Mobile development 1

We started off this project by looking at a piece of app development software called app furnace, this was presented to us by Dan and he explained some of the features that we could possibly use to develop an app, below are some pictures of this presentation.

Above is an image of some code which can be inserted, other than just using the drag and drop capabilities.

Below is an image of setting up a scan feature, when the code is scanned it can take you to a specific part of the created app

Below is an embedded map which can use your location, you can set points and when you're a certain distance from the location, you can make the app make an alert or noise to tell you you're close to a specific point, this was demonstrated to us.

Once the lecture was finished we were given the chance to experiment with app furnace and try out different features, we could preview the app on the web or even broadcast it on our ios or android devices, I found this helpful as I could see the layout exactly how I wanted.

Below is a picture of me experimenting with app furnace and trying out the maps feature, I couldn't find a way to get back to the homepage when I originally tried this so I added a button at the bottom of the screen to get back to the Home page.

We then had to create an app, to do this I went through a design process of creating wireframes in Adobe Illustrator to show the layout I wanted for my app, I hadn't had ever done this before so I found it fun as I could picture how I wanted everything to look without actually creating it. Below is a picture of some early wireframe designs.

Following my early wireframes I decided to amend them, due to them not meeting the standards I wished to create. I wanted them to look more professional so I went back and changed them, Below are the final wireframes that I created.

Appfurnace is a programme used for creating mobile applications, it offers a drag a drop feature where you can place buttons onto the app that can be used to direct to other pages very simply, there is also an option to add your own code to the app which adds more technical things to the app. Below are some images that I have screen shotted showing the development of the Application that I've created as well as wireframes and any resources I've used.

All of the pages have used the black white and red colour scheme, which are the colours of the uwe emblem, I thought that it was appropriate to be consistent throughtout.

Hello + Welcome

This page included a video embedded from youtube, when I went to do this I found that it wasn't possible as an update prevented it, The way around this was to download the video and upload it as a file to appfurnace. If I had more time I would have found another way to do this, but with the time given I had to just provide a link which took you to the youtube video rather than have an embedded video within the app.

Campus map

My original plans were to have map with pinned points on which were clickable and displayed relevant information about that location, In this case it was a map of the Uwe campus with locations such as the halls of residence the library and the su bar, this would help freshers locate places when they first move to the university. When trying this I used a live google map and add the points that I wanted to, although these points weren't clickable. I thought of a way to get around this and that was by having a screenshot of the campus map and adding some clickable buttons that would display information such as the opening times of the library.

Twitter feed

The idea of this was to enable freshers to access up to date news on the go, a good way to do this would be to include a twitter feed, instead of the freshers having to go on twitter and following them, they could just be on the app and choose the twitter feed page, they could then read the tweets that the University had written, really quickly. I thought the best way to do this was to embed the twitter feed option that appfurnace provided but upon doing this I found that it didn't work, following this I created a widget on the twitter site and tried copy and pasting the embed code into a text box, again this didn't work, Upon thinking I thought the best thing to do would be to just include a link to the university twitter page for the freshers to follow, although this wasn't ideal it would still enable the freshers to see the updates the uni posted.

Who is the Target audience?

The app has been created for university students, mainly first years who don't know there way around, about the things that happen during the first couple of weeks or don't know about important information such as emergency numbers. It could also be targeted at second and third year students but it probably wouldn't be as useful to them as it would a first year.

Which platforms would it be accessible on?

The mock ups were created for the Iphone 5 although it can be adapted to function on older Ios devices such as the iphone 3gs, it can also be used on android devices. When creating the app in appfurnace it was made to fit on an Iphone screen but I created the images and buttons to scale depending on the screen size, this makes it more accessible to a greater range of people.

What does the app do?

The app has a number of pages which have different features on,such as a live map to find where you are on campus, a twitter feed to keep up to date with things you may need to know during the year, Important contact details, a welcome video to explain about the freshers weeks and an about page.

What went well ?

I think creating the wireframes was a great idea, as I'd never done it before and it enabled me to visualise the final product before i'd actually created it. I think i'd definitely use this method again even for different types of projects.

What didn't go so well?

The things that didn't go so well were implementing certain features into the app such as the Twitter feed, the Youtube video and the maps for the campus, when it came down to these things I really didn't know what to do, as they weren't working as they should due to app furnace, Although i found basic ways to get around these problems.

Final thoughts and improvements

Overall I think the design process went well although the app building itself could have been better, I think if i was do it next time I would make my idea clear at the start and then create mock ups, once I had done this I would ask for feedback from a number of people and document their suggestions for improvement and then look to see if changes to the designs needed to be made for the better. I would then go on to build the app. If I had more time and money with the app that I created, I would have hired a programmer to get around the map and twitter issues that I had and I'd also find some software to download the youtube videos I wished to embed.

Review process

Here I have the app being shown on different devices, with different screen sizes, it was obviously important to cater for peoples needs as not everyone has the latest Iphone, To do this i made all of the elements proportional to the screen size.