Forem: Safa Emhemed

10 Best Practices for Ecommerce Checkout Design

Safa Emhemed — Tue, 21 Mar 2023 14:14:04 +0000

Optimizing your ecommerce checkout process is crucial to reduce cart abandonment rates, as it affects customer satisfaction and the likelihood of returns. If the checkout process is not smooth and simple, the customers may abandon their carts without making a purchase and may not return to your ecommerce.

This article shares the best practices for optimizing your checkout process and boosting your sales.

What is Medusa? Medusa is a set of open source commerce modules that gives developers and businesses the flexibility to build sophisticated and unique digital experiences. One of Medusa’s building blocks include a Next.js storefront that implements all the checkout best practices mentioned in this article.

10 Ecommerce Checkout Best Practices

Don’t Force Customers to Create an Account

Forcing customers to register means you are creating an obstacle for customers who want to buy, ultimately increasing abandoning carts. Therefore, offering a guest checkout option helps you to increase the chances of a sale.

Allow guests to checkout and complete their purchases with an email address to make the checkout experience more effortless.

In addition, you can allow customers to log in using their social media accounts, including Facebook or Google, to simplify the checkout process and eliminate the need for registering and entering personal information.

Alternatively, let the customer have the option to create an account by adding a checkbox that prompts them to choose whether they want to create an account. When customers select this option, a password field should appear, allowing customers to set a password. This way, the customer must only fill in an extra field for the password.

Don't

Force customers to create accounts to fill their carts or to complete the checkout process.

Allow customers to checkout as guests.
Make creating an account simple by enabling social login and by one-click creating an account.

Ask Only for Necessary Information and Enable Auto Fill

Avoid annoying the customer with extra steps and information, as this may make their shopping experience time-consuming and uncomfortable.

To ease the checkout process, keep the forms concise by requesting only essential information about the customer. Eliminate any unnecessary steps and clearly describe why certain information is required. For example, avoid asking for non-essential details, including Address 2, birthday, gender, or company name. Add a single field for the full name instead of separate fields for first and last name.

Clarify why this field required on Amazon

In addition, make sure to enable Autocomplete Attribute for input elements. This helps speed the process up by making billing and shipping addresses auto-fill as soon as the customer starts typing. Most browsers like Firefox, Google Chrome, and Safari support this feature.

Furthermore, offer a checkbox to enable customers to use the billing address as the shipping address, simplifying the form-filling process and making it more efficient. You can automatically populate the form with email, shipping, and billing address information if the customer is logged in. However, allow customers to change this information if needed to streamline the process.

Checkout on Palmes

Don’t

Ask for unnecessary information, including age, gender, company name, and more.
Make the form too long to fill.

Enable auto-fill for all checkout form input fields.
Let the user use the same address for shipping and billing. If the customer logs in, fill in the payment and address information form account information.

Offer Multiple Payment Methods

Support multiple payment options when purchasing online, especially for ecommerce that supports global shipping. This ensures a seamless payment experience for the customer.

Provide a variety of payment methods that customers in different locations can use, and set the most popular methods first. That allows customers to pay with the preferred payment method that suits them and helps you to increase your credibility.

Most customers prefer to use common credit or debit cards from Visa or Mastercard, but many alternatives have emerged in the last few years. You should consider including payment options such as Apple Pay and Google Pay.

Don’t:

Limit payment options on your ecommerce.
Use uncommon payment methods that confuse the customer.

Do:

Provide a variety of payment methods.
Consider Mobile payments and e-bank transfers, not only cards.

Payment Method on Tekla

Use Descriptive Form Labels

Form Labels are an essential part of accessibility. Good labeling can guide the customers to add the correct information.

Keep labels short and descriptive, telling the customer what the input fields mean and that the form is easy to read and scan. For example, instead of using “Where do you live?” or “Where would you like to receive the package?” use the label “Address”. Customers will recognize what information they should add.

Don't use the placeholder as a label because the placeholder disappears when the customer starts typing. Still, the label or the floating placeholder remains visible after the field has been filled in. That helps customers remember what exactly the purpose of the field is.

You can use the placeholder with the label as a description or example of the required information for the field.

Pincode placeholder on Amazon India

Place the label above an input field so the customer is not forced to look separately at the label and the input field, which results in a quick and easy completion time. Make the label font clear and bold.

Checkout Form on Tekla

Don't:

Use long-form labels.
Use a placeholder as a label.

Do:

Use the placeholder as a description for the input information.
Place the label above of input fields.

Highlight Required Fields and Use Clear Validation Messages

Form validation ensures the customer’s data entered into a form meets the requirements and serves as a communication point during checkout.

To save your customer time and prevent errors, highlight the required fields and provide clear instructions on what they need to pay attention to while completing the process. If a customer enters incorrect information in a field, provide concise and informative validation messages to guide them on fixing the error and moving forward quickly in the checkout process.

Place the validation message near the field with the error to draw the customers' attention and avoid the need to search for the field.

It’s also important to notify customers of any invalid or missing input fields in real time before proceeding to the checkout process's next step. This way, customers can address any issues without retracing previous steps later.

Checkout Form on Tekla

Don’t:

Add broad messages such as “there’s something wrong” when there is an error or invalid data.
Use long validation messages.

Do:

Highlight the required fields.
Make validation messages specific, concise, and informative. And use field validation in real time.

Make The Checkout Page Mobile Friendly

With the growing number of people using mobile phones for online purchases, it’s essential to create a seamless mobile experience and optimize your checkout process for the success of your ecommerce business.

On smaller devices, use wide checkout buttons and large fonts to minimize this risk and help customers to complete a purchase smoothly without any obstacles. Also, avoid placing two or more fields in a single row. Instead, use individual rows with labels for each field; this ensures a smooth sequential transition through the checkout process.

Checkout Form on Tekla

Don’t:

Place more than one field in a row.
Keep the buttons and fields small.

