logo placed and app development

Below is a screen shot of what the top icon/navigation bar will look like. Now the logo has been placed in the app is starting to come together.

mock ups of how the bar looks on the app pages: 

After creating the main feature of the app it was time to start developing the rest. When design i had to keep in mind the audience, the intended purpose and the intended aesthetics that i had identified previously. 

I started by creating the compositions of images that would be for the recommended, offers and reviews part of the front page. Below are the compositions that i thought were the most appropriate for these headings. I choose to use 3 images in 3 different boxes as it looked like they were ranked and the different sizes of boxes resembled a 1,2,3 podium, it is a metaphorical podium for the products astray are being shown of to the user and are chosen for a reason. The simple white background shows off the products as not to distract from it and small shadow behind the box adds depth to the compositions to make then stand away from the page.

The next thing i had to design was the back button, this was important  for my app design as it need to be quick to use, having a back button is important for this as it will allow you togo back to the previous page without having to start over again.

Above is the design for the back button, i have chosen this as this symbol is symbolic of an arrow and is well know with app users. I chose to use this instead of an arrow or the word back as it is symbolic of this things, and is an accurate reflection of the app as symbols are used for speed.

For the home button i have decided to use the logo, this is because there is no need for a separate home button as on most apps use the logo, this is appropriate as the app is used for comparison and this is the main reason the user will be going on the app, the home page is mainly for suggestions if the user is looking for something new or different to what they usually buy. It is also appropriate as it is a good use of what would be an un used aspect of the design.

branding

The chosen name for my app is amber (all my beauty every retailer). When designing my logo i have to keep in mind my chosen colour scheme which is white, black,grey and amber. Also the chosen typeface which is Angelina. 

After experimenting with a range of different layouts, type positions, colour gradients and kerning of the letters, i decided that the last logo would be the one i was going to use. I decided that this was the most appropriate as it is simple, legible, and playful as they type looked personal and showed a clear link to the colour scheme that i had chosen for my app, The addition of the black gradient to the amber is subtle but incepting with the colour scheme and creates a gold middle tone that creates a luxury feel to the overall ascetics of the design. 

Unique users

Name: Jenny Smith 
Age: 43
Hobbies: Cooking, Reading and Yoga
Salary: 18,390
Description: Mother of three, married with full-time employment as a Accounts Payable Clerk, and lives on a strict budget to save for her children future.

Name: Molly Ann
Age: 19
Hobbies: Music, photography 
Salary: 1500
Description: Full time student studying photography with a part-time job at Costa, has a restricted budget because of student loans. 

Name: Sophie Thorton
Age: 26
Hobbies: Clubbing, Dancing and Socializing
Salary: 12,000
Description: Works part-time as a Retail assistant and loves going out on the weekend. Has a small budget as we is saving to go travelling.






Above are brief profiles of users that i identified that would use my app, the target audience is mainly aimed at women. The above profiles all lead busy lives and need to save money or have a low budget for beauty products, this makes them an idea user for my application as it saves them time in their busy life style and also money to help save towards other things.

App description

Before designing a large part of the app content and adding in products and product details i thought it was important to define my app and the features it has and why.
The app is not to buy things from it is purely for comparing but will give you a link to the website that it is being sold on. When first using the app it will ask you to make a profile, when making this you will select the shops that you want the app to compare between. there will also be the option to collate products that you regularly use and buy so that if can notify you when there is an offer on them. Once your profile is set up you can then later edit the details you have imputed so you can keep it unto date with what you are using or shops you are going to. The main aim of the app is to make searching for the product as the cheapest price a more efficient experience, so everything will be designed to be quick and simple to use. The recommended products on the home/main page will be tailored to person based off their profile and will be updated once a week, similarly with the reviews, this to make the users experience more inviting and make it feel personal to them.
Good point that came up in some feedback i received was is it possible to tailor it to people how are allergic to things, i thought this was a good idea but didn't want to focus too much on it and make it another feature as i didn't want to over complicated the app, a solution that i found to this was to include a product specification description that tells you what is in the product, this will be under product description of al most every product so that if the user does have an allergy then they will be able to see if they can use product.
The app also has a bar code scanner to improve its efficiency so that if you were out and wanted to know if the product was cheaper else where then you could find out this information quickly without visiting every store, this could also be used to scan your products at home if you dont know the name of it if it has rubbed off or just as a quicker way to search. once the item has been scanned a product description window with open.
An other feature that the app has is the being able to set notifications to remind you when and were to buy a product for which could be used as a reminder for when your going shopping, or just as a reminder to buy a product that is running out, this will be very useful for the busy user as these things can easily be forgotten.
The very last feature that the product has is a favourites section. This is were you can collate products that you are thinking of buy or waiting to come on offer.

typeface

