In this course, you will find the fundamentals of e-commerce, synthesized and organized to help you better understand the ins and outs of this discipline, which many have yet to fully exploit its potential.
Sign up for a free trial of Capian !
Sign up !The homepage is the first thing a customer will see about your company.
There are certain things that should be on your homepage: a search bar, a sort of navigation bar, information about your company, and details about your products.
How should you format it?
Generally speaking, there are certain expectations and criteria that "certify" a certain UX quality of your website. With Capian, you can choose specific criteria and apply them to your report. You have access to :
Here we have a screenshot of Fresh Thyme’s homepage. Here’s what they’re doing right.
These are key points for the User Experience; this is also where users expect them to be, just like at the bottom of the page. Users expect to see contact information for the business.
Important things that they’ve included here include an About Us page, a Contact Us page, and a FAQ.
Other important things to have on your homepage and throughout your website is quality images, consistent branding and website theme.
For mobile users, the homepage will look significantly different. It's crucial to develop a responsive website, ensuring that you maintain a single website for both desktop and mobile users. It's essential to verify that everything on your desktop has the same appearance on mobile, including images, animations, and the layout of your website. Regarding the layout, it's crucial to position important information at the center of the mobile screen. When holding your phone, your thumb naturally rests and primarily interacts with the middle of the screen. Additionally, make sure your phone number and email are clickable. This way, visitors can easily contact you with just a click.
For a more indepth list of the dos and don’ts of the homepage please click here. For more examples of how your homepage should look, check out UI Patterns for different examples.
This first exercise will revolve around your lesson on the homepage.
There are several ways to proceed when searching for a product. We can begin by examining the menu and its submenus. Here, we observe that at Target, under 'grocery,' there are various categories. When we clicked on 'produce,' there was a dropdown menu with several subcategories.
Most navigation bars are at the top of the screen in what is known as the header. They go across the top of the web page or they can be expanded once you click on them like Target’s menu here :
Something useful for searching is called breadcrumbs. It’s where the path that you’ve taken to reach a certain place is displayed at the top. So if we’re done looking at Fresh Dressings & Dips, we can easily click back to Produce or even all the way back to Grocery. We also have a close up of the header with four menus possible on the left of the screen, a large search bar, the user account, and then our shopping cart !
With Capian, you could highlight the target's needs and show with a simple screenshot how they could improve their interfaces and enhance their user experiences. Here you could facilitate access to information by using simpler-to-use menus.
Then we have our footer here, with more information about the company such as help, stores, and how to contact them.
Capian offers you a very easy to use interface that allows you to make recommendations without any effort, and allows you to target the main problems encountered on websites, saving you time and money.
When we get to the results page, we can filter them. For us right now we care more about being able to pick up our products in store. So we click on in-store pick up and now the products listed are what is available to us to pick up.
So the next step for most people is looking for a product. Assuming they’ve made it past the homepage, they’re moving on to looking at products.
It’s helpful and extremely useful for potential customers to leave behind some bread crumbs. In our Fresh Thyme example, it’s above “Latino Foods”. Meaning if we’re looking for international food and we thought we wanted Latino food, but decided maybe we feel like having Indian. We can click “International” and go back a step, or maybe we don’t want International Food at all, and we can click Grocery Aisle and go back to the Grocery Section.
Another important feature are filters. Filters for Fresh Thyme include items that are “on sale”, “gluten free” or “USDA Organic”. Filters for a clothing shop could include color, price, or material.
Something important to remember is to design for the fewest clicks possible.
For this example on what to include on your product page, we’re looking at Portillo’s Hot Dogs in Chicago on UberEats. On their page on UberEats they already have brief product descriptions for their hot dogs.
When we clicked on a hot dog, it gave us the same description. The importance of the description is to describe the product, in simple yet descriptive terms. For food we wouldn’t talk about the color, but we would try to make it as delicious sounding as possible.
When we are on a product page the primary goal is conversion. Capian can enable you to greatly improve your conversion rate by providing you with evaluation criteria that aim to satisfy your customers.
The top 5 most common and impacting errors on a product page are the following:
For certain products, customers can customize them. Either in the ingredients they want or don't want in their hot-dog, or in the size, for example.
For example, we want most of the toppings on our hot dogs, but we don’t like to eat raw tomatoes so we’ve left that blank. But this restaurant also gives us the opportunity to customize even further like how much mustard we want.
Interactions like these are excellent examples of customer service and attention to detail that customers appreciate.
When appropriate, reviews and testimonials can also be added onto the product page. For many customers, a good review can make the difference, guaranteeing a sale. Other things to include would be a “most recently viewed” bar near the bottom of the page or maybe a feature that allows customers to compare and contrast products.
From a marketing standpoint having sales or a prominent call to action can also ensure a sale.
We are going to discuss one of the most important topics of our course, we are going to talk about the product page, having a well structured and convincing product page is essential for any e-merchant.
By using the SEO course and blending it with the product page course, try to enhance your SEO to improve your ranking.
So what happens after a customer leaves your website? Maybe they didn’t finish their order or maybe you want to encourage them to come back and visit again. This is called remarketing and retargeting.
“Remarketing is typically the term used to describe re-engaging customers with email” as mentioned by Rejoiner. We have all encountered this practice on Amazon, where they suggest products similar to the ones you have viewed. For example, 'Since you viewed this product, you might like...' This can also take the form of an email or an SMS reminding you that you left your cart.
The difference between email marketing and email remarketing is that a newsletter is a part of email marketing. Email remarketing would be sending an email to a customer saying that you’ve missed them and inviting them back to your store with a special discount or products they might like.
Personalized emails are more likely to get clicked and opened, leading to potentially more sales. Just within the first few hours of cart abandonment, you're more likely to secure the sale with a remarketing email.
Retargeting is a bit different, but just as common. "It's most often used to describe online ad placement and display ads, served based on a user’s activity on your site", as mentioned by Rejoiner. We're familiar with this from every website we visit, where we're asked to accept cookies so the website can track us and we'll eventually see specialized ads, all around
A few weeks ago, we browsed products from the French brand 'L'Occitane' to prepare our Christmas gifts. Since that search, we are now targeted with L'Occitane advertisements on Facebook and various other media platforms with advertising pop-ups.
Retargeting ads can appear anywhere, social media, on websites, on different devices, and weeks or months after the initial search. We’ve found this infographic particularly helpful in understanding the different types of retargeting.
There are certain “hacks” that businesses can use to increase their Search Engine rankings, also known as Search Engine Optimization.
In simple terms, be natural and patient. It takes time to climb the search engine rankings.
Capian with the assistance of an SEO expert, allows you to carry out a quick audit of your website to help you improve your SEO and thus allow you to increase your turnover.
To go even further, here are our top 3 tips and best practices to improve your SEO and user experience:
Google considers quality content to be original, comprehensive, and of high quality. Your content should keep up with trends, utilize the language your customers use, and maintain an appropriate level of depth. What defines an appropriate depth? It depends on the question you're attempting to answer with your website. "What color is the sky?" doesn't require an in-depth answer, but the question "why is the sky blue?" does. When linking or referencing other websites or content, it's important to use natural language and employ relevant words and terms in the anchor text.
Concerning site architecture, ensuring both mobile and desktop users have a consistent experience is crucial. Page loading speeds should be optimized for the fastest possible performance, duplicate pages should be avoided, and users should be able to navigate freely throughout your website. Regarding URLs, it's important to ensure users can read and comprehend your URL and understand where it leads. URLs should also differ if content is in various languages. Additionally, Google now favors websites using HTTPS, which can give you an advantage with users.
Within your website's HTML code, using a title tag is important so that the search engine knows the page's title. Equally vital is an accurate website description that truly represents the website. The rest is up to you, whether you choose to include headings or structured data, considering whether it enhances the user experience.
Establishing trust with a search engine is somewhat challenging. On one hand, you need to build authority, reputation, and engagement, but the precise method isn't clear. Unlike other SEO guidelines, search engines haven't disclosed how they rank engagement and reputation. As for authority, it could be linked to backlinks or human evaluators, typically assessed on a page-by-page basis. Linking is a part of reputation and authority, and for search engines, it matters who is linking to you and who isn't.
As winter comes, so do the flavored coffee creamers. We decided to head over to Target and take a look at what coffee creamers we can pick out.
We’ve filtered out some of the search results, so we can see only what can be picked up at our local store.
This one looks delicious and it’s available for delivery or pick up. Sounds perfect, so we’ll add one to our cart.
So here we can see that after we’ve added it to our cart we have a pop up. It tells us what we’ve added and gives us the option to continue shopping or to go and check out. It also gives us some additional options for other things that are bought with this coffee creamer. Bananas look pretty good, we could use some for our breakfast.
Instead of selling them as a bunch, they sell them individually, so we need more than one to be able to make it through the week.
So we think 4 bananas will be enough for the week, when we added them to the cart we can see that the number changed. Showing that we added 4 and the icon of a banana near by.
So that’s enough, just a quick little shopping trip. So we’ll head to the check out. Here we can see what is in our shopping cart: 4 bananas and 1 container of coffee creamer. We have the option of changing how we receive our product and if we want to remove or add more. On the right we have an option to add a promo code and have an estimate of the total price. The red button draws out attention to go check out.
In order to check out at Target, we need to sign into the account.
The information to check out is all on one page, so we can see what is in our cart, the price summary and the contact information to check out.
Thankfully, we have a giftcard to use for our small purchase, but they also have a section for credit cards or paypal. We had to click save and continue before we could check out. Notice how the “Place your Order” button is gray until we close out the credit card information panel.
Once we place our order, we get a nice thank you page for our order with instructions on what to do when we pick up our order.
By conducting an audit with Capian, you'll be able to detect any errors that may be present in your cart and promptly address them. Capian offers exceptional responsiveness through its sharing and annotation method.
UX best practices dictate that the shopping cart should briefly appear on the right with an order summary. At Uber Eats, we see a description of the hotdog we want to eat, along with the quantity and price. This gives us the option to proceed with our order or continue shopping.
We have finished our shopping and proceeded to the checkout. We can see information to add our address, choose the delivery time, as well as the price and costs associated with our purchase. At the bottom of the page, there are also details of our credit card and any additional information related to our purchase.
This is also an opportunity for customers to sign up for a rewards program or subscribe to other emails.
It is absolutely important to have a simple, efficient payment process that instills a sense of security in the customer. Customers should be able to see what's in their cart without distractions.
For this exercice, we will look at the lesson that dealt with the home page.
The prerequisites for this exercise are:
Using Capian, audit your shopping cart by finding :
During the lesson, we studied and put into practice our theories on the UberEats and Target websites, both of which have a very well structured shopping cart.
By comparing your shopping cart to the UberEats shopping cart and using the two weak points found in the previous question, tell us what improvement process you could implement to make your shopping cart more "user-friendly".
Thank you to all of you for being at our side for this course dealing with the main principles of e-commerce. We have tried to deal with the most important points, but e-commerce is an area that still holds many secrets and requires constant learning. You will find attached a summary of all the resources used during the course as well as supplements that we feel are relevant. You will also find tools and applications that will help you in the evaluation and implementation of accessibility to your website.
Websites used during the course :
Helpful Resources :
Digital Tools :
All these tools can be used in addition to Capian to help you better manage your web audits.