Do:

Make the form fields vertical and use wide buttons on small devices.
Put one field in a single row, a maximum of two fields for short inputs.

Highlight Security and Privacy

The more secure your ecommerce is, the more trust and credibility you establish with your customers. They can confidently purchase through your ecommerce with their sensitive payment information, billing, shipping, and personal information.

Show the payment methods with the original payment gateways logo, such as Visa, MasterCard, and PayPal, to offer customers a transparent and secure experience.

To further earn customer trust, display security certifications or trust seals like Norton and Better Business Bureau at the checkout screen, showcasing your ecommerce protection. Adding Extended Validation Certificate (EV) can help your customers to comprehend your ecommerce verification and display a green assurance bar with your ecommerce name.

Having an SSL certificate with HTTPS also reassures customers and motivates them to move forward in the checkout process.

Don’t:

Let the checkout process without security options.

Do:

Use original payment gateway logos, including Visa, MasterCard, and PayPal.
Use certifications or trust seals like Norton and Better Business Bureau.
Add SSL certificate with HTTPS.

Show Checkout Progress Bar

When customers don’t know how long the checkout process will take, they might abandon their checkout process. Prevent this by adding a progress indicator that allows them to track their progress and know where they are in the checkout process. It guides and shows the customer what to do during the checkout process.

Make the progress indicators with the fewest steps to show the customers how quick checkout will be. The design should be clear, with each status indicated by a different color.

Add a descriptive label for each step instead of just displaying a number. For example, Step 1-Personal Details, Step 2- Shipping Details, and Step 3- Payment Details. This informs customers what they need to complete the purchase.

Offer customers a back option if they need to edit their address or make any other changes. Also, always save the progress if the customer wants to exit and return later.

Checkout Indicator on Tekla

Don’t:

Make the process too long.
Reset the information in case the customer is back.

Do:

Make the indicators in as few steps as possible.
Make the steps clear visually and add a descriptive label for each step.

Improve Website Performance

Improving site performance is important for any ecommerce website. Poor performance, including crashes and slow loading times, can lead customers to abandon the checkout process. Therefore, good performance can encourage the customer to complete the process and lead to increase conversions and sales.

Make sure to use a hosting service that fits your ecommerce and customer traffic. Avoid shared hosting and opt for VPS or cloud hosting, which allows you to scale performance according to your needs.

Test your ecommerce with tools like Pagespeed Insights and GTmetrix to evaluate your ecommerce and identify areas for improvement.

Website speed is impacted by the number of files the browser has to request to load a website, causing delays in loading time. To speed up your website, reduce the number of HTTP requests by removing unnecessary elements, features, and plugins, minifying code, compressing assets and utilizing Lazy Loading. Lazy Loading allows the browser to upload assets while customers are scrolling, sending requests only for the visible portion of the page, which speeds up the initial loading time.

Don’t:

Don’t send too many HTTP requests.

Do:

Test your website with performance testing tools to discover improvement areas.
Use lazy loading.

Add Upsell and Cross-Sell

Upselling and cross-selling strategies increase customer satisfaction and result in additional purchases, making them an easy win for increasing sales. Upselling involves encouraging customers to purchase higher-end or premium versions of the products that the customer selects. And coss-selling encourages customers to purchase related or complementary products to the ones selected by the customer.
Offer product bundling to make the customer buy more products with fewer steps, and offer a special price or discount on the total amount of product bundling, making them feel like they have received a good deal. However, it’s important to only suggest relevant products based on the customer's browsing history or car content. Avoid suggesting products the customer doesn’t need, as you could lose credibility.

Don’t:

Offer product bundling with products not relevant to each other.
Show products that customers are not interested in.

Do:

Offer product bundling.
Offer a special price or discount for product bundling.

Conclusion

A well-designed checkout process is one of the most critical aspects of success in your ecommerce. This process determines whether potential customers become loyal or abandon their carts.

Optimizing the checkout process covers several elements, but it mainly involves ensuring customers can complete the process quickly and easily with a few steps. It’s important to ensure that the checkout process is enjoyable for the customer, without any boredom and difficulties that could discourage them from buying.

Developers can utilize Medusa to build a checkout experience tailored towards their users. There are no limitations in how they build it or what tech stack they use. You can learn more about Medusa and what it offers in its documentation.

5 B2B Ecommerce Sites You Should Learn UX From

Safa Emhemed — Tue, 27 Dec 2022 17:09:34 +0000

I am a UX specialist experienced in both developing and texting great UX experiences.

For this article series, I’ve spent time digging into some of the best ecommerce sites for B2B and zoomed in on what makes them stand out on their UX.

Read below to learn more about the top B2B ecommerce sites we chose and what to expect from this series.

Medusa’s UX and B2B Focus

Medusa provides bespoke commerce infrastructure through its composable commerce platform. Its extendible and open setup makes it well-suited to support cases that require setup flexibility and is easy to customize.

Medusa’s headless architecture makes it possible to build bespoke storefronts that can be optimized to provide a great UX, leading to customer conversion. This is needed in a B2B setting, where most stores are not set up well to cater to the particular needs of a B2B customer.

If you’d like to know more about our product and how we serve B2B users, feel free to visit our B2B page.

Top 5 B2B Ecommerce sites

1- McMaster-Carr

McMaster-Carr was previously crowned by HackerNews as the best ecommerce website. This motivated us to write all the UX tips that this ecommerce website offers, and start this series as a whole.

Some of its important features are smart site search and filters, simplified content and design, and seamless checkout experience.

2- Grainger

Grainger is an industrial supplier that offers a large selection of private-label and brand-name products from some of the world’s top manufacturers.

Some of its features that provide a great UX include well-organized categories, a supercharged shopping experience, and a powerful search experience.

3- Amy Myers MD

Amy Myers MD store provides high-quality natural supplements, free of binders, additives,
fillers, artificial ingredients, and chemicals.

