Development

I drew a lot of my logo design inspirations from existing applications while searching through the apps on my App Store. For example, Fragment is a photo editing application that breaks down images into little graphic fragments. Their logo is simple, and casts a very simple understand for users.

I also really like the layouts that come with games that have to do with quizzes, which led me to exploring a logo layout that had a grid it in.

I developed the logo to include the 4 most prominent aspects of the augmented reality application which included restaurants, hairdressers, the grocers, as well as a GPS navigation.

I also decided to do a couple of designs that just had the navigational aspect, and to play with the colors instead. This helps the users to focus on what the augmented reality application really is about without confusing it with a service provider application.

I started off with the restaurants.

Even if I did not use these as my finals for the logos, I will still end up using them for extra information later on.

I used the fork and spoon to represent the restaurant. As I'm working currently from Malaysia and our staple food is mostly rice and noodles, I thought that replacing the knife with a spoon would help to speak out to my audience more.

After that I started developing the logo to represent the hairdresser. The most logical item, and the one that most people would immediately connect the hairdressers with would be a hair dryer.

I used a trolley to represent the Grocers. More often than not, people would use a trolley to cart around their groceries, and that helped create the third logo.

The last, and definitely not the least was the navigational logo. I did a little bit more of a research on this because I wasn't sure what I wanted to use to represent the GPS systems. Because there was not specific symbol to show the users what the GPS system is, I decided to use a very symbolic item such as the compass.

The compass was originally used to guide sailors on the seas when they still used maps and coordinates. I think it's a great symbol to represent what I wanted for the GPS.

On the right is a quick photoshopped photo of what each image would look like against a real time version of the app.

Using all this information I gathered through my sketches, I came up with a possible final for my logo. By using colors that attract the users attention. I played around with different types of colors, first with cooler shades, including blues and greens, and then with warmer colors like red and orange.

I find that of the opinions of my friends, they all seem to prefer the icon with the warmer colors. The cohesiveness of the colors make the icons much nicer to look at.

From then on I started developing the logo according to grids. I wanted to break away from the usual four squares, and use things like triangles, or different variations of the same kinds of designs.

I decided that I quite liked the natural, hand drawn look and went with my instincts to use a chalkboard based background and a much more natural stroke, but retaining the color and imagery throughout.

I also tried making the logo by taking out the grid and just having the navigational logo in the center to see if it had a clearer and more significant meaning.

I chose the name Alookator, which is in it's correct spelling, is Allocator. The definition of allocator means to set apart for a special purpose that is designated, or to distribute according to a plan. This is exactly what the app does. It streams services and navigation through a special purpose that is designated for users to find their way around, and it also distributes information to users according to the app plan.

I photoshopped the application into a iphone 5s home screen setting to see if I liked how the app looks against the other apps supplied by Apple and I find that it blends into the whole look very nicely.

I chose the logo that had all 4 images because it plays with color and the attention of the user very well. I like the idea that the user is not quite so sure about what the app is for, and that they have to click into the app for more information to read about the functions and see screen shots about it's uses.

I think that this approach is much funner than a direct approach as it gives the user 90% and the user has to make the other 10% effort to understand the app, much like the very anticipated first kiss from a girl who has to go the last distance to know that you've definitely got her in the palm of your hand!

With all the initial phases concluded, I started working on the interface and how it worked.

The interface generally works the same for all the services provided, except the GPS, which works as a separate but co-existing navigational tool for all the other services.

From my research, I want the information at the front to have the imagery that represents each different service, the name, the distance from the user's stand point, as well as the rating for each place given by people who have the app.

By clicking on the box, a little sidebar will open up which gives the user a more detailed info on the service. For example if it were a restaurant, the logo will pop up, as well as the current menu, prices, or promotions. If it were a salon, the comments from people who have been to the particular salon or the prices for each service they offer will also be information displayed on the sidebar.

The image on the right is a few try outs I did with the point size of the stroke on the images in different sizes. I decided to stick with the 3pt size because it outlines each stroke very well and gives a very definite and clear view to the users.

I then placed my 'text box' onto a background just to see how it would end up looking like. I made a rectangular shape and multiplied the amount by three. I then changed the transparency and also dropped the shadows on the star ratings. I used Fragment Core as my main font.

I managed to sketch up quite a few good ideas for my home page. As I have stated earlier, I wanted to do a loading page, a log in page, and a sign up page. I also feel that social networking connection is very very important for apps now, which will post on behalf of the user on their Facebook or Twitter as updates.

I started making the loading page with the navigation logo I've created at the top. I used a dark green color to show to amount of loading the app has done once the app has been downloaded and opened. The colors at the bottom represent the colors I've used at the start for all the different types of services that the app help users to find.

I used a quirky font that looks almost hand written to match the whole feel of the app's loading screen called Drop Your Anchor. I then photoshopped my final onto the background of an actual iphone 5s to see if loading page I've done fit the app.

