The purpose of this document is to provide the

requirements of the Wantsome Shop portal used by

Wantsome for testing practice.

Contents

● General
● Accessing portal
● Registration
● Login
● Main menu
● Search results page
● CART
● Product page
● CHECKOUT
● MY ACCOUNT
● Category page
● Logout
General
Wantsome Shop should be an online portal for listing different
products, mainly organized in few categories. For the
beginning, the portal should work with only 2 categories, Man
and Women Collection.
We aim to offer to our clients state of the art experience with
online shopping, that's why all the products will contain as
much info as possible in order to fulfill the customer
experience. It worths mentioning here about product photo,
description and related products.
Key features as search and full sale flow, including checkout,
will be also available.
The chapters below will describe the main functionalities,
related functionalities and dependencies. Where possible,
design work was added, for an overview of how parts of the
portal will look like.
Note: please consider that any text from the portal will be
verified against what;s written into specifications instead of
how it looks in the inserted design parts.
General recommendations: we are building this portal to one
of our really good customers. His expectations from us is
high, as usually. Since we are trying to surprise this customer,
we will be introducing in this portal pages and functionalities
we did with success on our other projects and we think will
work acceptable and our current customer will really want to
enhance those, which will mean another project or small
projects for us. Entire team from our side trust in our QA’s
team capabilities of a strategic plan to cover the not
documented here stuff, as well.
 1. Accessing portal
When accessed, the Wantsome Shop portal will display an
initial web page consisting of:
1.1 Header section which contains in: the logo with
description; a static image; cart details:
- clicking logo should redirect to portal home page
- clicking on the static image should open the Women
Collection page of the portal, but in a different tab
- clicking cart should open the Cart page
- example for the photo:

- the 2nd part of the header, which is displayed right

under the logo contains:
- Category selector
- A liniar menu for the following options: HOME,
BLOG, CART, CHECKOUT, CONNECT (MY ACCOUNT
when logged in)
- Search icon; on click should open the search overlay
- My account icon; on click should redirect to My
account page (if not logged in, My account page
looks the same as Registration page)
1.2 Content section which contains:
● a big slider on the left, where on every 5 seconds
should change the product displayed; also left and
right navigation buttons should be available
● two small slides on the right side for Men Collection
and Women Collection, one above the other;
clicking on the slide name should redirect to the
correspondent page
● under the above there should be the Men Collection
sub-section, with the following description “ Place to
show all products related to Men” and with the following
columns:
○ static picture on the left: on click go to Men
Collection page
○ HOT PRODUCTS where Men’s Silk Ties product
is to be displayed; on click go to product page;
on mouse hover display Add to cart option and
price
○ a list of 5 products from Men Collection, listed
one above the other with photo, title, price,
add to cart option: click on photo or title
redirect to product page; click on cart is adding
the product directly to cart (after successfully
added to cart an eye icon displayed for View
cart option)
○ another list of 5 products with the same
specifications as above
○ in the top right of this sub-section there should
exist a View all link and on click it should
redirect to Men Collection page
○ an approximate design of this sub-section look
like below:
● under the Men Collection sub-section it will be
displayed a so called Promo sub-section which will
contain 3 thumbnail boxes, one after the another,
with the following names: ADULT COLLECTION, KID
COLLECTION, TEEN COLLECTION. On click on any
of it you will be redirected to the correspondent
Collection page.
● under the Promo sub-section, it will be displayed the
Women Collection sub-section with the following
description “Place to show all products related to women”; this
sub-section will look and behave almost the same as
the Men Collection one, the only differences being
that: first 2 columns on the left are the ones with
the products, HOT PRODUCTS is the next one, and
the last column is for the static picture
● Next is the Featured sub-section with following
description: ”Place to show all featured products”, with 5
products displayed; navigation arrows available in
the top right of the sub-section
 1.3 BLOG AND LATEST NEWS section: should be
displayed under Featured product block, 3 columns layout.
Each column contain a pot preview block, with:
● Post thumbnail image with Published date (on click
redirect to the post) on upper left corner
● Post title – on click redirect to the post
● Posted by – on click display all post posted by this
user
● Number of comments – on click redirect to
comments for selected post
● Post category – on click display all post from this
category
● Short description
● Read more button – onclick redirect to post page.

1.4 Hand Picked Items section – should be displayed

under “Blog and latest news” block
● Title, small description and navigation arrows.
● 5 products are displayed
○ Thumbnail picture – on mouse hover Quit
picture preview and Link to this post are
displayed.
○ Post title – link to this post.
○ Read more button – link to this post.

1.5 Footer section – displayed on all pages, should

contain
● Search section
 ○ Title section
○ Search module left aligned.
● Copyright section
 2. Registration

Any portal visitor can decide to register to an account. He/she

can do this by accessing the CONNECT option from the top
menu.
The CONNECT page, after was accessed, displays 3 main
sections (organized in columns):
- Login
- Register
- Search / Recent Posts / Archives
Note that Header and Footer sections are also displayed.
In order to register, the user must insert the following
informations:
- Email address: should be a valid email address; error
message to be displayed if not an email address is
entered or not complet email is entered
- Password:
- if not entered error to be displayed: “Please enter an
account password”
- after 1st character is entered a hint is displayed
about password: “Hint: The password should be at least
twelve characters long. To make it stronger, use upper and
lower case letters, numbers, and symbols like ! " ? $ % ^ & ). ”
- also, an indicator about password weakness will be
displayed, based on the entered characters and the
possible values are: Very weak, Weak, Medium,
Strong
- For the Very weak and Weak cases there is a
supplementary message displayed with the
recommendation to enter a stronger password
 - First name
- Last name
- Phone number
Note: all fields are mandatory and marked with red asterisk
(*).
There should not be possible to register more than one
account with the same email address.
Pressing the Register button at the end, should create the
account.
 3. Login

Only registered users (users who registered an account

already) should be able to login. In order to login, by
accessing the CONNECT option from the top menu it will
display the MY ACCOUNT page where we have the Login
section in the left of the page.
Following fields should be available:
- Username or email address (mandatory and marked with
asterisk) - error displayed when empty and Login
pressed
- Password (mandatory and marked with asterisk) - error
displayed when empty and Login pressed
- Login button
- Remember me checkbox
- Lost your password? link - when accessed should redirect
to “lost-password” page where a description should exist,
a field to enter email address and Reset password button

Notes:
- in case wrong username used, display error: “Invalid username.”
- in case wrong password used, display error: “ The password you
entered for the username <the username correctly entered> is incorrect.”
 4. Main menu
It should be displayed on all pages and it should contain the
following content with the following specifications:
- Category menu
- accordion style
- left aligned
- should contain all active categories
- on mouse hover on a category change text color to
blue
- blue border
- On click redirect to specific category page.
- Navigation menu
- on mouse over change text color to blue
- Should contain: Home, Blog, Cart, Checkout,
Connect
- Home: when clicked, redirect to main portal
page
- Blog: when clicked, redirect to Blog page
- Cart: when clicked, redirect to CART page
- Checkout: when clicked, redirect to the
Checkout page
- Connect: when clicked, redirect to the page
with register or login details
- Search functionality
- On mouse hover change background to blue
- Onclick display search module
- My account
 5. Search results page
Should contain:
- Page template – 2 columns with right bar
- All results related to your search
- Each result should be displayed as “Post preview block”
in Primary content area.
- Secondary content area contains:
- Search module block
- Recent posts block
- Archives block
- Meta block
In case results found on search should be displayed on more
than 1 page, then everytime the 1st page with results will be
displayed and will be available navigation through Next button
in order to advance and through Previous button in order to
go to previous page with results:

No matter where from the user initiates a search operation