Some of its features that provide a great UX include an optimized search experience, seamless cart and checkout flows, and effective product-listing pages.

4- Blake

Blake is a market leader in the world of paper, envelope, and postal packaging solutions.

Some of its features that provide a great UX include clean and clear menus, informative product pages, and next-level filters.

5- Massey Ferguson

Massey Ferguson is a world-famous brand supplying a huge range of tractors and agricultural machinery. It provides a limited number of products, but each product is complex and has a lot of details.

Some of its features that provide a great UX include intuitive and smooth navigation, summarized products section on the homepage, and highlighted promotions.

Build your B2B Store with Medusa

With Medusa, the open-source B2B platform, build your ecommerce store to include all these features and more. Use Sales Channels, Customer Groups, Price Lists, and other features to build your B2B ecommerce store.

Learn more here, and follow this tutorial to start building your B2B store.

Want More B2B Content?

These are just a few of the essential B2B ecommerce practices that you need to know. By following these practices and tricks, you can ensure that your business is catapulting your brand to the top.

This way, you’ll be providing a good experience for your customers, and increasing sales and profits.

There's more to sift through and learn, we advise reading each store article.

Furthermore, be sure to check out some of Medusa’s articles on the B2B ecommerce:

B2B Perspective report
2-series tutorial on how to create a B2B ecommerce platform with Medusa
Comparison between top 5 B2B ecommerce platforms
9 UX tips from the best B2B ecommerce website (as crowned by HackerNews)

The world’s best B2B ecommerce UX: Massey Ferguson (5/5)

Safa Emhemed — Thu, 22 Dec 2022 12:57:25 +0000

I am a UX specialist experienced in both developing and texting great UX experiences.

For this article series, I’ve spent time digging into some of the best ecommerce sites for B2B and zoomed in on what makes them stand out on their UX.

I will go through and dissect the best B2B websites I’ve found one by one. Hopefully, this gives you some inspiration to take into your ecommerce site.

Series overview

Medusa’s UX and B2B Focus

If you’d like to know more about our product and how we serve B2B users, feel free to visit our B2B page.

Massey Ferguson

Massey Ferguson is a world-famous brand supplying a huge range of tractors and agricultural machinery. It provides a limited number of products, but each product is complex and has a lot of details.

Also, each product comes with a manual that allows customers to figure out whether the product fits their needs or not.

This article explores some of Massey Ferguson’s powerful UX, such as:

Intuitive and Smooth Navigation: provide the navigation that helps your customers find what they need.
Summarized Product Section on The Homepage: the homepage is typically the first page your customers will see. Utilize it to show your customers what your store offers.
Highlighted Promotions: motivate your customers to purchase by emphasizing the promotions you offer.

1- Intuitive and Smooth Navigation

Your website navigation menu is the key to success in your ecommerce website. The easier and more engaging your navigation experience is, the easier it will be for customers to find what they need.

Some good navigation tips that Massey Ferguson applies:

In the products dropdown menu, customers can see the main two categories at the top of the menu and can select one of them based on what exactly they looking for.

When a customer hovers over one of the subcategories, the product names under these subcategories are shown next to the main category. This gives the customer a glimpse of the available products before diving into a category and helps narrow their options.

Similarly, when the customer hovers over a product’s name, the product’s image and details are shown in the menu. Customers can easily navigate between available products before deciding on which one fits their needs.

2- Summarized Product Section on The Homepage

As the homepage is most likely the first page a customer will see of your website, you can utilize it to show a selection of your store’s products.

For B2B ecommerce websites, the homepage should show the customer what this store specializes in and the overall available products and options.

Massey Ferguson utilizes the homepage to showcase their available products by doing the following:

Customers can see the main categories on the home page as filters. They can choose between the available categories to get a quick overview of the available products under that category.

Quick view to view more information for all products in the grid, or per product instead of viewing the product page. Other information can serve as a significant motivator for different types of customers, so Include information extras that will nudge customers to purchase.
The products’ main details can be easily viewed right from the homepage by toggling the Quick View option. Customers can easily find what they’re looking for without leaving the home page.

Product details are shown as short details with clear icons. Customers can easily scan the details of the products in seconds.

3- Highlighted Promotions

B2B customers come to your store with specific products in mind, but promotions are always appealing. It’s important to properly highlight your promotions, as it catches the customer’s eye immediately.

Massey Ferguson does a good job of highlighting its promotions:

Promotions are shown in the hero section, which is the first section of the website that the customer sees.

On the Offers page, promotions are shown with an expiry date. This urges customers to quickly purchase before the promotion ends.

The offer details are noticeable, and the time of the offer is spotlighted on the product card, to ensure that all customers are aware of the promotions details and it’s impossible to miss. Also, it’s easy to check more details by clicking the “Find out more” button which opens the details on the same page and that doesn't distract the customer by navigate between pages.
For each promotion, its details and expiry date are shown in the offers list. Customers can check if there are any promotions for the products they want to purchase directly from the list.

Build your B2B Store with Medusa

Learn more here, and follow this tutorial to start building your B2B store.

Want More UX Tips?

The world’s best B2B ecommerce UX: Blake (4/5)

Safa Emhemed — Wed, 21 Dec 2022 13:11:58 +0000

I am a UX specialist experienced in both developing and texting great UX experiences.

For this article series, I’ve spent time digging into some of the best ecommerce sites for B2B and zoomed in on what makes them stand out on their UX.

I will go through and dissect the best B2B websites I’ve found one by one. Hopefully, this gives you some inspiration to take into your ecommerce site.

Series overview

More to come this week!

Medusa’s UX and B2B Focus

If you’d like to know more about our product and how we serve B2B users, feel free to visit our B2B page.

Blake

Blake is a market leader in the world of paper, envelope, and postal packaging solutions. Blake's B2B ecommerce has a well-designed homepage, an accessible menu, and direct access to brands, colors, and product specifications.

