Guiding Principles for Building an Ecommerce Website
ArabNet Riyadh 2015; Dec 14-16
Design+Code Day
Abir Al Helou, Client Services Director of Technology, Traffic
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
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
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
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
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.
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.
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:
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
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
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
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
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
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)