Guiding Principles for Building an Ecommerce Website

Guiding Principles for Building an
Ecommerce Website
© Copyright 2015, Traffic Group. Ltd. All Rights Reserved 1
Abir AlHelou
Digital Director, Traffic
December 14th, 2015

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

Ecommerce is the selling and buying of
goods/services via electronic channels
such as the internet

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.

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.

Planning
Business
Objectives
System
Functionality
Information
Requirement
Recommended
Platforms
Payment
Gateway
Hosting
Requirements

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
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?

Mark Pincus
Co-Founder, Zynga

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
 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

Recommended Platforms

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

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
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?

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

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

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

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

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

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

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

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

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
Recommended
Platforms with
best SEO
capabilities
1
2
3
4
5

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

Payment Gateway

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
Payment Gateway options in MENA

38

39

40

41

42
Merchant Payment Solutions
Payment Gateway options in MENA - Banks

Hosting

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

There are a number of hosting/domain providers, the following are
some recommended options
Where do I start?

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
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
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
Business
Objectives
Define System
Functionality
Dissect and
Review
Chosen
Platform and
Hosting
Design and
Implement
Ecommerce Site Process

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.

Implementation
User
Experience
Design
Principles

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

So, how do you build this trust?

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

Jeff Bezos
Founder, Amazon.com

Great content
is at the heart of all successful online
communication.
Web
eMarketing
Content
Social

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

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

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

1 – Content
Create opportunities to engage and reasons to come back
User Experience – Key Principles
Information
Incentives
Fresh Content
Contact info

2 – Structure
How will the content flow, how will it look?

3 – Navigation
Make the site easy to browse with as few clicks as possible to
key information

4 – Design
Focus on simplicity, readability and consistency

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
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:

Design

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

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.

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?

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

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

80
Imagery
Leverage the power of
imagery to set the story,
humanize the experience,
makes the product tangible,
captivate an audience

Leverage the power of movement
to encourage action, enhance mood,
convey fluidity, provide feedback
83
Movement

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
Strong Visual Hierarchy

Please rank the circles in the order of importance:
Exercise

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

Review these 2 sites
Exercise

Maintenance

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

Case Studies

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

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

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

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

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

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

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

Resources

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)

Thank you

Guiding Principles for Building an Ecommerce Website

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (10)

Ähnlich wie Guiding Principles for Building an Ecommerce Website

Ähnlich wie Guiding Principles for Building an Ecommerce Website (20)

Mehr von ArabNet ME

Mehr von ArabNet ME (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Guiding Principles for Building an Ecommerce Website