Blake’s product pages include detailed descriptions and different options to order. Overall, it focuses on attracting customers by providing them with seamless features.

This article explores some of Blake’s powerful UX, such as:

Clean and Clear Menus: design the layout of your menus to make it easy for customers to find the categories they’re looking for.
Informative product pages: provide your B2B customers with all the information they need, encouraging them to purchase.
Next-level filters: allow your customers to filter beyond the filters. Allow them to navigate their way through your products list to find what they need.

1- Clean and Clear Menus

B2B customers often know the exact specifications of the product they want and just want to find it as quickly as possible on your site.

Your B2B ecommerce website should make it easy for customers to scan available products and categories to find what they need efficiently.

Some examples of how Blake does this:

The typography and spacing used between different elements, products, and categories, make it easier for the customer to scan available products or categories to find what they need.

The available options in the menu are grouped into related sets. For each group, concise and descriptive labels are used.
Customers have the choice to navigate available products using sizes, types, colors, or brands.
Different designs for different mega menus, depending on the top category, the menu shows up in different styles and different types of links to promote customers for what matters in this category.
Mega menus are designed differently based on what products are available in the top category of that menu. Customers browsing these menus get a glance of important items in that category.

2- Informative Product Pages

The product page should be simple and not stuffed with too much information. This allows the customer to properly focus on the product and its properties.

Some ways that Blake does this:

Product images are of high quality and can be zoomed in, which gives the customer a closer and more realistic look at the product. For products like those that Blake provides, this is essential as customers can almost get the textual feeling of the products.
Provide a brief and informed description next to the image and below provide detailed product information in the table. the descriptions are a key area here so clear, well-written product descriptions that help customers to choose the product is the right fit.
Products have a brief description at the top of the page, but more details are shown in a table below it. Customers can use the description to learn the general details of the product, then, if they’re interested, browse the more detailed table.

Breadcrumbs are available at the top of the product page. It helps the customer understand where they are on the website, as well as what category they’re browsing.

Customers have different purchasing options, either by the pack or by units. This gives B2B customers freedom while ordering and allows them to easily order large quantities.

If customers register, they can request a sample or get help from Blake’s sales team when ordering large quantities. This encourages customers to register.

3- Next-Level Filters

Product filters are one of the essential elements impacting your customers’ user experience. Optimizing your product filters increase customer engagement.

Some practices that Blake applies in their product filters:

Next to filters, the number of products under that filter is shown. This gives the customer an idea of the results they’ll get before applying the filter.

Customers can see all available categories in the filter. When a filter is applied, not only the products are updated, but the filters as well based on the remaining products. This makes the customer’s browsing experience seamless.

The selected filters are shown at the top of the filter list and can be easily cleared. Customers can navigate between different sets of filters by just clearing applied filters, then applying new ones.

The short filter list saves customers time and makes filtering less frustrating for them.

Build your B2B Store with Medusa

Learn more here, and follow this tutorial to start building your B2B store.

Want More UX Tips?

This series covers other top B2B websites that provide good UX. Check other parts out to get more tips:

More to come this week!

The world’s best B2B ecommerce UX: Amy Myers MD (3/5)

Safa Emhemed — Tue, 20 Dec 2022 13:18:54 +0000

I am a UX specialist experienced in both developing and texting great UX experiences.

For this article series, I’ve spent time digging into some of the best ecommerce sites for B2B and zoomed in on what makes them stand out on their UX.

I will go through and dissect the best B2B websites I’ve found one by one. Hopefully, this gives you some inspiration to take into your ecommerce site.

Series overview

More to come this week!

Medusa’s UX and B2B Focus

If you’d like to know more about our product and how we serve B2B users, feel free to visit our B2B page.

Amy Myers MD

Amy Myers MD store provides high-quality natural supplements, free of binders, additives,
fillers, artificial ingredients, and chemicals.

Its B2B ecommerce website is carefully designed. It offers more than enough quality information on its products via descriptions and images. It efficiently provides customers with all the details they need.

This article explores some of Amy Myers MD’s powerful UX, such as:

Great on-site search experience: utilize your search bar to provide your customers with the results they’re looking for.
Seamless cart and checkout flow: provide your customer with the necessary features to encourage them further toward purchase.
Effective product-listing page: showcase your products in the best light, with enough information to build up the customer’s curiosity.

1- Optimized Search Experiences

In B2B, website search is crucial. B2B customers often already know what they want to purchase and need the ability to quickly and easily find what they are looking for. A good search UX would allow the customer to do just that.

Some of the features that they implemented to provide a good search experience:

On the website, customers can choose to search from different domains of the website such as the store, help center, and more.

Once the customer starts writing the query, they can see the result in a drop-down menu. The results show a photo and the price along with the title. This helps the customers to make an informed decision.

On the search results page, if the product name includes words from the search query, these words are highlighted. This allows the customer to focus on products that are potentially more accurate for their query.

There is a search bar in the middle of the home page. This search bar shows trending searches on the website. That increases the customer’s curiosity to know more about products and might encourage them to purchase.

The search bar is sticky at the top of the page so customers can search no matter where they are down the page.

2- Seamless Cart and Checkout Flow

The shopping cart and checkout pages are major deciding factors in making customers satisfied and reducing abandonment. It can also increase customer loyalty as they’ll feel more comfortable purchasing from your store again.

Some of the good UX that Amy Myers MD implements:

Customers can check out as guests. This makes the purchasing process faster and easier. The less steps a customer has to take to place an order, the higher the chance they’ll go through until the end of the process.

Customers can switch between one-time purchases and subscription purchases of products directly from the cart.

Customers can see how many points they can earn after they purchase the order if they have an account. This can encourage customers to register and purchase more in the future.

Customers can start their checkout experience directly from the navigation bar, as a checkout button is available next to the cart. The checkout button is also designed in a way that catches the customer’s eye.

