3rd Portfolio Development Idea: E commerce


Published on

3rd Portfolio Development Idea: E commerce Website Layout

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

3rd Portfolio Development Idea: E commerce

  1. 1. 3rd Idea: E-Commerce website
  2. 2. What is an E-commerce website?• Largest retail growth area in the world.• Able to purchase anything online like gifts, books etc.• If a person were to sell a product or even service, E-commerce website is his or her virtual ‘shop’.• Allows people to view products online at home comfortably.
  3. 3. What is the purpose of E-commerce website?• Played an important role in attracting traffic to the company online. (Online marketing)• Acts as an additional support to make sure the business to the relationship with the consumer is being well taken care of.• Extends the company products online.• Ensure an enjoyable shopping experience to the online consumers.• Helps to commercialize the company’s products and services online.
  4. 4. Things to consider / add in an E-commerce website
  5. 5. Consideration: [Bigger audience]• Make full use of the search engine enhancement.• Able to drive traffic by creating relevant content with important keywords.• Not to reduce credibility with the consumers by having wrong grammar in the E-Commerce website.
  6. 6. Consideration: [Compatible browsers]• At least when considering designing an E-commerce website, it has to be able to work on IE (Leader competitor in browser) or with Firefox.
  7. 7. Consideration: [Images]• Images are essential in E-commerce website design.• Strong tool in aiding the seller with product sales, including aiding the customers as well.• Should clearly portray the products sold and services offered to customers.
  8. 8. Consideration: [Having a usable site]• Easy navigation.• Stay within the three clicks of different icons in the website.
  9. 9. Consideration: [Shopping cart]• It is important to include shopping cart in the design when customer is interested in buying the product.
  10. 10. Consideration: [Easy ordering of product]• When the customer is convinced on what he or she is going to purchase, close the deal for customers easily.• Ensure that it does not take more than a click to allow them to begin their ordering process.• Every page with regard to the product should have an ‘Order Now’ or ‘Add to cart’ icon.
  11. 11. Consideration: [Other components like FAQ etc]• FAQ, privacy policies and the ‘About us’ page are essential in the design as well.• When customers look out for these pages = credibility we can give to them.• Inputting credible information that will make you as a honest trader.
  12. 12. Problems that I faced when visiting the original E-commerce websites.• Human instincts : Doubts and fear.• Unable to feel the real product.• Description of the product. – too much info about the product.• Unable to check out as guest.
  13. 13. Examples of problems I had encountered.1) Human instinct: Doubts and Fears
  14. 14. 1) Human instinct: Doubts and Fears-Having too much doubts (whether the store is reliable or not) and fearsin them  being too afraid of purchasing something on the web.- Customers having high level of curiosity on whether the product is asgood as it looks like when it is shown on the website.-Afraid of the website cheats on their (Customers) money.
  15. 15. Examples of problems I had encountered.2) Unable to feel the physical product
  16. 16. 2) Unable to feel the physical product. Unable to touch, wear or sit on the product.
  17. 17. Examples of problems I had encountered.3) Description of the product. – too much info about the product.
  18. 18. 3) Description of the product. – too much info about the product.• Do not have focus point.• Messy.• Not appealing to customers who are viewing the product.
  19. 19. Examples of problems I had encountered.4) Have to log in before purchasing
  20. 20. 4) Have to log in before purchasing Consumers do not like it when they are being forced to register or log in as member to complete their purchase.
  21. 21. Problems that I am going to tackle on.• Doubts and Fears generated in Human.• Feeling of the product physically.• Description of the product.• Require to log in before purchasing.
  22. 22. Design Considerations
  23. 23. Ecommerce website• Requirements of the website. • Research. – Contact of the seller (email, – Websites / Tutorials. facebook, twitter?) – Site visits – original Video – Logo / name of the website Blog websites. (able to link it back to the home page) – Products are nicely aligned. – Color used for the website. – Fonts used in the website.
  24. 24. Ecommerce website• Target Audience. • Website Editing. – Consumers who prefer – Simple layout. using guest accounts, but • Requirements for the users. also don’t mind registering • FAQs must be good to as a member for the show consumers how website. reliable the website. • Product’s description cannot be long but it must be comprehensive. • Provide another alternative way so that consumers can log out as guests.
  25. 25. Initial Sketch.
  26. 26. Layout of the Ecommerce website
  27. 27. E-commerce website
  28. 28. Pros and Cons of Ecommerce website layout
  29. 29. Pros: Neat arrangement of components of the website HeaderLeft navigationbar. Footer
  30. 30. Pros: Clear view of the components.
  31. 31. Pros: Good colour combination for the background with the tabs Colour of the tabs.Colour of thebackground
  32. 32. Pros: Well-used of space
  33. 33. Pros: Informative Informative by showing items 1-6 of 24
  34. 34. Pros: Shopping cart icon is unique A trolley to represent the shopping cart.
  35. 35. Cons: No categorization of products
  36. 36. Cons: Left navigation links do not look like they are links
  37. 37. Cons: ‘Shop by’ brand tab is misleading
  38. 38. Cons: Repetition. Can be combined with the footer.
  39. 39. Cons: Dark color toneNot clear due tothe dark colortone.
  40. 40. Cons: Repetition of ‘Viewing of page’ navigation
  41. 41. Cons: RedundantnessRedundant.
  42. 42. Cons: Title of the website is not big enough Title of the website : Electronics Store
  43. 43. ‘Final Layout’• After pin-pointing out the ‘Pros & Cons’ of the initial website layout, – I will make improvements to the Ecommerce website layout according to my target audiences’ needs. – Also, I will take my ‘Pros & Cons’ into my consideration when improving it.
  44. 44. Improvement made to the layout
  45. 45. Improvements made.Before After
  46. 46. Improvements made (Messy Categorization)Too many categories (those in red Unnecessary categories removed and it looksboxes) confuses the user. more straightforward and not messy.
  47. 47. Improvements made (Links that looks like words)Links that looks like words. Icons for indication to tell user that those are links that can be clicked.
  48. 48. Improvements made (‘Contact Us’ repeated) Repeated Removed ‘Contact Us’ repeated. Thus, remove the repeated one at the top grey navigation bar and just use the ‘Contact Us’ at the footer.
  49. 49. Improvements made (Highest row of the navigation is not clear; Dark Color Tone) Before After•Instead of changing the color of the navigation bar, I’ve improved on thesize of the fonts and changed the color of the font to white.•User able to see clearly.
  50. 50. Improvements made (‘Viewing of pages’ repeated)‘Viewing of pages repeated. Having 2 is redundant. One of it will do.
  51. 51. Improvements made (‘Sort by:’ is redundant)The information in the red box can becombined with the left navigation bar.
  52. 52. Improvements made (‘Our Top Selling Product’ is redundant’) Removed ‘Our Top Selling Product’.
  53. 53. Improvements made (Unused white space on top of the title) The title of the website has been enlarged so as to eliminate as much unused white space at the top.
  54. 54. A Walkthrough…
  55. 55. Pam is looking for an IPOD player and she can click on the ‘IPOD Player’thumbnail on the homepage that is shown.
  56. 56. Pam can click on the red hyperlink, that is the name of the product to find out moreabout it or she can proceed to the “Add to cart” to purchase the product straight
  57. 57. Pam has read through the information of the product on her left hand side, she can click onthe ‘Add to cart’ or click ‘Electronics Store’ at the top of the page to go back to the Home Page
  58. 58. Items selected willbe shown on thispage.Pam can enter herpersonal particularson this pageAnd she can clickon ‘Check out’button to proceedor click ‘Electronicsstore’ to go back toHome page tobrowse for moreproducts
  59. 59. Pam has clicked on ‘Add tocart’ as she is confirmedbuying the IPOD player.After clicking, the number ofitem will reflect on the topright hand corner where itshows ‘1 item in your cart’and the trolley is nolonger empty as Pam hasstarted to purchasesomething.Also, Pam will be led to the‘Checking out’ page to pickher payment and deliverymethod (Pay Pal andRegistered mail) andeverything that she hasclicked on, it will bereflected on the ‘E-Receipt’on her right hand side.Once she is confirmed ofher order, she can click onthe ‘Confirm Order’ button.
  60. 60. Pam is able to seethat her order hasbeen confirmed.And, there is an E-Receipt to beshown below themessage.Pam is able tochoose either toprint or save a copyof the E-Receiptand she may clickthe ‘ElectronicsStore’ to go back tothe Home Page.
  61. 61. A final walk through.
  62. 62. Home Page
  63. 63. List of products page.
  64. 64. Product information.
  65. 65. Add to cart page.
  66. 66. Checking out page.
  67. 67. Order confirmation page.