Guiding Principles for Building an Ecommerce Website

2. 2 Todays Agenda Planning 1. Business Objectives 2. System Functionality 3. Information Requirement 4. Recommended Platforms 5. Payment Gateway 6. Hosting Requirements Implementation 1. User Experience 2. Design Principles Ongoing Maintenance Case Studies Helpful Resources

4. © Copyright 2015, Traffic Group. Ltd. All Rights Reserved 4 Interesting Facts As mobile devices became more popular, mobile commerce has become its own market. Ecommerce started in 1960 via an electronic data interchange (EDI) on value- added networks (VANs) Amazon began operating as a book-shipping business in Jeff Bezos' garage in 1995 EBay, which enables consumers to sell to each other online, introduced online auctions in 1995 The changing market represents a vast opportunity for businesses to improve their relevance and expand their market in the online world. More than 40 percent of Internet users — 1 billion in total — have purchased goods online.

5. © Copyright 2015, Traffic Group. Ltd. All Rights Reserved 5 With the rise of sites like Facebook and Pinterest, social media has become an important driver of e-commerce. As of 2014, Facebook drove 85 percent of social media- originating sales on e-commerce platform Shopify.

7. © Copyright 2015, Traffic Group. Ltd. All Rights Reserved 7 Complete the Scenario Exercise John Smith wants to set up an online store to sells his handcrafted leather goods in the Middle East. This is a new venture and so will require good SEO to make his product visible in a congested market place. He is not that tech savvy so will be working with a digital team to get the site designed and developed.

8. 8 As it is the case with any new venture, the first step in successfully launching an e-commerce business is to clearly understand what your business objectives are. Business Objectives o Do you plan to increase revenue from existing customers? o Gain new customers? o Increase the average order value? o Sell through new channels? o Lower prices?

10. 10 Once you have clearly mapped out your business objectives, this will be the base on which you can build on your system functionality and decide on the information required to be able to achieve these objectives Business Objectives > System Functionality > Information Requirements

11. 11  Display Goods  Provide product information  Personalize/customize product  Execute a transaction  Accumulate customer information  Provide after-sale customer support  Understand marketing effectiveness  Provide production and supplier links Let’s see this in action  Digital Catalog  Product Database  Customer on-site tracking  Shopping cart/payment system  Customer Database  Sales Database  Site tracking and reporting system  Inventory management system  Dynamic text and graphics catalog  Product description, stock numbers, inventory levels.  Site log for every customer visit. Data mining capability to identify common customer paths and appropriate responses  Secure credit card clearing; multiple payment options  Name, address, phone, and e-mail for all customers. Online customer registration  Customer ID, product, order date, payment shipping date.  Number of unique visitors, pages visited, products purchased, identified by marketing campaign  Product and inventory levels, supplier ID and contact, order quantity data by product. Business Objectives System Functionality Information Required

13. 13 Once you have mapped out the business objectives, the system and information requirements, you need to select an ecommerce platform that is suitable to support this plan and enable you to manage products / categories / the check out process and all of the other intricacies that lead to a successful ecommerce website. Selecting an Ecommerce Platform

14. © Copyright 2015, Traffic Group. Ltd. All Rights Reserved 14 There are a wide range of platforms to choose from, of which the majority share relatively similar features and functionalities. Popularity and reputability usually indicate that a platform has been well-tested and is regularly updated. It’s recommended to take your time while in the planning phase to ensure that you choose the right ecommerce platform for you, to avoid potentially frustrating and costly issues down the line. Where do I start?

15. 15 When selecting an Ecommerce platform you should keep the following in mind: o Does it provide the optimal user experience from the homepage right to checkout? o Does it require separate hosting service? o Is it secure? o How easy is it to manage products? o How easy is it to adjust templates? o What level of technical support is provided? o Is it equipped with the features needed to make the site SEO friendly?

17. o A Complete ecommerce solution that allows you to set up an online store to sell your goods. It lets you organize your products, customize your storefront, accept credit card payments, track and respond to orders. o Great admin user interface o Easy to setup and run o They handle hosting and security and credit card processing to give store owners more time to focus on promoting their website. o Wide range of website templates and apps. Some apps are free others have cost to it. o Shopify asks you if you plan on moving from another platform during the signup process. The system then provides a link for importing products from your previous store. o Limited ability to change the checkout page which can be a downside for some as it allows very minimal customizations. o Cost starts at $14/month. If you use their credit card processor, you will only have to pay the standard 2.9 percent + 30 cent rate. If you upgrade to a higher plan, the per- transaction fee is lower. Shopify

19. o A solution based on the Drupal CMS, a "complete online store builder”. o Has a fairly clean product creation area but not as good looking as Shopify o Offers secure hosting. o Have a responsive support team o To change layout/design of pages requires someone with coding capabilities. Its not as customizable as Shopify o You cannot retrieve basic information about store, products, categories, or cart contents needed for many remarketing tracking scripts. o You can get Volusion for as low as $15 per month, which is almost 50 percent cheaper than Shopify Volusion

