|
Product UI Requirements I. User Tasks Arrives to home page, Finds items to buy. Requirements A homepage as a start point for browsing and navigation through content, finding items to buy. Store department pages for browsing within particular section. Search results page to provide suitable set of items for user's searches. Pages to design Homepage. Store Department page. Search results page. How the design could achieve these requirements The homepage design will have clear top-level navigation with sub-categories, will contain user's shopping lists, browsable store departments with collections of products that the user might like to buy. The page will allow user to get access directly to shopping cart.Store department page is dedicated to the set of products for particular department divided by subcategories.Search page allows user easily search the entire inventory of products. Features, actions and content that each page will contain High-level navigation and sub-categories, user's shopping lists, collections of products (potentially based on popularity, season, holidays, history of purchases, etc.). Search by store departments, products and product tags. When user just started with entering of search query it suggests latest and popular searches. Search can be done by entering product name, department, or by tag, results (groceries) are grouped by store departments. II. User Tasks Adds items to cart. Requirements Homepage and store department pages which allow to add a unit of product to shopping cart.Individual product pages and shopping lists page which allow users to set needed quantity of product that should be added to the cart. Pages to design Homepage. Store Departement page. Product Detail page - there are available multiple templates depending on the type of product. User's Shopping Lists page, Detail page of shopping list. How the design could achieve these requirements Product detail page should have clear structure of the content and provide comprehensive description of the product, suggest similar products, discounts and special offers for it with call to action to add the product to cart and continue shopping. Shopping lists are created by user or created automatically based on frequently ordered products. Their aim of this page is to add favourite products to shopping cart easily in one click. Detail page of shopping list allows user to add to cart the whole list or any quantity of each product separately. Features, actions and content that each page will contain Product detail page should contain following elements: product title, hight quality photo, price / price with discount, special offers (if any), short description which can be expanded if user would like to, related (similar) products, UI control that allow the user to specify quantity of product (in required units) and add it to shopping cart. Shopping lists page should contain collection of product lists with separate 'Add to cart' button for each list item, so user can add the whole list in one click. User also is able to create new shopping list from this page - there should be 'New Shopping list' button for this. Detail page of shopping list should contain collection of product items with product title, hight quality image and price / price with discount, special offers. It should have general button to add the whole list to the cart, button to edit shopping list and separate 'Add to cart' button for each item to handle a case if user wants to add only few products from the list. III. User Tasks Checks out, Signs up. Requirement We need a checkout flow that requires a user to log in or sign up before completing fields for: shipping address, billing address, credit card information, delivery options, confirm and pay. If user has completed checkout process earlier (has placed an order once) then all those info should be saved and filled automatically for next checkout processes without need to enter it again each time. Delivery confirmation should appear when checkout process is done and the order is placed. Pages to design Shopping cart page. Login / Sign up forms. Checkout page with three subsections: Payment info, Shipping address, Delivery options (date & time). Confirmation / Place order page. How the design could achieve these requirements For not logged in user we need a design for login / sign up process that appears / feels short. For first time users the checkout process should appear smooth and consistent and ask user to enter all needed info gradually, step by step, provide tooltips where its needed. Delivery confirmation should appear to inform user that his order has been received. Features, actions and content that each page will contain Shopping cart should contain a feature to edit / remove items from the cart, 'Checkout' button to start checkout flow. User should be able to Login / Sign up with an email or social account. Checkout page should contain subsection for each portion of information that should be entered: Payment info, Shipping address, Delivery options. All info should be filled automatically if user did it in past sessions. Confirmation page informs user that his order has been received. Appropriate error messages for incorrectly entered info. Wireframes
|
|
|
