mobile

The program I am using to create my apps is called app furnace. App furnace allows users to create quick and easy apps in a visual way. App furnace comes in two different forms pro edition which requires purchasing to allow you to publish your apps on play stores. Then there is also a free education/trial version that allows users to still build apps but has limited features and lacks publishing capabilities.

The UI of app furnaces takes a visual style to creating apps allowing the user to add text boxes, titles and different types of media content. App furnace also has added functionality with the ability for the user to add their own code or existing code to create a bespoke app of their choice.

App furnace allows further capabilities such as viewing your app on different virtual devices to get an idea of different screen sizes, resolutions and also operating systems.

The two images shown give an idea of the different options available in app furnace. The left image shows the layout for structuring and creating your apps design. The main pieces of content are split into different categories such as buttons, labels, text and media such as images, maps or video.

Once the user selects which pieces of content they wish to add they are then show different variations they can add to their page. These variations can then be modified further through their own individual properties as shown in the image to the right.

Most of the properties are split down into tabs. These tabs cover all the different options such as border colors and sizes or text options. The end tab allows to user to add any code they may wish to include within a button for example.

The layout of the UI and the properties available make the program very effective to use especially if you have minimal experience with creating apps. Allowing apps to be constructed quickly and easily but also giving users the options to make more advanced apps as well.

To introduce myself to app furnace and its features I completed an exercise similar to when I first used hot glue. The idea was to make a simple app with whatever content you wanted. It did not have to have a theme or look appealing the idea was to simply explore the boundaries of the program.

My app was a simple one, in which the user clicked the different buttons and then were taken to a different environment either the arctic, the tropics or a desert.

For this I looked at making buttons with different hover effects such as changing color. I also looked at coding to take the user to a different page along with other properties such as text size and color.

The other areas I investigated were adding media types such as video but I only uploaded images in my 'final' app design. I also looked at adding transitions between pages through scripts that were already included within app furnace. However I found these only worked when viewing my app on an IOS device.

The video opposite shows the app in action.

For the first stage of my app creation I simple noted down all my ideas onto paper. I knew from the start that I was going too pursue the event app route so this lead me on to the next stage of planning. Throughout this stage I had not decided on the exact content of the app. I knew I was going to be doing an event but I was not sure which one. I specifically did this as I think it made sure during the design process I did not try and focus on the content. As you can see from the photos of the written documentation I split my ideas into 4 key sections.

Content Requirements - For this section I simply noted down what I thought the app would need to have within it and also the job it was going to serve. Therefore I just noted all the information I thought would be needed on an event based app.

Information Architecture - Information architecture is looking at how information will be conveyed and presented to the user. Therefore for this I just wrote down how I wanted the information to be presented in order to get the details to the users quickly and effectively.

Interaction Design - Interaction design looks at how the user will interact with your product for this I made notes on different interactive aspects of my app. For example I commented on how I wanted the buttons to appear and work to aid the user.

Information, Interface and Navigation Design - This section has notes again describing how I wanted these certain aspects to be used or work in order to meet the requirements of the apps purpose.

Visual Design - The final section I looked at before moving onto any of the content was visual design. For this I just put down the basic layout ideas I had. After I was ready to move on and create my wire frame design.

After my first stage of planning and acquiring my initial ideas I moved on to making a wire frame design. I used the site Moqups to create it.

The design was mainly used to help me figure out how to structure my information. I knew I wanted a simple and sleek design and had to remember I was working on a much smaller scale to that of a web page. I also knew I wanted background images for the title, navigation and footer but did not decided or think about what these images may be.

I then tried to arrange my content starting with my navigation. I originally thought of having a horizontal navigation menu but then when thinking of different screen sizes and widths on current mobile devices I thought a vertical style would work a lot better.

I then simply tried to arrange my different content types such as text, images and video into a layout that I felt would be effective to users.

Once this wire frame was complete I felt I had a reasonable grasp of how the app would be structured and now I just had to decide on my event and begin constructing the first working prototype.

EVENT APP STAGE 2:A WORKING MODEL

With a rough specification, set of ideas and a wire frame already prepared I moved onto creating the first prototype or working model of my app.

I had previously written down a few events in Bristol that I would be interested in making an app on and finally at this stage I made my decision to focus on the Wildlife Photographer of the Year Event held at the Bristol Museum and Art Gallery.

Once I had decided on my event I looked up their current web page and looked at the key information I would need from the official site. After gathering the information and event details I would need I also decided to use the same background image as the one on the site to create a coherent theme between the web site and app.

I then put the following pages together, home, event, map and tickets. For the home page I included an image along with a basic description of the event and also left space for a video if I could find and download one.

The events page had details of the event and what activities/content it included along with a scrollable image frame.

The map page included the address of the venue along with a Google street view map which has the venues location entered.

Finally the last page is the tickets page which is only made up of text currently and gives all the key ticket information.

After presenting my first prototype to the class I was able to receive some feedback on my app and develop it further.

The first change I made was to adjust some of the aesthetics of the app. Mainly with the title and navigation buttons to make them more appealing for this I changed the grey background color to transparent and added a gradient.

One of the pieces of feedback I had was that there was no indication of what page the user was on. To fix this I added titles to each page but also colored the buttons of the page the user was on as a form of indication.

I then improved the content by firstly adding the video onto the home page.

I then added some code to my Google map container and it now has a pointer to show the exact location of the Bristol Museum.

The last change I made was to convert the footer logos and the Bristol Museum logo on the map page into buttons. When these buttons were clicked they would take the user to the external site using the built in AppFurnace browser. Again I did this using a simple line of code.

If you would like to view my app download the App Furnace player and scan the QR code below: