The project consists in developing a global marketplace which specializes in the sale of gaming related digital products using redemption keys.
This artefact contains the specification of the horizontal prototype. With the release of this artefact it was possible to:
- Validate the correctness of the previously defined requirements
- Define the design concepts of the front-end isolated from the back-end implementation stage.
- Create a digital interactive tool that ensure the quality of the initial mockups projected in paper
- Clarify potential new requirements that may raise from a prototype development
| Desktop | Mobile |
|---|---|
 |
 |
Keyshare is a full responsive web-application based on HTML5, JavaScript and CSS. The frontend was developed using the boostrap4 framework.
| Desktop | Mobile |
|---|---|
 |
 |
Main page of the website where you can see the most popular games and the most recently added.
| Desktop | Mobile |
|---|---|
 |
 |
About page of the website is where you can learn more about the website's goal and vision.
| Desktop | Mobile |
|---|---|
 |
 |
Cart page is where you can see the items you have selected for purchase.
| Desktop | Mobile |
|---|---|
 |
 |
FAQ page is where you can see the most frequently asked questions and their answers.
| Desktop | Mobile |
|---|---|
 |
 |
Contact page is where you can send an email to KeyShare so that it is easier to contact the website's administrators.
| Desktop | Mobile |
|---|---|
 |
 |
Product searching page is where you can find, order and filter all products based on genres, categories, platforms, maximum price, lowest price and release date.
| Desktop | Mobile |
|---|---|
 |
 |
Sign in/up popup is where you can log in or register and account to be able to buy and sell products.
| Desktop | Mobile |
|---|---|
 |
 |
Add/Edit Offer is where you can sell a game. You have to select a game, how many keys you would like to sell, define discount dates and choose the price.
| Desktop | Mobile |
|---|---|
 |
 |
Product page is where you can see the details of a product, the offer each seller is placing, the feedback of each seller and also add an offer to you cart.
| Desktop | Mobile |
|---|---|
 |
 |
User profile page is where the user can change his email, description, password, profile picture, see all the feedback he was given and delete his account if he so chooses.
| Desktop | Mobile |
|---|---|
 |
 |
User profile page from another user is used as the profile page of another user. One user will have the ability to see in this page the profile picture, the email and the description of another user aswell as the feedback given to him.
| Desktop | Mobile |
|---|---|
 |
 |
User profile page as banned user is almost identical to the regular user page but in this case the user is banned so he has been vetoed from doing certain actions. The user will only be able to change his profile picture and password. He will also still have the option to delete his account or, since he is banned, make one and only one appeal to the admin describing his situation and why the ban should be lifted.
| Desktop | Mobile |
|---|---|
 |
 |
User purchases page is where the user can view all his past purchases, view their keys, give feedback and report sellers.
| Desktop | Mobile |
|---|---|
 |
 |
User purchases page as banned user is where the user can view all his past purchases and view the key, but since he is banned he will not be able to give feedback to sellers or report them.
| Desktop | Mobile |
|---|---|
 |
 |
User offers page is where the user can view all his current and past offers as well as choose to edit or remove a current offer.
| Desktop | Mobile |
|---|---|
 |
 |
User offers from another user is where the user can see another user's current offers if he has any.
| Desktop | Mobile |
|---|---|
 |
 |
User offers page as banned user is where the user can see his past and current offers but since he is banned he will not be able to edit his current offers only delete them. Also it is shown to him that his current offers no longer appear in the website as purchasable products instead they only remain in his current offers section in case he is unbanned from which point on, if that happens, all current offers will start appearing again as purchasable products.
| Desktop | Mobile |
|---|---|
 |
 |
User reports page is where the user can view all his reports agaisnt sellers and see reports that were made against him from buyers.
| Desktop | Mobile |
|---|---|
 |
 |
Report page is a dedicated page where a buyer who reported a seller can discuss with that seller and an admin in order to solve the situation. A seller is able to defend himself if he feels he is being wronged. An admin will take the final say in what happens.
| Desktop | Mobile |
|---|---|
 |
 |
Checkout stage 1 is where the user inserts more information regarding billing the purchase.
| Desktop | Mobile |
|---|---|
 |
 |
Checkout stage 2 is where the user can view the details of the purchase he is about to make and proceed to pay for the items.
| Desktop | Mobile |
|---|---|
 |
 |
Checkout stage 3 is where the user can see if the payment was accepted and return to his past purchases page to see the key or keys he just bought.
| Desktop | Mobile |
|---|---|
 |
 |
Admin Dashboard is the admin's main page where he can see overall details and navigate to other pages.
| Desktop | Mobile |
|---|---|
 |
 |
Admin login page is going to be used by the admin to authenticate himself so he can acess his interface to make changes in the website
| Desktop | Mobile |
|---|---|
 |
 |
Admin products page is used by the admin to manage the products on the website. The admin will be able add, edit and remove products from the website.
| Desktop | Mobile |
|---|---|
 |
 |
Admin add/edit product page is where the admin will either edit a previous product already on the website or add a new product. When the user is done filling out or editing the necessary information we will be able to submit those changes to the website
| Desktop | Mobile |
|---|---|
 |
 |
Admin categories page will be used by the admin to manage the game categories on the website. The admin will have the option to add, edit, delete and search a category.
| Desktop | Mobile |
|---|---|
 |
 |
Admin genres page will be used by the admin to manage the game genres on the website. The admin will have the option to add, edit, delete and search a genre.
| Desktop | Mobile |
|---|---|
 |
 |
Admin categories page will be used by the admin to manage the gaming categories on the website. The admin will have the option to add, edit delete and search a categorie.
| Desktop | Mobile |
|---|---|
 |
 |
Admin users page will be used by the admin to manage the users of the website. The admin will have the option to search for users, ban or unban them.
| Desktop | Mobile |
|---|---|
 |
 |
Admin reports page will be used to search for reports from users, when the admin whishes to see more details or/and take action about a specific report he will be able to do it by pressing the "more details" button next to each report which will take him to a page dedicated to that specific report.
| Desktop | Mobile |
|---|---|
 |
 |
Admin reports details is going to be used by the admin to manage a specific report. A report is always submitted by a buyer against a particular seller because of this the admin, the seller and the buyer will be able to comunicate through a chat in the page in order to solve the issue. The admin will also have at his disposal the options to ban the buyer or/and the seller and to arquive the Report.
| Desktop | Mobile |
|---|---|
 |
 |
Admin transactions page will be used by the admin to see all transactions between sellers and buyers and to see more details about them.
| Desktop | Mobile |
|---|---|
 |
 |
Admin reviews page is the page where the admin will see all the reviews (feedbacks) given to all the sellers by the buyers. The admin will be able to search for a reviews, see their content (comment) and finnaly to delete them if he finds them to be inappropriate.
| Desktop | Mobile |
|---|---|
 |
 |
Admin FAQ edition Page will be used by the admin to see the questions that appear on the website's FAQ page. The admin will be able to add, edit or remove questions and their respective answers.
First submission date: 2020/03/22
- Sitemap has now page stacks
- Storyboards represent only the main interactions and captions have been added
- Added admin pages
- User pages as banned user
- User pages as buyer
- Luís Ramos, up201706253@fe.up.pt (Editor)
- José Guerra, up201706421@fe.up.pt
- Martim Silva, up201705205@fe.up.pt
- Ruben Almeida, up201704618@fe.up.pt