# A3: User Interface Prototype

This user interfaces prototype (or horizontal prototype) has the following goals:

1. Help to identify and describe the user requirements, and raise new ones;
2. Preview and empirically test the user interface of the product to be developed;
3. Enable quick and multiple iterations on the design of the user interface.

This artefact includes three elements:

1. Overview of the interface elements and features common to all pages;
2. Overview of the information architecture from the viewpoint of the users (sitemap); and
3. Identification and description of the main interactions with the system (at least two), organized as sequences of screens (wireflows).

The interface's descriptions are presented on the end of the document.

## 1. Interface and common features

MyGarden is a web application based on HTML5, JavaScript and CSS. The user interface was implemented using the [Bootstrap](https://getbootstrap.com/) framework.

*Figure 1: Main Page of site*

1. Logo
2. Navbar
3. Content
4. Footer

In this figure, some characteristics common to all the pages are highlighted:
- We have a responsive design, with different displays for different breakpoints (smartphone, tablet and PC)
- Different sections have clearly distinct styles in order to highlight distinct hierarchies of information, and assist with the visual flow.

## 2. Sitemap


*Figure 2: Sitemap*
<!-- Sitemap presenting the overall structure of the web application.
> Each screen must be identified in the sitemap.
> Multiple pages of the same screen (e.g. student profile in SIGARRA) are presented as page stacks. -->

## 3. Storyboards

> Storyboards for the main use cases of the system.
> Do not include trivial use cases.

## 4. Interfaces

<!-- Screenshots, structured in subsections, including a reference, a description and a URL to the working version. -->

### UI01: Home

### UI02: About

### UI03: Admin

#### UI04.1: Admin | Dashboard

#### UI04.2: Admin | Supplier Request

#### UI04.3: Admin | View Products

#### UI04.4: Admin | View Users

### UI05: User
#### UI05.1: User | Profile

#### UI05.2: User | Favorites

#### UI05.3: User | Periodic Buys

#### UI05.4: User | Edit Profile

### UI06: Supplier
#### UI06.1: Supplier | Products

#### UI06.2: Supplier | Create Product

#### UI06.3: Supplier | All Products

#### UI06.4: Supplier | Bundles & Cupons

#### UI06.5: Supplier | Create/Edit Bundle

#### UI06.6: Supplier | Create/Edit Cupon

### UI07: Login

### UI08: Register Client

### UI09: Register Supplier

### UI10: CheckOut
#### UI10.1: CheckOut|Cart Infromation

#### UI10.2: CheckOut|Payment

#### UI10.3: CheckOut|Periodic Buys

#### UI10.4: CheckOut|Payment Information

#### UI10.5: CheckOut|Pop Up Order Accepted

### UI11: Products List | Filters

### UI12: Product Detail

### UI13: Supplier Detail