after effects notes

Below are my notes from the after effects sessions. I found these sessions very helpful as i had never used after effects before, and i enjoyed learning a new program that i could use in other projects in the future.

Finalising app

Start up of application

List of products

app development

Front page / home page design

Above are experiment how the design of the home page, i placed i the product compositions that i design earlier and experimented using a bar of amber. I choose to do this as i thought it would be a nice link to the branding and also be in keeping with the colour scheme. Out of the above experiments i decided that i would use to bar of colour behind the products, i thought this was an  appropriate choice as it made the products stand out on the page which is important as the products have been chosen specially for the user as they were based on the information they inputted when creating a profile. 

Recommended page design 

Above are my designs for when the user presses recommended, the design on the left is what appears after recommended is pressed.In recommended i divided it into 6 different headings, the same as what are in the menu, this makes it easier to use as the results are already filtered for you into the headings. The middle and right images are my designs for makeup and skin care, the other 4 headings will be in a similar style to keep the design consistent. I have chosen to use 6 products, including the 3 on the home page as i think any more would be unnecessary as thy are only a suggestion to the user and not a compulsory part of the app but an added bonus feature. 

When designing these I considered how you would favorite the product and also how to set a notification for the product. After taking this into consideration i decided that i would experiment with placing the notification icon in the top left corner of ever product so that it was in easy access for the user no matter which product they were on. 

Below are experiments of this design idea : 

After experimenting this on the corner of the products in the recommended section of the app, i decided to apply this to all the products. This is an appropriate design decision as it allows the user to as a notification for any product on any page with easy, and with having to open the notifications page and enter it manually, making it an efficient feature.

Offers and  Reviews

Above are my design for the offers and review pages of the app. Both are identical in style. I decided not to have a categories page like i create for the recommended page, as i wanted the recommended page to feel personal to the user as the products are individual to them, unlike in the reviews and offers page. Therefore is decided that the most appropriate design was to simply list the products but also include the subcategories at the top of the page. By doing so the user can still filter the results, but also at first is shown all the offers and reviews, giving them the chance to possibly see something on offer that they didn't necessarily have in mind. 

Menu

Above are the design for the menu, on the left are is the design when no headings are open, and on the right is an example of when a heading is open. Once open the heading reveals a list of subheadings and the option to view all. This will be the same with all the other headings in the menu. 

Above are images of a development that i did of the menu. When a heading is open/selected the box it is in turns amber. I choose to try this as i thought it was a nice link to the home page and the colour scheme of the app, for these reasons i decided it was an appropriate design decision. Not only is it a nice link to the colour scheme it also highlights the open heading in the menu.

Products from menu

menu > make up > view all > face

menu > Skin > view all > face

Above are 2 examples of pages that you can get to from the menu. The images on the lefts are what appears when you click the view all heading in either the makeup or skin care categories. This design is similar to that of the offers and reviews pages. All pages have a back button, and a link to the home  page and have the subheadings at the top of the page allowing the user to navigate with ease without over-complicated filters. To navigate to the face section of the make up you can either, search for it or navigate yourself in one of 2 ways, menu > makeup > view all > face or menu > makeup >face, all are quick ways to navigate simply using either the menu or the search option. 

product profiles

Above are the designs for 4 product profiles. The design for these is similar to the rest of the app but with a few different alterations such as the subheading changed is to product name and there is only one product box. As well as these small alterations the products details, specifications, add to favorites icon and product prices were also included. The order that is information was presented in was very important to efficiency of the app as the user will want to know certain details. The order i decided to put the information is was, product prices, product description, product specification and then reviews. I chose this order as the main intended purpose of the app is for price comparison so that had to be first as it is the most important part, second i chose to put the description as this is important in case the user is unsure if it is the right product they will be able to decide from the description. Thirdly i put the specifications, this is because if the user is still unsure it is the right product they might be able to decide for the specifications, they are also included so that the user can check if it is same from them to use if they have any allergies, and last i put the reviews, although these are important for similar reasons they are less important as they are not necessary to the success of the apps efficiency.   

After creating the above design layouts the rest of the designing for my app was simple as i used these a basic template for the rest of the app.

Scanner

Above are my designs for the scanner section of the app. To the right is an example of the product profile of the product that is being scanned which is the same as all the other product profiles. To the left is the scanner itself. Above the scanner box is a brief description of how to use the scanner, I thought this was necessary so that the user would know how to use it when they first use the app. When asking for feedback about the design of the app scanner feedback was positive and they liked that their was a description on how to use it as it maybe confusing, they also mentioned that after using the scanner a few times the description would not be needed and would be in the way. After reciving this constructive feedback i decided that i would add an x symbol in the top right corner above the description so that the user could minimize it when they become used to using this feature.

Search

Above are my designs for the search part of the application. On the left is the window that appears when the select the search icon. Where the word shampoo is that's the search bar, once you have entered your search the window on the right appears this is the same as all the other product window's  but without the subheadings.  

Favorites

Above are the windows for the favorites. The design on the left is the first design i created it is similar to all the other product windows but with the favorites icon down the center. After creating this design i considered the use of hearts down the center and if they were needed or if they would look better with a fill to match the notifications icon. After experimenting with this i decided that the favorites page did not need these as the product was there for a reason and the user will know it is a favorite if they added it, it was an unnecessary detail. My final design for the favorites page is the design on the right. 

Notification

Above is my design for the notification part of the app. The design is based on a variation of product profile, but this design has numerous products one after the other this the most important information at the side of the design. To edit the notification you simply click the product image and to add a notification manually you press the + button at the bottom of the page. This is an appropriate design for this part of the application as the design needs to be simple to not over complicated what need to be a working feature of the app, the more complicated that design the less useful it becomes as the user will be deterred from using it. 

Settings

Above are the designs for the settings windows, settings menu, notifications, profile, and connection (left to right) there is also an option for reporting a problem in the settings menu. I found that these were appropriate settings for my app as the user want to be able to customize how the notification appears on their device, they will also need to be able to update their profile settings such as profile picture, details, sign out/ log in and retail preferences, also have the chance to either share their profile with other people or a product that they have found on offer.

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.