21. o The user interface of the admin panel looks a lot cleaner and is much easier to navigate than Volusion. o You can customize it slightly, but not to the control extent offered by Shopify o It has the cleanest dashboard and clearest directions for getting your site built within a few minutes. In fact, the dashboard looks surprisingly similar to Shopify, with modules for accepting credit cards, customizing your store and more. o You can implement Google Trusted Stores and Product Feed with their built- in functionalities o Offers secure hosting. o Have a responsive support team o Cost starts at $29.95/mo. and with that plan you also have to pay a 1.5 percent transaction fee, in addition to other credit card processing fees. Bigcommerce

23. o The 3dcart product setup page is the oldest looking of the others. It’s not that the module is confusing, but the junky design makes you wonder if they’ve updated it in a while. o 3dcart offers wonderful tutorials and setup steps to help you do everything from picking a template to setting up your shipping options. o A 3dcart benefit is the drag and drop editor, it helps you click and drag components instead of having to modify CSS or HTML code. Which is an advantage if you don’t have coding experience. o Offers reliable and scalable hosting o Good support team. o Cost starts at $19.99/mo. 3dcart

25. o Offers the least visually-friendly startup area o Doesn’t have the drag and drop editor, however, it allows for customizations. o All of the design elements are situated to the left, but the tools are a little weak, and anything further than that requires coding knowledge o Offers reliable and scalable hosting o They offer a free edition with a max of 5 products. o No support team Bigcartel

27. o An open source ecommerce software solution o It covers most of the basics. o Free o No support team other than documentation and forums. Many php developers are available for customization. Oscommerce

29. o It is a very powerful and easy to use platform with a long list of features o It is open source meaning webmasters have the ability to make any changes to the design or functionality of the website. o It also has thousands of pre-programmed “extensions” that allow users to easily customize the website without hiring a developer o Hosting and website security will need to be setup manually. o Many extensions are free of charge while others have a one-time fee between $10 and $50. Opencart

31. o An American open-source content management system for e-commerce web sites developed with assistance from volunteers. o Used by a large majority of big e-commerce websites o Difficult to customize o It has plenty of features, but the user interface is not friendly o Offers support to its community from documentation to forums. o No self hosting Magento

32. © Copyright 2015, Traffic Group. Ltd. All Rights Reserved 32 If you want to get started as quickly and easily as possible, choose Shopify. However if you’re somewhat technical and want more control over the look and functionality of the website, choose OpenCart. Again, you can always move to another eCommerce platform down the road if necessary. Our Insight

33. 33 Recommended Platforms with best SEO capabilities 1 2 3 4 5

34. 34 Recommended Platforms: Pricing Platform Cheapest Middle Expensive Shopify $ 14.00 $ 79.00 $ 179.00 BigCommerce $ 29.95 $ 79.95 $ 199.95 Volusion $ 15.00 $ 75.00 $ 135.00 OSCommerce Free Free Free 3dCart $ 19.99 $ 65.99 $ 129.99 BigCartel Free $ 19.99 $ 29.99

36. 36 Once you have selected your preferred ecommerce platform, you’ll need to select your most suited payment gateway. The payment gateway is the service through which credit card payment are being authorized and processed securely with a user’s merchant account Selecting a Payment Gateway

37. 37 Payment Gateway options in MENA

42. 42 Merchant Payment Solutions Payment Gateway options in MENA - Banks

44. 44 Once you have selected your preferred ecommerce platform, & payment gateway, you’ll need to select your hosting solution. If you’re using Shopify or any other hosted eCommerce platform, then these platforms offer hosting as well, so you won’t need to setup hosting separately. However, if you are choosing platform like OpenCart or another open source platforms, then a separate hosting needs to be purchased. Selecting a Hosting Solution

45. 45 Every website needs a domain name for their brand and server for hosting. However, eCommerce websites also need what’s called an SSL (secure sockets layer) Certificate to encrypt sensitive data such as credit card numbers and personal information. Keep Security in mind

46. 46 Security This data flow diagram describes the flow of information requests and responses for a simple website To ensure the security, privacy and effectiveness of e-commerce, businesses should authenticate business transactions, control access to resources such as webpages for registered or selected users, encrypt communications and implement security technologies such as the Secure Sockets Layer.

48. 48 o Is a very popular and affordable web hosting company that also registers domain names. o They have amazing customer support which makes it a great choice for beginners. o For eCommerce websites, it’s generally a good idea to go with their Business Pro hosting account for higher performance as well as the much needed SSL certificate for added security. o They also have a powerful and easy to use dashboard that even allows users to install OpenCart, or another eCommerce platform, with one click. BlueHost