On the checkout page, customers can see some recommended products under the shopping list. The products have a rating score to encourage customers to purchase them.

3- Effective Product Listing Pages

The product listing display has a significant impact on the way your customers interact with the products. It can boost your B2B ecommerce website’s UX.

Some of the good practices that this website applies:

The grid view and the spaces between cards are easy on the eyes. It allows customers to browse and compare products.

When a customer hovers over a product image, they can see a review left by other customers that have purchased the product. This encourages the customer to see the product’s details and learn more about it.

Products on sale are labeled with a tag on the product card. Customers can also see the prices before and after the sale, and how much they’ll save.

Build your B2B Store with Medusa

Learn more here, and follow this tutorial to start building your B2B store.

Want More UX Tips?

This series covers other top B2B websites that provide good UX. Check other parts out to get more tips:

More to come this week!

The world’s best B2B ecommerce UX: Grainger (2/5)

Safa Emhemed — Mon, 19 Dec 2022 15:41:45 +0000

I am a UX specialist experienced in both developing and texting great UX experiences.

For this article series, I’ve spent time digging into some of the best ecommerce sites for B2B and zoomed in on what makes them stand out on their UX.

I will go through and dissect the best pages I’ve found one by one. Hopefully, this gives you some inspiration to take into your ecommerce site.

Series overview

More to come this week!

Medusa’s UX and B2B Focus

If you’d like to know more about our product and how we serve B2B users, feel free to visit our B2B page.

Grainger

Grainger is an industrial supplier that offers a large selection of private-label and brand-name products from some of the world’s top manufacturers.

With Grainger, customers can place bulk orders quickly and seamlessly. The main focus is on all-inclusive categorization. Customers can easily filter categories to narrow down their options.

This article explores some of Grainger’s powerful UX, such as:

Well-organized categories: assist your customers in finding exactly what they need from the first scan.
B2B-focused Shopping Experience: understand your customers and implement the necessary features that convert visitors to customers.
Powerful search experience: provide the customer with different options that lead to the results they’re looking for.

1- Well-Organized Categories

Good categorization helps customers find what they need quickly. When a customer is looking for a specific product, they’ll try to find the category that this product could fit into.

Ensuring that your B2B ecommerce website’s categories are clearly outlined and showcase enough information about their underlying products will help your customers find what they require easily.

Grainger does a good job at this by doing the following:

On the homepage, popular categories are shown in a grid layout. Each category has a name and a large icon that gives an idea of what products are available in the category. This makes it easier for customers to scan and find the category they’re looking for.

All available categories can also be browsed on a dedicated Product Categories page. Customers can use this page in case they don’t find what they require among the categories on the homepage.

Every category level has a detailed description. This helps the customer understand more about what the category is and what they can find in it.

Categories can also be browsed directly from the mega menu in the navigation bar. They are sorted in alphabetical order, making it easy to scan and find something specific.

2- B2B-focused Shopping Experience

B2B ecommerce websites should streamline the shopping and checkout experience to ensure their visitors are converted to customers, and one-time customers to returning customers.

This can be done by carefully planning and designing the shopping experience based on your customers. Provide the features that would increase the possibility of your customer placing an order.

Grainger offers some good features that show an understanding of their B2B customers, including:

The Add To Cart button in the Recently Viewed Products section on the homepage, is noticeable and attention-grabbing to the primary action you want the customer to take.
Recently viewed products are shown on the homepage. Each of these products has an Add to Cart button. This can help customers look back to what they were interested in, and consider it for purchase.

Bulk order is a superpower for B2B ecommerce websites. Customers can enter the SKU of the product and its quantity, and it’ll be directly added to the cart. Grainger provides this feature directly in the navigation bar. This facilitates the shopping experience of returning customers and encourages them to make more purchases.

Customers can quickly access a summary of a product’s details from the product's listing page. They can also directly add the product to the cart from that same page.

3- Powerful Search Experience

As B2B websites generally offer a large set of products with different details and attributes, it’s important to provide a search experience that allows the customer to find the products they’re looking for.

Making your search experience powerful is more than just showing the correct results for a search query. It’s providing options to narrow down the results, suggestions for better results, and more.

Grainger provides their customers with the following features to enhance their search experience:

The search bar placeholder informs the customer what keywords or attributes they can search products by, such as model or part number. This clarifies to the customer what they can look for with the search bar.

As the customer enters their query, they see real-time keyword suggestions, recommended products, and search results for products, product categories, and brands. Each of these helps the customer narrow down the available results to what they need.

Customers can quickly add the items from the search result to the cart. They can input the quantity and click the Add to Cart button. This is especially helpful for customers that already know what specific item they want.

Save customer search history, which personalizes the search experience and makes the customer reach quickly to products that usually purchase.
The customer’s search history is saved and shown when the customer clicks the search bar. If the customer has previously conducted a search and wants to look through the results again, this helps them find the results again easily.

Build your B2B Store with Medusa

Learn more here, and follow this tutorial to start building your B2B store.

Want More UX Tips?

This series covers other top B2B websites that provide good UX. Check other parts out to get more tips:

More to come this week!

All You Need to Know About UX, UI, and Usability Testing

Safa Emhemed — Mon, 14 Nov 2022 10:40:43 +0000

What is UI/UX Design?

The User Interface UI is focused on the look and design of the product. Every screen, button, page, and various other visual components that you see at the time of using a product. and User Experience (UX) is the strategy of enhancing the comprehensive experience of the users or visitors when they connect with your product.

What is The Benefit of UI/UX Design?

The primary goal of any business is to increase its growth of the business, revenues, and engagement. UI/UX Design is playing an essential role to fulfill the objective of offering maximum consumer satisfaction that ultimately helps increase the number of users of the specific product and to win the users’ confidence.

What is Usability?

Usability means just how comfortable your product is to use for an average user. How easy is the learning curve? How quickly does a user get what they want? Is there anything annoying while using the product? This is what usability is about in a few words, and it connects both UI and UX.