Before designing my final i app i need to choose an appropriate typeface to be used throughout my app, when defining the aesthetics of my app i decided that the app need to feel personal and considered using a handwriting style font, i think this style would be most appropriate as the most personal thing that people share without asking is their handwriting as no two persons handwriting will be the same similar to fingerprints. Handwriting style font would be more appropriate than a san serif, serif, slab, bold etc typeface because they are all to clinical and most dont seem to have any personality which is what i want my app to have. I also had to keep in mind licensing, because of this is decided to find unlicenced typefaces that were free to use.

Above are a selection of typefaces that i found and took into consideration to use for my application. I choose these as they are all unique, legible and all have a handwriting look to them. Out of the 5 typefaces i think colours of autumn and angelina are the most appropriate because they both have the intended handwriting style that i was looking for. Colours of autumn looked to have lots of personality using a variation of stroke widths. It is very legible as all the letters were uppercase. Angelina has a very soft look and feel to the letter forms while still having the looks of handwriting and personal. It does not have joining letter forms which increases its legibility.

Out of these typefaces i have chosen to use Angelina as its letter forms and nicely shaped which is good for legibility, which is important in the app as it is being used for efficiency and type needs to be legible when used quickly,  i think is is the most appropriate typeface for its intended purpose because of this and it  has personality to make it feel personal and isn't too artist it is simple yet effective for its purpose.  

App aesthetics

To make my app look and feel like a proper application on the market i have to consider the aesthetics of the design and the feel i want it to have. My target audience for the application is women and possibly men looking for a beauty product at the cheapest price in shops that they go to without having to visit every shop/website. With the app being used for efficiency the apps design will need to be simple, effective, efficient, and comparative.

To make the app look simple the screen will have to contain only the necessary information and icons for easy navigation, by doing so this will make the app efficient to use.

The app creates a profile of the unique users and collects data from the shops that they like to shop at and products they usually buy, because of this it will help the app make comparisons that are useful for the user and make it as effective at its purpose as possible. 

With the app creating a profile of the user and being personalised to them i wanted to create it so that it had a personal feel to it without looking unprofessional. This could be reflected in the choice of typeface possibly using a font that looks like handwriting.

Colour scheme

The colour scheme of the application will need to reflect its purpose, intended audience and overall intended feel to the app, but still wanting to make the app feel personal. Looking at the research into existing apps i found that most use a white background, this works well as it is bright, clean looking, doesn't look overcomplicated/too distracting and keeps all the attention on the products and information, Because of this i think the use of white would work well as it would draw attention to the products which is the main focus point of the application.

For the type i will use black/grey. Black for the more important text and grey for subheadings and links.

With the apps name being amber i think it would be appropriate to use a hint of amber to highlight certain part of information throughout the app and add a statement colour.

colours - white, black, grey and amber

development of wire framing

After creating these icons i placed them into the wire frame to see what they looked like. Once placed in i found that the icon worked well as they were recognisable, so did their intended purpose and also make it start to look more like an app. After further consideration i decided to experiment with the placement of the icons along the bottom as the looked unnecessarily large. 

Above is a development experimenting with the placement of the icons. I found that this freed up the screen and allowed the icons to also of easy access on any page. When receiving feedback on the preferred location of the icons 3 out of 4 people said they preferred them in the menu bar as allowed the screen to focus on product/s but they were still in easy access in the menu, they said it was important to not have such a cluttered screen as the app is for devices with small screen and would limit the visibility of the rest of the app features. From these results i decided to stick with having the icons in the menu bar as it kept all the useful links together freeing the rest of the screen.

Icons colour changed

Originally the colour of the icons were black to contrast with the white and make them stand out, after showing this to a peer they suggested changing them to a more subtle colour as the black was  too much of a contrast and would make them look over powering compare to the products and also made the app look unprofessional as they didn't look sleek enough, this was a valid point as didn't want the icons to distract the user while looking at a product as this would slow down the efficiency of the app and make the app look unprofessional. From this feedback i experiment with different colour and decided that a grey would be most appropriate as it matched the colour scheme, but also wasn't as bold as the black but was still noticeable. 

After changing the colour of the icons on the main icon bar i continued by changing the other icons colour so that they were all the same and looked like part of a set. As well as changing the colour i decided to change the barcode scanner icon also as i thought the design was unnecessarily complicate compare to the other icons and didn't look part of the set. To make the icon look part of the set with the other i decided to make it simple by using the barcode lines and putting them inside the circle, this was an appropriate change as the icon now looked like the others that it will be along side i the menu bar. 

After showing my icons to a peer for feedback they questioned me on why i choose a star over a heart for the favourites icon, my answer was that id seen on other apps and thought that it was a popular and familiar icon to use, their opinion on it was that the heart you also be familiar as it also is used for favourites and that it would would be favourites over the start for an app aimed mainly at women as they saw it as a very feminine touch, i also agreed with their opinion and feedback as i thought it would also add a more personal feel to the app and not be generic using a popular icon, because of this i decided that i would change the icon to a heart.