49. 49 o For larger ecommerce businesses, Rackspace online store solutions include a range of managed services and they are specialists in cloud hosting technology. o The company offers Linux and Windows cloud servers for sites ranging from fairly low traffic and storage levels requiring 1GB of RAM, right up to intensive requirements of 120GB for massive, high traffic websites. Rackspace

50. 50 o One of the more well-known, well-established and largest web hosting companies. o GoDaddy has a strong global presence and a huge client base. o They also offer domain names and a range of additional online marketing tools. Godaddy

51. 51 Business Objectives Define System Functionality Dissect and Review Chosen Platform and Hosting Design and Implement Ecommerce Site Process

52. © Copyright 2015, Traffic Group. Ltd. All Rights Reserved 52 Complete the Scenario Exercise John Smith wants to set up an online store to sells his handcrafted leather goods in the Middle East. This is a new venture and so will require good SEO to make his product visible in a congested market place. He is not that tech savvy so will be working with a digital team to get the site designed and developed.

54. © Copyright 2015, Traffic Group. Ltd. All Rights Reserved 54 When was the last time you called customer support because you were having problems checking out online? Probably never! “Cart abandonment rate is at around 60%, and most of it happens before the user even begins the checkout process.” Why User Experience matters

55. 55 Before starting with designing your website, take some time to clearly understand: Plan the User Experience o Who are your target customers? o What do they need? o Are they getting information only, or can they buy products at your site?

56. 56 Always Remember Design for the customer and not yourself. When you build customer trust, this helps builds brand loyalty and helps gain patient, forgiving customers for a lifetime.

58. © Copyright 2015, Traffic Group. Ltd. All Rights Reserved 58 The answer is to give the user an “Experience.” It is not enough simply to make a website usable. The experience you create for the customer has to make them not realize that they are “using” it. It’s a tough concept to grasp, and the recipe changes from website to website, but the right combination of usability, creative design, writing, psychology and metrics and a strong brand will create an experience through which your customers learn to trust you. Actions not words

61. © Copyright 2015, Traffic Group. Ltd. All Rights Reserved 61 Get the big picture by writing a site outline. The content you develop and publish should directly relate to and help you achieve the goals and objectives you've set for the website. Start with a plan

62. 62 Consider the value of content & social media In order to be profitable, eCommerce retailers need to engage customers with their content and use social media outlets within and outside their own websites. An overwhelming 85% of social media users believe a company should not only have a presence in but also interact with its consumers via social media. 56% of users feel a stronger connection with, and feel better served by, companies when they can interact with them in a social media environment.

63. 63 Create opportunities for engagement o Give your customer the ability to add your website or product detail pages to websites such as Delicious, StumpleUpon, Digg, Twitter and Facebook. o Give them the ability to customize their experience on your website. These experiences can range from customizing the home page as they see fit to uploading their image to go beside their product reviews. o Create an RSS feed for your website. If your website has a blog or some other content area that changes regularly, give your customers the option to add it to their favorite RSS reader.

64. © Copyright 2015, Traffic Group. Ltd. All Rights Reserved 64 People scan websites, they don’t read them. The use of info graphics has become standard fare for anyone looking to convey sets of data or instructions Don’t make users work

65. © Copyright 2015, Traffic Group. Ltd. All Rights Reserved 65 Your website’s content is only as relevant as its success. So, test as much as you can. Some tests you can perform to get hard data include; website and email A/B testing and polls Test, test and test again

66. © Copyright 2015, Traffic Group. Ltd. All Rights Reserved 66 1 – Content Create opportunities to engage and reasons to come back User Experience – Key Principles Information Incentives Fresh Content Contact info

70. 70 UX Pitfalls to avoid o Product detail page: is where the user spends most of his time – ensure that it is smart and doesn’t make the user work too hard o The checkout process: ensure it has few steps as possible. o Security: Always making sure your customer knows that your website is secure and that their privacy will never be compromised goes back to the issue of trust. o Page Weight: users don’t like to spend time waiting for pages to load, hence optimized performance is a key Just because a website is usable, does not mean customers will use it.

71. 71 Enhance the experience with smart interactions o A “no-click” alternate images and swatches. A user simply has to roll over an image, without clicking, to get immediate feedback. The same approach can be used to zoom in to the image. o Other UX options for the PD page are smart fields that let users know they still have to perform a required action before proceeding, without getting a typical error message. A few recent trends on eCommerce websites are:

73. © Copyright 2015, Traffic Group. Ltd. All Rights Reserved 73 Ecommerce businesses often don't objectively put themselves in the shoes of their website visitors, and perceiving how your products or services are presented to the visitor is a critical area that is often neglected. Make a good impression

74. 74

76. 76 When designing for a retail website, your client is the customer. You are trying to convince thousands, tens of thousands, even millions of potential customers to click on your promotion and buy whatever you are selling.