What is Usability Testing?

Usability testing is a method of testing the functionality of a product by observing real users as they attempt to complete tasks on it. The users are usually observed by researchers working for a business. The goal of usability testing is to reveal areas of confusion and uncover opportunities to improve the overall user experience.

What is UI/UX Testing?

UI/UX testing is a process of testing user interfaces and user experience for software products.

UI testing focuses on testing the user interface of the software to make sure that all buttons, fields, labels, and other elements on the screen work as intended when performing as they should and that users understand how to use the UI. Examining how screen controls, such as toolbars, colors, typefaces, sizes, buttons, icons, etc., respond to user input is a key component of testing user interfaces.

UX testing, on the other hand, focuses on how the product affects the user’s whole experience. UX testing is often used to evaluate a product’s ease of use. It encompasses all aspects of the user experience, from the layout and design of the interface to the way the content is presented. It can help identify any problems with the user experience, such as confusing or difficult-to-navigate menus, incorrect or outdated information, and slow or difficult response times.

Why UI/UX Testing is Important?

Any problem that may occur with your product may lead to its abandonment, even a minor issue such as a lack of a button or a typing error can lead to a huge problem in the overall design

UI/UX testing is an important part of the software development process, It helps to make sure that the users have a positive experience when using the software and that your software is easy to use and provides a good experience. Also, UI/UX testing is can help to improve the quality of the software and make sure that users are satisfied with it.

It is a good idea to carry out UI/UX testing early on in the development process so that any issues can be identified and catch any potential problems early on and fixed before the software is released. It can also save you time and money in the long run, as fixing issues after your product has launched can be much more difficult and expensive and make the issues become bigger issues.

What Are We Exactly Looking For With UI/UX Testing?

Essentially, User Interface testing checks how the tested product performs based on the following criteria:

- Accessibility:
The product should be accessible to the largest number of potential users. People with disabilities should be able to use it via assistive services just as easily as an average target user. People with different backgrounds and native languages shouldn’t have issues using your product either. also other groups such as those using mobile devices, or those with slow network connections.

- Perceivability:
To be considered perceivable, product content must reach users through the senses they rely on to receive information and all parts of the interface should be easy to perceive and have alternatives. For example, if an image is unavailable, it should have alternative text or a caption so users can understand what it represented.

- High Performance
To gauge the performance of your product, you need to be aware of the speed at which it loads pages and content, especially high-quality images. Text loads faster than images and illustrations, so the aim here is to make sure your product is in no way sluggish and loads within a matter of seconds.

- Understandable Interface
In an understandable interface, the content is readable – there’s no fine print or clash of colors. It also operates in predictable ways so users can avoid making issues.

- Ease of Navigation
Product navigation is one of the top factors to consider, when it comes to retaining visitors, keeping them engaged, and driving them through the conversion funnel. Navigation should be made as simple, easy, and seamless as possible so that users don’t think about doing something, but just do it. Poor navigation does more harm than good. It confuses visitors and sends them scurrying for the exit. When they can’t find what they’re looking for, you don’t get the conversion you want, either.

- Responsiveness
Responsiveness is all about your site working smoothly and cleanly regardless of the device it’s opened on. Your product should respond to the user’s behavior and environment based on screen size, platform, and orientation. This poses a website design challenge because most sites are designed with computers in mind.

And many other points that you need to consider:

Consistency and logic
Compatibility
Learnability
Operability
Credibility
Accuracy
Efficiency

How To Test UI/UX Effectively?

Though there is no ideal way for UI/UX testing, some of the tips for the best way for UI testing are as follows:

1. Identify What You Want To Test

Define the goal clearly, this will help you measure success and analyze results in the long run. What are you testing? What does success look like? You’ll know what to look for throughout the test and how to benchmark your results.

2. Define Your Users

Define your end-user, Business, children, elder, tech...etc. You’ll need this not only to design the best possible solution but also to source candidates you can test with.

3. Choose Your Method

There are plenty of user testing methodologies to choose from that’ll serve your needs, Whether you want to save cost or resources with unmoderated testing, or are striving to get the most qualitative and quantitative results with moderated testing. here are the most famous methodologies:

Moderated:
Moderated testing is when the session is managed in person or remotely by a researcher who introduces the test to participants, answers any of their questions, and asks follow-up questions. To set it up you’ll need to find time for both parties to be available, a place to carry out the test, and a method for tracking responses and results. These tests are usually held in labs and produce in-depth results but can be expensive to organize and run.

Unmoderated Testing:
Unmoderated tests are done without direct supervision and it’s more likely that the tester will complete tasks in their own environment using their own devices and without a moderator present. It offers quick, robust, and inexpensive user testing results to be used for further analysis.

Remote Testing:
Remote testing offers quick, inexpensive, and robust testing results that are most often conducted with the help of video conferencing software. This type of test is beneficial because it allows you to get feedback about your product from a large number of real users

Guerrilla:
Guerilla testing is a type of UX testing conducted in public places such as coffee shops or public parks. This type of testing is often used to test products not yet available to the general public. The ultimate goal is not to conquer your territory or to sell you a brand - it’s to see how a prototype performs in the real world.

Phone Interview:
In phone testing, a moderator verbally instructs participants to complete tasks on their computer and collects feedback and user behavior. Phone interviews are an economical way to test users in a wide geographical area. Because they are less expensive than in-person interviews, they help collect more data in a shorter period.

There are more plenty methods that you might want to include in your test will just mention them:

Lab Testing
Contextual Inquiry
Unmoderated Remote Testing
Assessment
Comparative
Explorative
Card sorting
Surveys
Tree Testing
Session Recording

4. Record Scenarios

Make sure you’ve set up a method to record your observations in order to gain real insight into your users’ needs, behaviors, goals, and frustrations and share them with the team.

5. Analyze The Results and Make Changes.

