E-Commerce Web DesignAn E-Commerce web design creates pages with the specified branding, content, and navigation. The coding focuses on HTML and SEO and not on backend development. Different creative specialties include copywriting, photography, and graphic arts.
BrandingWebsite branding provides a unique look and feels for the website. The web designer implements branding by developing a template or website theme.
Look and FeelThere are significant differences in what e-commerce websites need. The template is the look and feel of the website. Reusing it for every page makes the process more efficient and accurate. However, the standard template requirements are:
- Use standard fonts, colors, and white space.
- Share the header and trailer sections across pages.
- Embed product lists into category pages and potentially list products on other pages.
- Build product pages from data feeds.
- Provide up-to-the-minute inventory and pricing levels.
Category PageA listing or category page offers users a collection of links to product detail pages. It typically contains a vertical stack of listing widgets. Individual listing widgets can appear on other pages, such as checkout. Placing them on different pages reminds users of other items they may want with the items in the shopping cart. The products in a list may come from multiple sources. The list may mix multiple lists, only selecting the ones with the highest probability of increasing the sales volume. Familiar listing sources are:
- Products in a category.
- Subcategories in a category.
- Promoted products.
- Products previously viewed by that user.
- Fast selling items.
- Merchandise tied to events in 3rd party data feeds, such as linking umbrellas to a 3rd party feed with data on when it rains.
- Associations to the user, such as the location of the IP address making the request.
Product Details PageA product details page lists a single product. It includes the price, inventory levels, and options for adding it to the shopping cart. A well-designed page:
- Contains descriptions, images, and other details needed to make a purchase decision
- Provide the technical SEO to flag the page for searches with commercial intent.
- Adapts to current conditions, such as disabling the buy button when items go out of stock.
- Support an efficient administrative workflow for additions, editing, and deletions.
Shopping CartThe shopping cart design should make the buying decision as frictionless and natural as possible. Popular design features include:
- Access from any page on the website.
- Change the quantity of any item, including deletion.
- List each item in the cart.
- Link from each item back to the underlying product details page.
- Link to the terms and conditions page.
- Retain the shopping cart between user sessions.
Checkout WorkflowThe checkout tends to be the most sensitive time of the online experience. An early step is collecting contact details, enabling abandoned cart recovery. User login can collect contact data before the purchase process starts. However, most users want to see the products before creating an account.
Forcing user accounts causes some users to drop out. Leveraging 3rd party applications like Facebook and Gmail to authenticate accounts is a better option. It takes no typing, can provide additional details, and will be free of typos.
Template DesignThe template generates the HTML for the web page. It encompasses the front end of the website presented to the internet.
Content Management SystemPopular website creation tools double as a Content Management System (CMS). The challenges with the approach include:
- Purging ransomware and malware from the website is not practical.
- Custom branding and functionality become more costly.
Technical SEOTechnical SEO is on-page content but invisible to the user. It is metadata helping internet applications work better with the website. Those applications include search engines and social media platforms. The data it provides includes:
- Page titles, descriptions, and icons for display in search engines.
- Instruction to add, merge, and delete URLs from the search engine index.
- Search block lists prevent test websites' indexing, advertisement landing pages, and payment pages.
- Share links such as those for social media and text messages.
Data-Driven MarketingData-driven marketing collects and analyzes website data to support decision-making. The template integrates the HTML capability to collect high-quality and granular metrics. The data of interest includes:
- The sequence of pages viewed in a session.
- Links between multiple sessions from a single user.
- Interaction time on each page. Good tracking detects scrolling, inactive browser tabs, and backspacing between pages.
- Capture the location and type of client device.
- Avoid 3rd party cookies that more and more browsers block.
PerformanceThe web design significantly impacts page load times. Most Content Management Systems (CMS) parse many files and issue many database queries to reconstruct each page while the user waits. It is far more efficient to send static files. A performant web design has the following features:
- Sub-second page load times for a better user experience.
- Small hardware footprint, which reduces operational costs.
- Low system complexity to minimize design constraints and improve stability.
Quality ManagementQuality management collects metrics used to analyze the system. Collecting data from the web browser makes it more accurate and relevant to the operational user experience. The resulting reports help identify issues before they impact users and speed up debugging operational challenges. A complete set of data covers:
- Page load times.
- Breakdown of subsystem performance, including DNS, concurrency, and download speed.
- Response code for each URL on the page, including 3rd party websites.
- Usage data such as devices used and viewing area.
Template DesignThe user flow, User Experience (UX), or sales funnel is the navigation and functionality of the website. The following flow is a sample navigation flow that gets cooked into the web design. It shows many options to recover abandoned carts because that provides the most value to the business. At the same time, suspected card fraud puts the user onto a page with no return and sends an update to the firewall. Abaddon cart recovery through email and text messages is a separate flow unrelated to the web design.
Page StructureThe template design significantly impacts how the page interacts with the internet. A suitable method automatically and accurately populates the metadata used to improve SEO, security, and page response time. It generates syntactically correct HTML that does not leave the browser guessing how to render the page. Pages get tested for backward and forward compatibility.
Shopping CartThe shopping cart window contains a list of products to purchase. The products in the window allow easy review of the items by linking to the product details page. A link on each page makes it easy for the user to start the purchase flow at any time. Overlaying the shopping cart window on the website makes easy navigation more obvious. Creating the page with browser-side code produces the cart instantaneously.
Payment PagesThe design of the payment page is critical to maximizing sale completions. If the sale does not complete, it maximizes abandoned cart recoveries. Typical features include:
- Accelerate data entry with autofill, caching, digital wallets, and links to external authorization services like Facebook and Gmail.
- Remove all unnecessary clutter from the window.
- Display it in a window over website pages, making it obvious they can go back at any time.
- Make the window fast by constructing them with browser-side code.
- Cache entered data to speed up reentry into the purchase flow
- Collect the billing address separate from the shipping address. But allow the customer to copy the billing address into shipping.
- Check entered data before progressing to the next window. That includes the credit card expiry date, CVV, and card number.
- Allow unlimited backward and forward navigation through the windows.
LocalizationThe design for localization seeks to minimize page maintenance by reusing as much as possible across languages. The best practice for SEO is to put each language under a separate domain name using the country-specific top-level domain, like .ca for Canada. Localization can default based on the geolocation of the IP address or the language settings in the browser. E-Commerce sites using a different merchant bank in each country tend to suffer less from fraud-related issues.
Payment ProcessingProcessing payments is core to an e-commerce website. It includes the payment workflows to manage returns, prevent fraud, and minimize merchant banking fees. Capabilities that benefit the merchant are:
- Direct relationship and system interface with the merchant bank offer better service than an aggravator account but are harder to obtain."
- Verify all credit card numbers with 3DS.
- Reject payments with an incorrect CVD (3 or 4-digit code on the card).
- Use Address Validation Service on the billing address.
- Pre-authorized payments during checkout and transfer of the funds after shipping. That allows merchants to cancel transactions that appear suspicious and when fulfillment is not possible.
- Check if the shipping address, billing address, and geolocation of the IP address match.
- Cancel recurring transactions with different card numbers from the same IP address.
- Cancel purchases using out-of-country credit cards.