Working from my sketches I have created digital interpretations in photoshop of what my app would look like. I have designed this for the iPhone 6 - 750 x 1334px @ 72ppi. Within photoshop there is a new feature called 'Device Preview', this allowed me to view my designs on my phone (iPhone SE). This was really useful because I was able to see how the design actually looked on a small screen and whether the text was at an appropriate size. Any changes I made from my computer would also automatically update and I would be able to see them on my phone which allowed me to make any needed changes.
APP ICON
Typography
Capriola
LANDING PAGE:
The first screen has a clean simple design, the main focus being the search bar in the middle. I wanted to keep this as simple as possible with nothing to distract away from this main function of searching. The heading is 44pt to highlight the name of the app, and become distinct on the screen. The icons are simple line drawings at a reasonable scale and weight to make sure they stand out as buttons.
Free Icons:
Knife and Fork - Freepik from www.flaticon.com
Magnifying glass - Madebyoliver from www.flaticon.com
USING THE SEARCH BAR:
If the user was to tap on the search bar the iOS keyboard will come up from the bottom covering three quarters of the screen. The user would begin typing ingredients, separating each one with a space, this will organise them into tags. The search bar will begin to drop down to accommodate the text.
Typography:
Heading ':Platter' - Capriola 44pt
Tags - Capriola 17pt
SEARCH RESULTS:
If the user was to press either the search button on the keyboard or the magnifying glass icon they would be taken to the related recipes screen. This would show the recipes that match with the inputted ingredients. The arrow on the left indicates the back button which allows users to go to the previous screen. The number on the top right would indicate how many matches, users will then be able to scroll through. After the number of matches recipes will begin to show with as many as the searched ingredients as possible, the further you scroll the less accurate the match.
The image of the recipe takes up half of the screen and the name, prep and cook times, serving, brief description and rate of ease take up the other half. The serving is also editable when tapped on, this will automatically update the ingredients.
Typography:
Heading 'Recipes' - Capriola 44pt
Name of recipe - Capriola 24pt
Description - Crimson Text 17pt
Key info - Capriola 18pt
MY FOOD
Pressing the bottom right icon (shaped like a fridge/freezer) will take you to this screen, which is the 'My Food' section. This icon will turn into a house when selected to give quick access to the home screen (the search). At the top of the screen is a search bar specific to the 'My Food' section, which allows the user to quickly check whether they have an ingredient in. Below this on the left is the 'Fridge' button which will take the user to items they have in their fridge. To the right of this is the 'Freezer' button which will take the user to items that they have in their freezer. The 'Cupboards' button is exactly the same as the previous two, but storing items from the cupboards. The 'Personal Suggestions' button takes the user to a screen with suggested ingredients to try based on previous recipes made. The 'Scan In' button will take the user to a screen which allows them to scan products barcodes, this will automatically store them and record their sell by date. The 'Sync' button will take the user to a screen where they can sync with their online shop.
Typography:
Heading 'My Food' - Capriola 44pt
Buttons - Capriola 44pt
Free Icons:
Barcode - Dave Gandy from www.flaticon.com
Snowflake - Freepik from www.flaticon.com
Synchronisation - Google from www.flaticon.com
FRIDGE LAYOUT
Tapping on the 'Fridge' button will take you to this screen. The top bar changes slightly with a plus sign on the right hand side where users can add items. Again there is a search bar but this time specific to the 'Fridge'. Items are listed with the use by date on the right hand side. Items can be edited or removed by tapping on them.
This layout will be used for the 'Freezer and 'Cupboards'.
Typography:
Heading 'Fridge' - Capriola 44pt
Items - Crimson Text 44pt
ADD/EDIT ITEM
If you were to edit or add an item the user would be taken to this screen. The top bar changes on the right to a minus sign, where you can remove the item. Then there are two sections for the name and the expiry date. The user would tap on them and the keyboard would come up from the bottom.
Typography:
Heading - Capriola 44pt
Name and Expiry Date - Crimson Text 44pt
PERSONAL SUGGESTIONS LAYOUT
Tapping on the 'Personal Suggestions' button will take the user to this screen. It will list suggested ingredients to buy based on recipes made. If the user taps on the ingredient it will take you to a suggested recipe screen.
Typography:
Heading - Capriola 44pt
Ingredients - Crimson Text 44pt
RECIPE SUGGESTION FROM ITEM
If the user taps on one of the ingredients it will take them to this screen with a recipe suggestion. The image is large at the top of the screen, below that will be the name of the recipe, prep time, serving, description and rating of ease. In the bottom right hand corner will be an arrow to navigate to the ingredients screen. Swiping left and right can also be used to navigate through the screens.
Typography:
Heading 'Suggestions' - Capriola 44pt
Recipe name - Capriola 44pt
Information - Capriola 24pt
SCAN IN ITEMS LAYOUT
If the user was to tap on the 'Scan' button this would take them to a screen which utilises the phones camera as a means of scanning in barcodes. When the barcode has been scanned a box will pop up asking the user where to store the item.
RECIPE LAYOUT
If the user was to tap on one of the recipes the layout would be like this screen. A large image at the top, with the title of the recipe and all the other information underneath. Swiping right or using the arrows will take the user to the ingredients. Again the serving is editable and will automatically update the ingredients.
Typography:
Heading 'Recipes' - Capriola 44pt
Recipe name - Capriola 44pt
Description of info - Crimson Text 18pt
Other info - Capriola 24pt
INGREDIENT LAYOUT
If the user was to go the 'Ingredient' screen this it what the layout would look like. Ingredients would be in a list format with a plus button on the right hand side, which will add them to a shopping list. Swiping right or using the arrows will go to the first step.
Typography:
Heading 'Ingredients' - Capriola 44pt
Ingredients - Crimson Text 44pt
'Step One' - Capriola 24pt
STEPS (METHOD) LAYOUT
If the user was to go to the 'Step One' screen this is how it would be laid out. The information clear, concise and easy to follow. An arrow at the top and bottom would lead to 'Step Two'.
Typography:
Heading 'Step One' - Capriola 44pt
Info - Crimson Text 44pt
'Step Two' - Capriola 24pt
SYNC WITH ONLINE SHOP LAYOUT
If the user was to tap on the sync button in the 'My Food' section this is how the screen would be laid out. A sign in box would appear where the user would enter their details for their online shop account, this would then be recognised and items would be synced to the app.
Typography:
Heading 'Sync' - Capriola 44pt
Buttons - Capriola 44pt
Username and Password - Crimson Text 44pt
CALENDAR LAYOUT
If the user was to tap on the calendar icon at the bottom of the screen this is the layout it would bring up. The icon would turn into a house to indicate the home screen. On the top bar on the right hand side is a '+' symbol which would add items use by dates, this is also linked to the 'My Food' section, if you put a date with the items it would link to this calendar. Below that is a bar to navigate through the months, with the calendar below that. Dark circles mark the use by dates of food, if the user taps on them it will show the details for that item. Alternatively tapping the alerts button will bring up all of the items going out of date that month, the number indicates the amount of items.
The scan and sync buttons link to the screens previously shown.
Typography:
Heading 'Calendar' - Capriola 44pt
Other - Capriola 44pt
SHARE LAYOUT
Tapping on the middle icon at the bottom, which is the share icon, will take you to this screen. This allows access to the users camera where they can take a photo of something they have made, the capture button is the dark circle in the middle, when pressed a camera shutter sound will be heard. The user then has the option to apply a filter, similar to those on Instagram. Then when the share button is tapped, options for which social media site will appear, such as, Facebook, Instagram and Twitter.
Typography:
Heading 'Share' - Capriola 44pt
Other - Capriola 44pt
SHOPPING LIST LAYOUT
If the user was to tap on the shopping list icon it would bring them to this screen. The icon would then change to a house indicating a quick link back to the home screen. On the top bar is a '+' symbol which is where users can add a shopping list. Below this will be a list of shopping lists the user would create. At the bottom of the screen is a button to link to online shopping.
Typography:
Heading 'Shopping List' - Capriola 44pt
Other - Capriola 44pt
CREATING A SHOPPING LIST
If the user tapped on the '+' symbol to create a shopping list this is screen that would come up. The top bar would have an editable name where users can choose what they want to name their list. To the right of that is a tick symbol which when tapped would save the list. Below that items would be able to be inputted on the dark bars, the box to the left is a checkbox to mark off items.
Typography:
Heading - Capriola 44pt
Inputted text - Crimson Text 44pt
HISTORY LAYOUT
Finally the last icon is the history icon, tapping on this will bring up this screen. It will show recipes that you have completed in a list format. If the user taps on one of the recipes it will take you to description, ingredients and method.
Typography:
Heading 'History' - Capriola 44pt
Other - Capriola 44pt
OTHER ATTRIBUTES TO ADD TO THE USER EXPERIENCE.
- Loading Timer
Applying a loading timer such as the one above will indicate to the user that their inputted request is working. Without one users will be unsure whether the app is working. This will mainly come up when using the search bars. If the user is waiting too long for things to load their attention will be lost, so I will make sure to monitor and reduce load times.
- Voice control
Within the app I want to add a voice control system which will allow users to use commands such as 'Read aloud' which will read the current screen that they are on. Users can also navigate through screens using their voice 'Next' and 'Back'. This feature will be very beneficial to the user when they are cooking and want to work hands-free, not touching the device with dirty hands.
Feedback:
People really liked the sophistication of the design, the black and grey platform helped to show off and highlight the images, making the recipes seem more attractive. The typefaces chosen were appropriate, specifically the heading typeface which with its playful letterforms and friendly curves, appealed to a student market. Other than the recipe information, the content seemed to be very text heavy, but it was done in a clear, concise way which made it more understandable.
A more engaging formatting of the text in the steps section could have been taken, but it does remain uncomplicated and easy to understand. One feature that was particularly liked was being able to edit the serving size and it updating the recipe with the new weights and measurements, this just helps to make life a little bit easier.
The search aspect within the design works really well and the navigation is clear and connected.
No comments:
Post a Comment