mobile-development2

I decided to create a UWE freshers app that provides information about UWE and its various campuses and locations. I started off by visiting the iLancaster app https://itunes.apple.com/gb/app/ilancaster/id432547107?mt=8 to have an idea of a layout.

In terms of look, I chose to stick with UWE colors red and white for familiarity reasons. I chose Arial Rounded MT Bold font for the "newb" in the app logo as it is similar to the font found all over UWE campuses.

For the Home page, the UWE newb logo was placed on top of the screen, followed by a label widget describing the necessary action to be taken, and the different UWE campuses listed underneath.
For the button design, I chose round buttons, stretched to fit about 80% horizontally.
For coloring, I chose white fonts on a red background. I made them interactive by reversing the color scheme when clicked i.e they become red fonts on a white background. I did all this using the button settings in appfurnace.

A screenshot of iLancaster taken from https://itunes.apple.com/gb/app/ilancaster/id432547107?mt=8

On the "Frenchay Bus Map" edit screen we can see the map widget loaded to fit full screen. The map type selected is Google Streets and the coordinates have been added with a zoom of 17. I've also added a "Back" button to take the user back to the previous page.

I did some research for UWE maps on google.com but only found map images. I wanted to have an interactive map rather than static images so I decided on using google maps. This way, users would be taken to google map locations and could also view around campus environments. I also intended for user locations to be displayed on the maps but couldn't figure out how to do it.
So the plan was, for every key location, I would create a map page using the map widget, insert its coordinates and when clicked, it would point to that specific location.

I then sketched designs of how i wanted the pages to be laid out and how the elements would be positioned. I planned on the homepage containing buttons of the various campuses and for each campus to have a page containing its key locations.

The sketches of my page layout showing my ideas for Home and Cmpus page, in landscape and portrait views

The widget box is packed full of useful widgets and presets

Here, I was brainstorming for suitable names while listing out the app contents

mobile screenshot of UWE newb taken on my Xperia ray

I used http://www.mapcoordinates.net/en to find the coordinates for the UWE locations.

Now I had my layout, it was time to prvide content. I then brainstormed for some names. I came up with UWE newbie, iUWE, uwe newb and many more. I selected UWE newb because it was short, had a ring to it and I thought it sounded cool.

Original UWE logo gotten off google images

My UWE newb logo edited in photoshop, using Arial Rounded MT Bold as font for "newb"

UWE newb home page showing the contents placement and color scheme

Here, I added some interactivity to the buttons by reversing their color scheme when clicked.

For the Campus page, the UWE newb logo is still in the same position, the only difference is this time it can be clicked to go to the Home page. It is followed by a label widget stating the selected campus, and small Image buttons, listing key locations and information of that particular campus.
To design this buttons, I downloaded matching icons from Google images and edited them in photoshop to produce my own images, customised to fit the app's design.
I chose white icons on a red background as the initial state and also reversed the color scheme when clicked for interactivity purposes.

Original icons downloaded from google images

The customised images in their initial and reversed states

An example of a Campus page with the clickable UWE newb logo and image buttons, showing the customised icons that switch to the reverse color scheme when clicked.

(Note; in this image, the last 4 buttons have not yet been designed)

Clicking on an icon takes the user to the selected location of that campus, via the "Map page" integration system I setup earlier.
After having a chat with Dan Buzzo, it was discovered that I could add more value by having other functions rather than just locations. So I planned to add news and social buttons to the "Campus Page". The way this would work is, for example, when you click on the "News" button, it would open an external url, which I have setup via the code edit tool, using JAVA scripts. I did some research and found out how to do this at https://appfurnace.zendesk.com/entries/20645156-How-do-I-open-a-web-page-when-a-button-is-pressed-

THe Java script I used to add the function of opening external urls for the "News" button

So now I had gathered all my resources, I decided to draw a visitors flow to help me understand a user's journey through the app, from the 1st click onwards.