PUMA Fashion Store Website (Praveem & Rachel)

This websites let user buy PUMA products. It allows customers to purchase PUMA products and at the same time accumulate points and be able to redeem them for discount in stores. It has games for user to play so to redeem vouchers and earn points which attract customers to return back to buy things just to play the games to get more points and have in store discount by redeeming those points earned. Games like spin the wheel for vouchers to use and a puma avoiding obstical to earn points. Customers are notified of the promotions on going at the top of the home page below the navigation bar and the latest colaboration series on the left side of the home page to keep customers up to date. If you are a big fan of PUMA producdts but tight on cash you can just simply play the games to earn points and redeem them.

PUMA is a famous branded company that sells all type of sports things. However, many buyers love to have discount or vouchers that are able to redeem and not wait or search for PUMA vouchers or discount code online just to pay lesser, our website is able to favour them and able to shop PUMA items of a cheaper price by earning points and playing games. this website will use a map api show customers puma outlets near them, the website will have its own restdb api to store customer information and points .

Design Process

The reason why we wanted to design this website is so to attract more people to buy PUMA products and at the same time be able to afford it at a cheaper pricing with the points or the vouchers they earn. Points earned from this website can be redeem to ofset the total price or free delivery, there is also games for them to earn points this is to attract customers to return and buy things it can also attract new customers to spend. My webpage allows users to earn points by playing games or purchasing items from the store and these points can be used to ofset the total pricing. As a user:

• I would want to purchase things of a cheaper pricing
• I would want to have points that are able to ofset the total price
• I would want to have ways to earn more points rather than earning points through the total amount i purchase
• I would want to know the contact information
• I would want to have games to earn points or vouchers This is a link to my design wireframe for phone version web version.

This is the link to our webpage

Features

Existing Features

• Navigation bar to let users navigate to different pages
• Cart icon that is able to click and view the number of items you have purchase and the subtotal
• Able to click on the name below the picture to see the details of the shoes
• Able to select size , quantity and color
• Colour icon at the bottom of each product to let users know the color available
• There is a reward page that user can click in to find the games available to earn points

Future Features

• Able to display the summary of their purchase after submitting the check out form
• Have a leaderboard in the dino game
• Able to limit the number of spins the user have each day

Technology used

• JavaScript
• Jquery
• CSS
• Google Fonts
• XD
• API
• Lottie

Testing

1. Women and men shoes, clothing and accessories
   1. All products are able to click in
   2. When on laptop each row has 4 product
   3. When on mobile each row has 2 product
   4. Had issues trying to create the colours at the bottom of the page
   5. Had issues trying to link the colour to their repective image when hover over
2. Individual Product Page
   1. Will change the picture according to the colour and shoes they choose
   2. Add to cart button will only appear after userer have click at least one size
3. User Profile bar
   1. Will change according to whether the user is log in or not
   2. After loging in there is a log out button for users to logout
   3. Before loging user can click register if they do not have an account
   4. User can also click the login button to login
4. Profile Page
   1. Able to access games from there
   2. Able to see the vouchers that they earned
   3. Able to see the points they have
5. About Us Page
   1. The details of each individual store location are collapse
   2. Details of contact is also collapse
   3. The email is able to click and will lead you to be able to send to the email
   4. The icons at the side are their social media account and the names
   5. Names of the social media account is able to click and would lead you to their social media page
   6. On mobile the icons would move to the bottom of the page
6. Check Out Page
   1. Able to see all the items added into the carts
   2. After clicking checkout button the checkout form will appear
   3. There is a input box for user to key in their name and user cnnt leave blank
   4. There is a Phone number input box for user to key their phone number and if is not more than 8 numbers it will produce a error message to tell user to key in a valid phone number and would also make sure that the phone numnbers start with 8/9
   5. The email has a validation for email it needs to include a @ and a .com at the correct position if not user will need to retype the email
   6. All input fields cannot be left blank
   7. Had issues trying to do up the validation
   8. Add and minius button allows user to add and deduct the quantity or remove
7. Search Icon
   1. Allows user to search for products
8. Login Page
   1. All fields cannot be left empty
   2. The email has a validation for email it needs to include a @ and a .com at the correct position if not user will need to retype the email
   3. After user click login it will then load the lottie animation and after the loading is done it will lead user to the home page
9. Register Page
   1. All fields cannot be left empty
   2. The email has a validation for email it needs to include a @ and a .com at the correct position if not user will need to retype the email
   3. Password must have at least 8 characters
   4. User must at least click on Male / Female

Credits

Content

• Information of shoes was copied from puma website
• All Shoes images are from Puma Website
• All Puma Related images are from Puma Website
• About us page information was copied from puma website

Media

• Puma Video
• Puma AMI
• NCT
• Cart Icon
• Search Icon
• PUMA GIF
• Puma Shoes
• Puma Shoes
• Puma Shoes
• Puma Shoes
• Puma Shoes
• Puma Shoes
• Puma Shoes
• Puma Shoes
• Puma Shoes
• Puma Shoes
• Puma Shoes
• Puma Shoes
• Puma Shoes
• Puma Shoes
• Puma Shoes
• Puma Shoes
• Puma Shoes
• dino game
• FaceBook icon
• Twitter icon
• Instagram icon
• Pinterest icon
• Youtube icon

Acknowledgement

• I get my inspiration for this project from PUMA and Nike website