Modification for Pokevault.com

1. PROBLEM FRAMING
 To design a whole new layout for the Pokemon
Plush Toys Column in Pokevault.com
http://pokevault.com/PokemonPlushToy

2. TARGET AUDIENCE
 First Time and One-Time Online Shoppers.
Needs:
o A short and straightforward shopping experience.
o Fast purchase.
o Clear information.
o Clear flow of navigation through the website.

3. SCENARIO
 John wants to buy a Pokedoll as a birthday
present for his niece and thus he went to
Pokevault after searching online for online shops
that sell Pokemon plushies. He was confused by
the messiness of the website and also the many
categories and options that can be done on the
website itself and thus had a hard time doing the
purchase on the website.

4. THE CURRENT
LAYOUT OF THE
WEBSITE

5. HEADER & SIDE NAVIGATION BAR

6. CONTENT (UPPER PART)

7. CONTENT (LOWER PART)

8. NAVIGATION
AROUND THE
WEBSITE

9. CHOOSING COMPONENTS(1)
6 components to choose from.

10. CHOOSING COMPONENTS(2)
Choose the component you want.

11. CHOOSING VIEWING OPTIONS
You can choose the different sorting and viewing ways.

12. CHOOSING THE DIFFERENT TASKS
You can choose to add to cart, wishlist or comparison.

13. ADD TO COMPARE (1)
Reflected here after choosing to compare.

14. ADD TO COMPARE (2)
Click on product compare to compare different choices.
(at least more than 1 being chosen to compare.)

15. ADD TO WISHLIST (1)
Reflected here after adding to wishlist. (member
requirement)

16. ADD TO WISHLIST (2)
Click on wishlist option to view wishlist.

17. ADD TO CART (1)
Reflected here after adding to cart. (member
requirement)

18. ADD TO CART (2)
Click on shopping cart option or the top corner to go
into the shopping cart.

19. ADD TO CART (3)
Choose to check shipping tax or using coupon or gift
voucher then proceed to checkout or continue shopping.

20. ADD TO CART (4)
Proceed on to do all the steps to confirm purchase.

21. MY FOCUS FOR THE ONLINE SHOP
 Creating a very straightforward experience for
the users.
 Put in information that is necessary.
 Making information short and easy to understand.
 Taking away unnecessary functions and tabs.
 Rearranging the remaining tabs.
 Keeping the necessary options of the items that are sold.
 Keeping the necessary display and sorting options for the
layout of the items.

22. CHANGES FOR THE
WEBSITE

23. -Wish list and product compare are redundant links
due to my focus of making it just an online shop.
- check out option is also not needed due to it also being
reflected in the shopping cart option.

24. - Taking away the shopping cart tab at the navigation
bar (Shopping cart is the most important function thus
needs to be more prominent.)

25. - Moving the positions of some functions. (not-so-used
function will go to the top while the more used
functions will go down to the navigation bar.)

26. Double links. (either one can be removed)

27. Modifying the display and sorting options.

28. Keeping the necessary options for the user.

29. Changing the photos into a slideshow for easy
browsing. (a easy flow for the user’s eye.)

30. Keeping necessary options for the user.

31. Keeping the necessary information short and sweet.

32. SITE MAP
The site map layout will be kept the same due to different
categories.

33. THE LAYOUTS OF THE NEW
WEBSITE

34. HOMEPAGE LAYOUT 1

35. HOMEPAGE LAYOUT 2

36. CONSTANT COMPONENTS IN BOTH
LAYOUTS
 Header
 Edited Footer
 Discount advertisement (attract customers to buy products)
 Payment options (to let the users know the different ways to pay.)
 Connect with us (to let users connect with them in other
websites.)
 Account Login or Register Option
 Currency Exchanges
 Search Bar
 Shopping Cart button
 Introduction of the website

37. HOMEPAGE LAYOUT 1 VS 2
Layout 1 Layout 2
A lot of information Neater and obvious tabs (focal
point)
Too much distractions, no focal More user friendly, neater
point. format.
Can be confusing at times. Easier to navigate
Drop down menu is neater A flow linking the different
functions
user memory (login and account
name normally on top right)

38. EVALUATION
 Tested the 2 layouts on 5 users who are all new
to online shopping.
 All 5 choose Layout 2.
 The main reasons behind all the users’ choice are
because firstly it is neater and then there is a
focal point on the tabs and also a flow for the
users to follow.

39. PRODUCT LIST LAYOUT

40. COMPONENTS IN PRODUCT LIST
Label Component Uses
Breadcrumbs To let users navigate through
pages.
Short Description of To inform users about the
Category prominent things about this
category.
The new sorting To keep the necessary sorting
options options which is more useful for
the users
Products arranged in To allow users to see the basic
grid view with things that they want to know.
showing price and add (price) and allows them for express
to cart option buying by clicking on option.
Hyperlink to let them click and
check out more of the product.

41. PRODUCT DESCRIPTION LAYOUT

42. COMPONENTS IN PRODUCT
DESCRIPTION
Label Component Uses
Breadcrumbs To let users navigate through
pages.
Slideshow viewer for To let users scroll through the
pictures pictures on the same spot so as
to allow user freedom on
viewing the photos.
The new description To keep the necessary
column description that the user needs
to know about the product.

43. SHOPPING CART LAYOUT

44. COMPONENTS IN SHOPPING CART
Label Component Uses
Breadcrumbs To let users navigate through
pages.
Shopping Cart Details To show the user the necessary
details of the product he is
buying.
Contact and Delivery To allow users to put in the
details column necessary information for
delivery.
Discount and voucher To allow users to choose which
column discount voucher do they want
to use if they have.

45. CHECKOUT LAYOUT

46. COMPONENTS IN SHOPPING CART
Label Component Uses
Breadcrumbs To let users navigate through pages.
Checkout Column To let users choose their delivery
method and payment method easily.
Receipt To keep the user informed of how much
they are supposed to pay and clearly
shown to them.

47. FINAL PROTOTYPE OF THE
WEBSITE
- Scenario Walkthrough

48. John can click on the pokedoll tab on the left side to go to the
pokedoll page.

49. John then can click on the hyperlinked pokedoll name to find
out more about the product that he want to buy or just go to
add cart to buy the product straight.

50. So after knowing more about the product from the
description, John can either add it to cart or click on back to
go back to the product page to see more.

51. After adding to shopping cart, the shopping cart button will
reflect about the addition of the product and John can proceed
to the shopping cart to do payment.

52. John can either put in his particulars and choose to use
vouchers and discounts if he has any then click on checkout to
proceed or go back to Home to search for more products.

53. John then can choose the payment details and delivery details
and check on the receipt that reflects on the amount of money
to pay then press on Confirm Order to proceed or back to
shopping cart and do modification.

54. The confirmation page will show the receipt of the transaction
which John can choose to print or save a copy of it and then
return to the Homepage.