The document discusses the key components and considerations for an effective e-commerce website. It explains that an e-commerce website allows online shopping and acts as a virtual store. Some important elements include driving traffic through search engine optimization, compatibility across browsers, clear product images, easy navigation, an accessible shopping cart, and components like FAQs and company information. The document also outlines problems customers may face like doubts, an inability to see products physically, overly long descriptions, and needing to log in before checkout. It stresses the importance of addressing these issues in the design. Finally, it provides a sample walkthrough of the customer experience from browsing products to checkout and order confirmation on an improved e-commerce site layout.

1. 3rd Idea: E-Commerce website

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. 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. Things to consider / add in
an E-commerce website

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. 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. 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. Consideration: [Having a usable site]
• Easy navigation.
• Stay within the three clicks of different icons in the
website.

9. Consideration: [Shopping cart]
• It is important to include shopping cart in the design
when customer is interested in buying the product.

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. 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. 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. Examples of problems I had
encountered.
1) Human instinct: Doubts and Fears

14. 1) Human instinct: Doubts and Fears
-Having too much doubts (whether the store is reliable or not) and fears
in them  being too afraid of purchasing something on the web.
- Customers having high level of curiosity on whether the product is as
good as it looks like when it is shown on the website.
-Afraid of the website cheats on their (Customers) money.

15. Examples of problems I had
encountered.
2) Unable to feel the physical product

16. 2) Unable to feel the physical product.
Unable to
touch, wear
or sit on the
product.

17. Examples of problems I had
encountered.
3) Description of the product. – too
much info about the product.

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. Examples of problems I had
encountered.
4) Have to log in before purchasing

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. 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. Design Considerations

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. 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. Initial Sketch.

27. Layout of the Ecommerce website

28. E-commerce website

29. Pros and Cons of Ecommerce
website layout

30. Pros: Neat arrangement of components of
the website
Header
Left navigation
bar.
Footer

31. Pros: Clear view of the components.

32. Pros: Good colour combination for the
background with the tabs
Colour of the
tabs.
Colour of the
background

33. Pros: Well-used of space

34. Pros: Informative
Informative by showing
items 1-6 of 24

35. Pros: Shopping cart icon is unique
A trolley to represent the
shopping cart.

36. Cons: No categorization of products

37. Cons: Left navigation links do not look like they
are links

38. Cons: ‘Shop by’ brand tab is misleading

39. Cons: Repetition.
Can be
combined with
the footer.

40. Cons: Dark color tone
Not clear due to
the dark color
tone.

41. Cons: Repetition of ‘Viewing of page’ navigation

42. Cons: Redundantness
Redundant.

43. Cons: Title of the website is not big enough
Title of the
website :
Electronics
Store

44. ‘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.

45. Improvement made to the layout

46. Improvements made.
Before After

47. Improvements made (Messy
Categorization)
Too many categories (those in red Unnecessary categories removed and it looks
boxes) confuses the user. more straightforward and not messy.

48. 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.

49. 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.

50. 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 the
size of the fonts and changed the color of the font to white.
•User able to see clearly.

51. Improvements made (‘Viewing of
pages’ repeated)
‘Viewing of pages' repeated. Having 2 is redundant. One of it will do.

52. Improvements made (‘Sort by:’ is
redundant)
The information in the red box can be
combined with the left navigation bar.

53. Improvements made (‘Our Top Selling
Product’ is redundant’)
Removed ‘Our Top Selling
Product’.

54. 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.

55. A Walkthrough…

56. Pam is looking for an IPOD player and she can click on the ‘IPOD Player’
thumbnail on the homepage that is shown.

57. Pam can click on the red hyperlink, that is the name of the product to find out more
about it or she can proceed to the “Add to cart” to purchase the product straight

58. Pam has read through the information of the product on her left hand side, she can click on
the ‘Add to cart’ or click ‘Electronics Store’ at the top of the page to go back to the Home Page

59. Items selected will
be shown on this
page.
Pam can enter her
personal particulars
on this page
And she can click
on ‘Check out’
button to proceed
or click ‘Electronics
store’ to go back to
Home page to
browse for more
products

60. Pam has clicked on ‘Add to
cart’ as she is confirmed
buying the IPOD player.
After clicking, the number of
item will reflect on the top
right hand corner where it
shows ‘1 item in your cart’
and the trolley is no
longer empty as Pam has
started to purchase
something.
Also, Pam will be led to the
‘Checking out’ page to pick
her payment and delivery
method (Pay Pal and
Registered mail) and
everything that she has
clicked on, it will be
reflected on the ‘E-Receipt’
on her right hand side.
Once she is confirmed of
her order, she can click on
the ‘Confirm Order’ button.

61. Pam is able to see
that her order has
been confirmed.
And, there is an E-
Receipt to be
shown below the
message.
Pam is able to
choose either to
print or save a copy
of the E-Receipt
and she may click
the ‘Electronics
Store’ to go back to
the Home Page.

62. A final walk through.

63. Home Page

64. List of products page.

65. Product information.

66. Add to cart page.

67. Checking out page.

68. Order confirmation page.