77. Leverage the power of typography to convey meaning, increase legibility, establish tone, embody personality. 77 Key Design Principles: Typography Can it be read? Can it be read?

78. Leverage the power of color to elicit emotion, indicate meaning, attract attention, invite exploration. 78 Can it be red? Key Design Principles: Color

79. Leverage the power of consistency to enhance learnability, breed familiarity, reinforce brand, instill calmness 79 Consistency in Type: Stylistically and Creatively Key Design Principles: Consistency

80. 80 Key Design Principles: Imagery Leverage the power of imagery to set the story, humanize the experience, makes the product tangible, captivate an audience

81. 81 Small size images

82. 82 Big size images

83. Leverage the power of movement to encourage action, enhance mood, convey fluidity, provide feedback 83 Key Design Principles: Movement

84. Visual hierarchy is one of the most important principles behind effective web design. It’s the order in which the human eye perceives what it sees. 84 Key Design Principles: Strong Visual Hierarchy

86. © Copyright 2015, Traffic Group. Ltd. All Rights Reserved 86 Designing for the user experience in eCommerce is a multi-faceted puzzle. Some solutions work across the board, and some are specific to your website alone. The good news is that finding the solutions that best fit your particular needs is the most challenging and rewarding work a designer can do.

87. 87 User Experience Summary 1. People scan websites, they don’t read them 2. Users crave simplicity and clarity 3. Design to capture someone’s attention above the fold rather than design everything above the fold 4. Scrolling is often faster than paging 5. Build nice responsive design vs. just responsive design 6. Focus on usability 7. Give Users a path

88. 88 User Experience Summary 8. Google trained us to Search 9. Own the Calls-to-Action 10. Quick Solution to Customer Queries 11. “F” Pattern Design

91. © Copyright 2015, Traffic Group. Ltd. All Rights Reserved 91 Building and launching your e-commerce website should be seen as part of a continuing process. You’ll need to set aside time – or perhaps appoint someone – to handle the different kinds of maintenance required.

92. 92 The below will need to be conducted on an ongoing basis: o Updating and Refreshing o Making corrections o Ongoing protection o Implement new opportunities o SEO Maintenance o Constant Benchmarking

94. 94

95. 95 Sophie La Girafe Overview Sophie la girafe® is sensory toy for babies. Designed to stimulate the 5 senses from the age of 3 months. Business Objectives To create an online store where they can sell their products http://www.sophielagirafe.ae/ The Target Audience Parents, grandparents, wider family, parents friends – anyone that has a small baby in their lives

96. The functionalities It is a complete e-commerce store with all the basic functionalities required for e-commerce i.e. o Product management module o Shopping cart o Checkout o Payment gateway integration o My account area etc. 96 Sophie La Girafe

97. Platform Used PHP + OpenCart Payment Gateway Cashu Hosting Requirements Shared hosting platform from Godaddy 97 Sophie La Girafe

98. 98 Sophie La Girafe o Clean clear design o Impactful images o Clearly labeled navigation o Detailed productive descriptions o Use of info graphic style images to convey information o Inclusion of different content types including text, images, video & info graphic style images to convey information o Detailed customer support / FAQ information o Simple, easy to use checkout & cart

99. 99

100. 100 New Age Beverages Overview NAB is a Middle Eastern beverage distributer of functional drinks sourced from all the world, it was established in Dubai, UAE in 2010 Business Objectives To create an online store where they can sell their products http://www.nabdrinks.com/ for wholesaler and retailers. The Target Audience Consumers, wholesalers, retailers

101. The functionalities It is a complete e-commerce store with all the basic functionalities required for e-commerce i.e. o Product management module o Shopping cart o Checkout o Payment gateway integration o My account area etc. The wholesaler and retailer accounts are not distinguished explicitly as per the requirement of client. An added custom functionality is applied on shopping cart on the basis of quantity and price so to benefit wholesalers. 101 New Age Beverages

102. Platform Used PHP + Magento CE Payment Gateway Prosum Payment Gateway Hosting Requirements Aspiration magento supported package 102 New Age Beverages

103. 103 New Age Beverages o Well structured, colorful site with good product images o Clear and easy user journeys to get to the required information such as product details o Inclusion of extra useful elements such as currency convertors, results filters o Nice integration of social media tools such as the direct send to facebook messaging tool o Very detailed product information o Nice inclusion of cross selling tools such as recommended products based on the users search / products viewed by other users and so on o Detailed shopping cart

105. 105 Resources 1. Ecommerce Website Checklist (link) 2. UX Booth (link) 3. Best Ecommerce platform for SEO (link) 4. Choose the right web hosting (link) 5. Guide to creating website IA and Content (link)

Guiding Principles for Building an Ecommerce Website

ArabNet ME

Guiding Principles for Building an Ecommerce Website