By the end of the test, you’ll have a set of invaluable data for your initial idea from potential end-users and as you’ve set clear goals, you’ll know exactly how to measure success, be sure to analyze goal completion, to give you a rounded and strong data set.

Checklist for UX Testing

Similar to UI testing, running UX tests entails examining a variety of important factors. here are some points to follow:

Navigation elements, across the software and its sub-modules, each of which has several pages.
Clickability of the header and footer buttons and calls to action.
Redirects clickable elements and links.
The performance.
The software is mobile-friendly.
The content of the product (readable and clear).
Redirects Clickable elements and links
Error and Success messages.
Distribute the elements.

Checklist for UI Testing

To ensure a seamless user interface examination process, it is typically desirable to have a UI testing checklist, However, when performing UI software testing, the following fundamental criteria are often looked at followed points:

Positioning, length, size, alignment, and width of all UI elements
Font Size, Spilling, and Typeface
Icons and colors
Required Fields
Data type errors
Data entry in fields for numbers, texts, special and invalid characters
UI elements on different sizes of Screens
Table scrolling
Progress bars
Action buttons (Save, Change, Delete)
A menu drop-down
Danger Signals
Shortcuts and menu items

The UI/UX Testing Tools

The following is a list of the UI/UX testing tools that commonly use:

GTmetrix: creates a final report for the pages, along with several recommendations for fixing the issues.

Loop11: is offering a very robust user testing platform. You can offer unmoderated and moderated tests within the platform with structured frameworks on different methods.

Optimizely: allows defining the conditions under which the income grows, registration, downloads, and content increases.

Crazy Egg and Hotjar: a heat map service that helps to understand how visitors interact with the website.

BrowserShots: this is a tool from BrowserStack is offering you to take screenshots of your website in various browsers and operating systems using a service online called.

Maze: is a UI/UX testing tool that focuses on prototype testing, offering integrations with major design tools such as Figma, Adobe XD, and more.

Zurb: helps to understand whether the users like your website design and what they remember after interacting with your site.

UXPunk: often used to understand the best hierarchy of website content as well as the most important pages that should be visible on your site.

Can You Automate UI/UX Tests?

When it comes to functional and performance tests, it’s possible to achieve full automation. You may imitate user behavior or check technical data with automated testing to ensure each feature works as intended. In usability (both UI and UX testing), it’s all about human behavior. You need to observe how people interact with a program and how they react, that’s why this type of testing may be only partially automated.

For example, you may automate data input and analysis, with UX testing platforms and additional tools, and get valuable data with apps like Hotjar or User report, but you cannot watch real-life user behavior with any of these tools. So, manual tests are also necessary for usability.

Tips to Help You Improve Your User Testing

Here are a few quick tips to help you keep in mind when thinking about UI/UX testing:

Test as early as you can, don’t wait for fully formed products so you can reap the benefits of testing earlier.
Mention your objectives clearly to the user
Asked open-ended questions, no yes/no, or multiple choice answers. Start with the easy questions and detailed questions come later.
Test with real users who will give unbiased answers.
Observe behaviors and listen to the user.
Don’t try to solve everything at once, fix the most important problem first, and test again.
Engage the whole team in the process it will help them understand problems and what they’ve learned.
Ask your user to think aloud during the test and observe their thoughts.

Summary

UI/UX testing is your chance to understand how your users perceive and use your products. If you want to build great software, UI/UX testing is a must. By regularly inviting users to test your ideas, you’ll be able to meet their needs with actionable feedback, whilst validating your own designs, saving time and creating fewer headaches for the development and design teams.

9 Tips to Improve your Ecommerce User Experience

Safa Emhemed — Thu, 03 Nov 2022 12:17:58 +0000

Ecommerce is rapidly becoming the way you do business today. And one of the most important outcomes of this prosperity is a large number of customers. The biggest challenge is how to convert your visitors into customers.

One way you can gain customers is by building a well-developed ecommerce user experience. If your store doesn’t offer the best UX, all your efforts might go down the drain.

Let’s look at why you need to care about UX, and how ecommerce designers can make the customer’s experience hassle-free.

What is Ecommerce User Experience (UX)?

Ecommerce user experience (UX) is defined as the overall experience of the visitor when interacting with your store, from the second the visitor loads your homepage, to the purchase, and even the post-purchase experience.

That is why it’s wise to focus on every element of UX, starting from performance and neat design, to clean navigation. The best ecommerce user experience aims to make the shopping experience as good as possible to drive potential customers to your products and services.

Improving your ecommerce UX leads to more impulse purchases, less cart abandonment, high trust and confidence in your store, and higher overall conversion. So, it's important to follow the best practices when you build your ecommerce store.

9 Best Ecommerce UX Practices

1- Clean and Clear Homepage

Your homepage is the first thing your customers see when they come across your store, and it’s usually the page that gets the most traffic. It’s crucial to make it look clean, uncluttered, and have a clear purpose.

Here are some points to consider while building your homepage:

Don't make it cluttered. Keep it offering minimum choice pathways. Don’t bog down your customer with too much information.
Keep content short and to the point.
Avoid pop-ups and forms. They distract your customers.
Make your customer support contact information prominent through a live-chat widget on your homepage.
Keep your hero area streamlined and simple. The images should be relevant and meaningful to your ecommerce store. Use high-quality images and make them full-width.
Keep the text on the hero image short, and relevant, and let there be a contrast between the text and the background.
Always add Call-to-action buttons on your hero image. It ensures the highest chance of customers interacting with it.
The visual hierarchy should follow the information hierarchy so customers naturally gravitate to the most important products first. You can do that by adjusting the position, color, or size of your products.

2- Make Sure Your CTA Buttons Are Clear and Prominent

Call-to-action (CTA) buttons are key to ecommerce success. They help customers to navigate your store and help you highlight the products and promotions. CTA in ecommerce generally is an “Add to Cart”, a “Buy Now”, or a “Checkout” button. Therefore, good CTA buttons would inspire your customers to take action and urge them to purchase.

