Written with reference to the latest frontend methodologies in the year 2018.
Let’s imagine for a moment that you’ve never visited an ecommerce website. You’ve never been to Amazon, never seen a “Shop Now” banner ad, and never considered the possibility of having something shipped directly to your door with a few clicks of a mouse. What would you expect when visiting an ecommerce site today? What type of experience would warrant your return business to an ecommerce site?
In this article, we will cover what is expected of a modern ecommerce website from the user interface, to the checkout flow, and the frontend code architecture.
The User Interface
When we think about an easy to navigate ecommerce platform, what components carry the most impact on a user’s ability to traverse your product or service offerings to ultimately closing a sale at checkout?
Without a doubt, every great ecommerce site utilizes a constantly available search input field and type-ahead feature, but why is it so important?
The simple answer is that it minimizes the amount of friction that a user might encounter while using the traditional category hierarchy model of grouping products. Beyond that, having instant-search results or a type-ahead gives the customer instant feedback regarding available products.
In regards to the placement of a search input on your ecommerce site, it is highly recommended that the layout leverages a fixed header, which means that the primary navigation is always at the top of the viewport and includes a large, clearly visible search input.
Call To Action
For those who aren’t familiar a call to action is essentially a clearly identifiable button or link that is used to drive a user into a particular checkout or customer flow quickly and easily.
For example, say you have a promotion that you’d like customers to be aware of; it’s common practice to have some type of carousel or call to action tiles on the homepage of your site briefly outlining your promotions value proposition.
Funky Chunky is a great example ecommerce utilizing ever present search and call to actions.
Seamless Customer Account
One of the biggest headaches for ecommerce companies is dealing with the customer service aspect of the business. Whether it be a customer inquiring about when an order will be shipped/delivered, or how they would go about updating the billing information. Having a seamless account experience is pivotal to retaining customers for future business.
How do we accomplish this? By making everything from customer login to checking on an order to updating their account details quick and easy.
This is easier said than done. To optimize this experience a helpful exercise to simulate a customer’s expectations is to look into personas. This is gathering a set of characteristics to describe a typical customer that would use your ecommerce site and then determining which pieces are going to be the most crucial to delivering a solid experience, and which can be footnotes per se inside their account dashboard.
Also considering how optimized your site should be on mobile is something to be considered in this instance, especially because typically customer account dashboards include tons of information so it is important to account for how elements will look from a mobile device versus larger viewport device.
Frontend Code Architecture
What does that even mean? Componentization means breaking down common elements that will be used around your code into reusable snippets of code.
For example, a typical ecommerce site will have product or service listing cards. In this instance, a developer could parse this code into a separate file and include instances of it where needed. They could even pass additional data to this component to handle any variants such as the font size of colors to the product or service card interface.
SASS/LESS -> CSS
It is common-practice in 2018 to leverage precompilers such as Gulp.js, Grunt.js, or Webpack to breakout your frontend assets into more human-readable file formats. This is an excellent approach, ensuring your naming conventions file hierarchy is easy to understand and navigate.
I highly recommend looking into SMACSS for reference of CSS best-practices with regard to layouts, theming, and prototyping. In contrast, my personal approach to SMACSS with file hierarchies uses a minorly different convention as you’ll see below.
SASS/LESS (Root Directory)
Lastly, let’s talk about when you’d expect to leverage asynchronous API calls because these are an excellent resource for enhancing a user’s experience.
A typical example would be when a user clicks the “add to cart” button and perhaps a loading icon appears, followed by a success confirmation outlining that a given product has been added to their cart. These client-side interactions can help expedite the checkout flow and give the user more immediate feedback into their actions result.
Search Engine Optimization
The illusive top result of a search engine query. How does one achieve such a coveted position atop the competition? Let’s investigate.
In 2018, the search engine index algorithms have been optimized to account for more than just keyword densities, high PR backlinks and domain age. Nowadays we have to consider our social media integration, open graph tag structuring, markup schema, page load time, among a plethora of other items.
Above all, the most important pieces still remain which include page titles, meta description, og:image, alt tags on images, and content-rich pages. But others have been deprecated such as meta keywords.
Additionally, always ensure that your site adheres to the latest web accessibility standards as this will help improve your search engine ranking since many companies choose to ignore these at their peril. At Irish Titan we utilize a tool called Siteimprove which will run tests on your site and give you immediate feedback on which areas can be improved from an accessibility and general SEO standpoint.
The last piece to consider is how strict your content entry standards are. For example, say your companies content entry specialist creates an article and decides to randomly place headings throughout the article not following a traditional hierarchy or neglects adding alt tags to their article images. These actions can be detrimental to the SEO potential of your ecommerce site, maintaining content entry standards and running articles through a SEO analysis tool prior to publishing can make all the difference in the long-run.