To add to the feel of an iphone, I also photoshopped in the loading sign at the bottom, which is a general sign for people to understand that the application is loading.

Once I've put it all together, I reviewed it with my friends, and they all seem to like the feel of the work I've done.

It honestly, at this point, seemed to be coming altogether for me! The application now had a logo and a loading page, and it was time for me to move onto other things.

I feel that the Log In page should be very clear and easy.

As the user has already created a profile, it's no longer needed for them to type out the email address or log in or connect it to their Facebook as it should have already been done before.

I changed the transparency of the text box to about 70%, and I added in the icons that represent the username and password at the side to ease the users.

I used a gradient of olive green to dark green for the log in button, and made that a transparency of 50%. I also made the color of the font as white, and made it 1 stroke darker and thicker.

I also made the 'Forgot your password?' option open at the end to help users who have forgotten either their username or password.

I retained the regular colors at the botton, as well as a smaller version of the logo on the loading page. I put it the title 'Alookator' under the logo to remind users of the name of the app that they are using.

I also retained the background of the loading page and will continue to do so for the sign up page as well.

I retained the layout ensure that the whole application looks very cohesive and coordinated.

On the sign in page, I added in two extra text boxes, which includes the email of the user, as well as the option for the user to sync all their information with their Facebook. This would help them very much with the signing up as they would not need to type in extra info.

This font is called Fragment Core. I used for the title Alookator.

The image below is using the same concept but including all the other imagery into the same format.

I changed all the colors to have a slight gradient from one end to the other. The navigational tool will be a pop up at the bottom and the extra info on the rest would be a pop up on the sides.

I did a few sketches before I started putting it together on Illustrator.

Interface Put to Use

I went out to take photos of some places that I love to go close by to do a series of photos that had a background and a person step in and out with an iphone in the front.

I also took a couple of shot that had just the iphone itself.

As it is clearly shown, the user is able to see the names, distance from venue, and star ratings of each place, with the sizes differing according to how far the user is from his or her stand point position.

The bottom picture shows the app in motion, clearly visualizing how the user would use the app in real time.

As you can see, all the different types of services that is in alliance with the application would pop out. As the user, she or he is allowed to sift through all the services involved and then click on the one that suits their needs or seems most interesting to them.

This motion leads the app to open up a side bar on the right that contains more detailed information of the certain venue which would be of help to the user. This side bar would contain things like menus and promotional items, or even promotional codes and QR codes that will link users to their websites.

The user can then comment or like the service, or even share it on their social networks such as Twitter, Instagram, Facebook or Foursquare, as long as they have registered it to their social networking sites at the sign in option in the front.

These social links will help garner the application more users and help boost the amount of people using it, thus boosting the services that would come in alliance with the application.

These were the initial drafts I had for each imagery that I wanted to use for my logo. It also contains little details about the way the interface would work which I will explain slightly later in my development.

I stuck to my initial sketches as much as possible, and added a little bit of the Instagram flavor at the bottom by giving people the option to like, leave a comment or share it on different social networks.

I then edited the sidebar onto a picture of Subway which I had taken of earlier. I also added in the little first interface, which was to display the name, distance and star ratings to show the users what it is that they had clicked on.

By editing it this way, all the other services will disappear, leaving only the one that the user is interested in.

The photo at the bottom is a real time shot of the app in it's process. In this photo, we can see two of the three functions working at the same time. The last, but not the least, would be the navigation function.

Side Bar Pop Up Put to Use

Navigation Sketches.

Navigation is a side line GPS function that comes together with the app. Think about it like an inbuilt Google Maps or Waze that helps users get to their destinations whilst being able to enjoy other services offered by the application.

The navigation functions on in walking distance or on foot. It also is able to help users go up and down the stairs because it works even in closed areas such as malls. There is a sidebar that comes up that allows users to search for the place. The bottom section of the navigation tells people their destination, the directions toward the destination and the time left for the user to reach his or her destination.

Navigation Put to Use

I feel like my application is definitely well thought out and functions very well in theory. I also feel that if put to use, the app will also function pretty well after the few errors have been ironed out.

The interactivity function comes from the user being able to manipulate the screen and for items to pop out that the user is able to pick for themselves. The navigational tool is also extremely open ended and leaves the user hundreds of options to choose from when selecting a destination.

Had I more time, and gotten reviews from friends sooner, I would've added in a little circle on the top left corner with hightlighted dots according to what they are seeing to show the user how many services there are available in the specific area. I think that would help the user to find things and avoid places that seem to have nothing available for them to look out for.

I would also have loved to add in a game element to the app, much like Waze, where the user would start off as an 'infant', and by commenting, liking, checking into these places, or getting their friends to use the app and check in with them, they will be able to gain points, and eventually be able to use them.

I think this app is great for sharing between friends and getting to know places that are hiding in little crevices in their streets. The star ratings and comments by other can help these companies build up their rapport and support and gain a very positive community of people.