A good CTA should be:

Noticeable and clickable.
Readable with contrasting colors and bold lettering.
Placed in the right place on the website or the application so that customers can find them quickly. For example, place “Sale” on the navigation bar to make customer access it easily. You can also place the “Sale” button on the hero area or in a wide section on the homepage.
Be clear about what happens next. For example, the “Show Sales” button or tab will show your customer only the products in the sale, not any other products. Also, the “Shop Now” button should show your customer product listing page.
Keep the wording short but with clear and common phrases. For example, use “Add to Cart” or “Buy Now” to add a product to the cart.

3- Enable Search From All Pages

In ecommerce stores that sell a large number of products, the search bar is an essential way for customers to find the products that they are looking for.

These are some considerations to take when you design the search bar:

Make the search bar prominent and ensure to use a background that makes it stand out. For example, make the field lighter and the background darker, which makes the customer catch it readily.
If you use a search icon, you should make it easy to spot. For example, near the cart icon.
Place the search on the top right or centralized.
Use sticky search bars to ensure the search feature is available everywhere on all pages.
Use autocomplete function to help customers search faster and fix spelling mistakes. For example, you can use Algolia for the best practices.
Add filters when using the search bar to narrow search results.
Use suggested results and autocorrect for human errors.
Save customers’ search history.

4- Make Your Product Listing Pages Informative

The product listing page is the most important page for customers. Not only do they use it to find the products they need, but they can use it to find products they didn’t know they needed.

Some essentials to include are:

Provide product images, prices, availability, and options (colors, sizes,...etc) on your listing pages.
Show primary actions like “Add to Cart”, “Buy Now”, and “Add to Wishlist” buttons for each product. Place them prominently relative to the rest of the page content.
Make the name of the product bold and the price of the product clear.
Show products in grids and use a divider between products.
Provide pagination to allow your customer to navigate between pages without struggle. Allow them to jump to specific pages within the results.
Mark bestselling, recently launched, and out-of-stock products with unique tags or icons.
Allow customers to sort products by price and rating.

5- Use High-Quality Product Images and Strong Descriptions

The online shopping experience is limited on all fronts. Your customers can’t try on products and can’t feel or tangibly experience them. So, providing high-quality product images and strong-detailed descriptions help your customers get a better understanding of the products.

Here are some tips to follow:

Use large, high-resolution images with white backgrounds and good lighting.
Add a zoom-in feature to allow customers to see product details clearly.
Allow customers to scroll back and forth between images.
The images should show different shots of the product from different angles, close-up images of its texture, and photos of the product in use.
Use clear, well-written, and detailed product descriptions to assure your customers that your product is the right fit.
Provide available product dimensions and colors.

6- Show Product Reviews

Including customer reviews on your product pages is a very powerful way to encourage customers to purchase. By displaying customer reviews on the product page, you’re showing new visitors that you’re a trustworthy seller.

Here are some tips to ensure the best UX for product reviews:

Show the rating average by stars.
Pair the star rating with a review.
Allow customers to submit photos and videos of the product they received.
Show a questions and answers section.
Place the ratings closer to the price. A high rating can encourage the customer to make the purchase.

7- Highlight Deals and Promotions

Promotions play an important role in attracting customers to your site and tempting them to purchase once they arrive.

Here is how you can ensure that promotions are communicated effectively to your customers:

Show a prominent sales and deals section on the homepage. It should be noticeable but shouldn’t compete with the homepage’s primary value proposition.
Call-out deals with bright colors, bold text, and full-width photos.
Show the discount percentage.
Show the old price and the price after the discount, preferably in red color. Also, don’t hide the old price.
Use countdown timers with the products that have sale periods to encourage customers to make a fast purchase decision.
Be clear about the rules and conditions for special offers. For example, “buy one get one free” or “buy two get one free”.
When you have an urgent or a seasonal sale, add an announcement bar or add a Sale button on the hero area with a catchy message.

8- Make The Checkout Progress Straightforward

The more steps that stand between your customers and confirming their purchase, the higher the cart abandonment rate will be. Streamlining checkout makes the purchase process faster and prevents the customer from rethinking their decision.

There are plenty of ways to optimize the checkout process:

Simplify the checkout process as much as possible. Skip steps that are not essential, and combine similar steps.
Show the customer their progress and how much is left until they complete the purchase. That can be done with a progress bar, or numbered steps or stages.
Ask for only the minimal required information, and clarify and indicate optionally and required information.
Highlight the discount code field or coupon.
Allow customers to use the sa billing address as the shipping address with one click.
Offer different payment methods and third-party payment options backed by trusted companies, like PayPal’s OneTouch, Amazon, Android Pay, and Apple Pay.

9- Don’t Force Customers to Register

Account creation can feel like a long process and include many steps. it might include the confirmation link or One Time Password (OTP), and this annoys customers who want just to purchase.

For an enjoyable experience, you can enable checkout as a guest. This further makes the checkout process simpler which leads to more purchases.

Here are some tips to follow:

Only require the customer’s email. You can also tie the address they enter to that email so that they can have the address auto-filled the next time they use the same email, even if they’re not logged in.
Enable social login on the checkout screen to allow the user to register with one click.
You can encourage the customer to register by letting them know that they can see their order history, track order details, get coupons, or mot.

Summary

The tips in this article provide a baseline of UX best practices that every ecommerce store should follow, but it’s just the beginning. In general, you have to follow UX standards, make your ecommerce store accessible, and make sure the performance and the security of your store meet the quality standards.

Good ecommerce UX, in a growing and competitive market, is the ultimate advantage. It leads to higher conversion rates and more purchases.

For more useful tips on the success of your ecommerce store subscribe to Medusa’s newsletter to get updates directly to your email, or just stay tuned on our blog.