(main menu or footer or from the top right area), in order to
retrieve relevant results, the user must insert desired text to
search.
After the user insets desired text to search, he must click on
the search icon, because the search operation should not
work if he presses Enter key.
In case nothing is entered, then the search results page
should be displayed with a message about the fact that no
text was entered for search.
In case the text entered does not return any result, then:
- the search results page should be displayed
- all the search edit boxes available on the page should
not contain the text that was searched
- the message “Sorry, but nothing matched your search terms. Please try again with
some different keywords.” should be displayed

- all the time, the searched text should be displayed in the

page subtitle, like in the picture below:

- the page subtitle should look like:

- starts with the string “Home”
- then a space
- then the special character /
- then a space
- then the string “Search Results for”
- then, between brackets the searched term
- then, finished with the string “query”
 6. CART
User should be able to access cart either from the right
header icon or from the CART menu option.
When no products added in the cart, then “Your cart is currently empty”
message should be displayed in blue color and the option to
return to shop.
When mouse hover over the header icon, and no products
added in the cart, then “No products in the cart.” message should be
displayed; the message should disappear when moving
mouse outside that area.
When products were added in the cart:
- Products section
- Should be displayed all products from cart
- Image thumbnail
- Product title
- Product Price
- Quantity
- Total price
- Should be able to remove products from cart
- Should be able to change quantity
- Coupon section
- Cart Totals section
- Subtotal
- Total
- Proceed to checkout button
- Secondary (right of the page area) content contains:
- Search module block
- Recent posts block
- Archives block
- Meta block
7. Product page

- layout design - 2 columns

- Page Title - Shop
- Breadcrumb
- Product image
- Sale label is displayed if discounted price is
available, upper left corner.
- Image zoom loop is displayed, upper right corner
- On mouseover image is zoomed.
- Product tile
- Add to cart section
- Quantity selection.
- Add to cart button.
- Product category link - on click redirect to category page.
- Tabs section
- Description tab
- Title - Description
- Product description
- Reviews tab
- Display number of reviews in Review tab title
- Review section
- Related product carousel
- 4 product in row
- product layout is “Product Grid” template
- Secondary content area contain:
- Cart block (second area)
- Recent view products block
8. CHECKOUT page
- Title - Checkout
- Breadcrumb
- Login Section
- Displayed only for not logged in users.
- Accordion style.
- Coupon section
- Accordion style
- Billing details
- Order details
- Payment details
- Place order button
- Redirects to Thank you page
- Confirmation email should receive
 9. MY ACCOUNT page
This page is not yet finalized with the customer, the only
thing that is 100% sure is that this page should contain the
Logout button.
What was agreed with the customer is that we will build in
this page something similar we did for him on a similar
project and will consist mainly in administrative options for
the logged account:
- links for fast access to account details, orders, account
dashboard, addresses
- when accessed, the account dashboard will be displayed
which will display first, last name and phone number plus
the possibility to edit these
- also an option to change password will be available
For the next version of the portal, the customer will raise his
desired requirements to update entirely this page.
 10. Category page

- layout design - 2 columns

- Title
- Products section
- Product results - upper right aligned
- Sorting section - upper left aligned. Should be able
to sort products by:
- Default sorting
- Sort by popularity
- Sort by average rating
- Sort by newness
- Sort by price: low to high
- Sort by price: high to low
- All products from this category displayed in grid
layout
- 10 products per page
- 4 products per row
- each product has “Product Grid” template
- Pagination section

- Secondary content area contains:

- Cart block (second area)
- Recent view products block

Product Grid template

- Thumbnail image
- On mouse hover
 - Image preview button is displayed
- Add to cart button is displayed
- View cart button is displayed, only after you
click add to cart button
- Sale! label is displayed, if this product has a special
price.
- Product title link - redirect to product page
- Price section
 11. Logout
Any logged user should have the possibility to logout by
accessing this option from My Account page.