WireFrames - mhmunem/Grocery-Comparison-App GitHub Wiki
Home Page: We decided that we would want a static navigation bar at the bottom of the screen for consistency, and to help users easily recover from mis-taps. This means that where ever they are in the app, the app’s main pages will be one press away. We think that a home page button, a search button, a grocery list button, and an account button would be adequate. The home page consists of a search bar at the top of the screen and various lists of things such as product deals, popular products, recently bought products and shops. The search bar has a filter button, which the user will be able to use to find exactly what they want. Additionally, the search bar has a button to search for a product by scanning its bar code with a mobile device’s camera. Beside the search button there is a hamburger menu, which, when selected, will display options for the user that are not a part of the central function of the app. For example, settings, selecting your area.
{width="150" height="293"}
Search Page: The search page has the search bar in the same place as the home page for consistency. Under the search bar, there is a list of boxes that each display a product. When the user searches something, all items that the search applies to will be displayed. Items that the search only partially applies to will also be shown, but with a lower list ranking (the user will also be able to turn this functionality off). Each box has an image of the product, as well as primary information about each product, such as its name, weight, and price. The user is able to select either a ‘plus’ or ‘minus’ button to add or remove items from their shopping list, and they can add a product to their ‘favourites’ list by selecting a small heart icon.
{width="171" height="335"}
Shopping List Overview Page : When the shopping list button on the navigation button is selected, the user is brought to the shopping list page. This is a list of shopping lists, from which the user can create, name, share, and delete shopping lists. It will display the lowest available total price of each list, as well as other potential attributes. These attributes might include the singular store at which the items are cheapest, an icon if a product is unavailable, and pictures that the user can set for each list.
{width="168" height="329"}
Product Details Page When a product is selected, whether it is on the search page or the shopping list page, they will be brought to a product page. This page has the same details from the product’s search page box, but it also displays the history of the product’s price in a graph. When a point on the graph is selected, it will show the cheapest available price on that day, and the supermarket it was from below the graph. By default, the most recent date on the graph will be selected, and the current prices will be displayed. We may also include nutritional information and an item description below the prices
{width="172" height="337"}
Shopping List Page When a shopping list is selected, they are brought to a page that displays the items in that shopping list. The items are in similar boxes to the search page, however they also have tick boxes beside them. These tick boxes are for the user to tick once they have collected the item whilst shopping. It also displays the total price of the shopping list at the bottom of the page, and it will have a list of the nearest supermarkets that have everything in stock, from cheapest to most expensive.
{width="179" height="351"}