Skip to product menu
close
  • Recent Launches
    Press Space or Enter to display list of options
EXPLORE ALL PRODUCTS

Recent Launches

New

Payroll software with automated tax payments and filing.

Try now
New

Robotic process automation software to automate high-volume, rule-based tasks.

Try for free
New

Low-code IoT platform and solutions for connected businesses.

Try now
New

Business formation service to launch and grow your businesses.

Try now
New

Privacy-friendly application analytics solution.

Try for free

Sales

 
CRM

Comprehensive CRM platform for customer-facing teams.

CRM
 
Bigin

Simple CRM for small businesses moving from spreadsheets.

Bigin
 
Forms

Build online forms for every business need.

Forms
 
SalesIQ

Live chat app to engage and convert website visitors.

SalesIQ
 
Bookings

Appointment scheduling app for consultations with customers.

Bookings
 
Sign

Digital signature app for businesses.

Sign
 
RouteIQ

Comprehensive sales map visualization and optimal route planning solution.

RouteIQ
 
Thrive

Complete loyalty and affiliate management platform.

Thrive
 
Voice

Cloud Contact Center Software for businesses.

Voice
 
Suites
CRM Plus

Unified platform to deliver top-notch customer experience.

CRM Plus

Marketing

 
Social

All-in-one social media management software.

Social
 
Campaigns

Create, send, and track targeted email campaigns that drive sales.

Campaigns
 
Forms

Build online forms for every business need.

Forms
 
Survey

Design surveys to reach and interact with your audience.

Survey
 
Sites

Online website builder with extensive customisation options.

Sites
 
PageSense

Website conversion optimization and personalisation platform.

PageSense
 
Backstage

End-to-end event management software.

Backstage
 
Webinar

Webinar platform for webcasting online webinars.

Webinar
 
Marketing Automation

All-in-one marketing automation software.

Marketing Automation
 
LandingPage

Smart landing page builder to increase conversion rates

LandingPage
 
Publish

Manage all your local business listings on a single platform.

Publish
 
SalesIQ

Live chat app to engage and convert website visitors.

SalesIQ
 
Sign

Digital signature app for businesses.

Sign
 
Thrive

Complete loyalty and affiliate management platform.

Thrive
 
Voice

Cloud Contact Center Software for businesses.

Voice
 
NEW
LeadChain

Sync, manage, and convert leads across channels seamlessly.

LeadChain
 
NEW
CommunitySpaces

Online community platform for individuals and businesses to grow their network and brand.

CommunitySpaces
 
Suites
Marketing Plus

Unified marketing platform for marketing teams.

Marketing Plus

Commerce and POS

 
Commerce

eCommerce platform to manage and market your online store.

Commerce

Service

 
Desk

Helpdesk software to deliver great customer support.

Desk
 
Assist

Remote support and unattended remote access software.

Assist
 
Lens

Interactive remote assistance software with augmented reality.

Lens
 
FSM

End-to-end field service management platform for service businesses.

FSM
 
SalesIQ

Live chat app to engage and convert website visitors.

SalesIQ
 
Voice

Cloud Contact Center Software for businesses.

Voice
 
NEW
Solo

The all-in-one toolkit for solopreneurs.

Solo
 
Bookings

Appointment scheduling app for consultations with customers.

Bookings
 
Suites
Service Plus

Unified platform for customer service and support teams.

Service Plus

Finance

 
Books

Powerful accounting platform for growing businesses.

Books
 
FREE
Invoice

100% Free invoicing solution.

Invoice
 
Expense

Effortless expense reporting platform.

Expense
 
Inventory

Powerful stock management and inventory control software.

Inventory
 
Billing

End-to-end billing solution for your business.

Billing
 
Checkout

Collect payments online with custom branded pages.

Checkout
 
NEW
Payroll

Payroll software with automated tax payments and filing.

Payroll
 
NEW
Solo

The all-in-one toolkit for solopreneurs.

Solo
 
Practice

Practice management software for accounting firms.

Practice
 
Sign

Digital signature app for businesses.

Sign
 
Commerce

eCommerce platform to manage and market your online store.

Commerce
 
Suites
Finance Plus

All-in-one suite to manage your operations and finances.

Finance Plus

Email and Collaboration

 
Mail

Secure email service for teams of all sizes.

Mail
 
Meeting

Online meeting software for all your video conferencing & webinar needs.

Meeting
 
Writer

Word processor for focused writing and discussions.

Writer
 
Sheet

Spreadsheet software for collaborative teams.

Sheet
 
Show

Create, edit, and share slides with a sleek presentation app.

Show
 
Notebook

Beautiful home for all your notes.

Notebook
 
Cliq

Stay in touch with teams no matter where you are.

Cliq
 
Connect

Employee experience platform to communicate, engage, and build positive employee relations.

Connect
 
Bookings

Appointment scheduling app for consultations with customers.

Bookings
 
TeamInbox

Shared inboxes for teams.

TeamInbox
 
WorkDrive

Online file management for teams.

WorkDrive
 
Sign

Digital signature app for businesses.

Sign
 
Office Suite

Powerful collaborative work platform for teams.

Office Suite
 
Office Integrator

Built in document editors for web apps.

Office Integrator
 
ZeptoMail

Secure and reliable transactional email sending service.

ZeptoMail
 
Calendar

Online business calendar to manage events and schedule appointments.

Calendar
 
Learn

Knowledge and learning management platform.

Learn
 
Voice

Cloud Contact Center Software for businesses.

Voice
 
ToDo

Collaborative task management for individuals and teams.

ToDo
 
Tables

Work management tool to connect people, processes, and information.

Tables
 
FREE
PDF Editor

Collaborative online PDF editing tool.

PDF Editor
 
Suites
Workplace

Application suite built to improve team productivity and collaboration.

Workplace

Human Resources

 
People

Organize, automate, and simplify your HR processes.

People
 
Recruit

Intuitive recruiting platform built to provide hiring solutions.

Recruit
 
Expense

Effortless expense reporting platform.

Expense
 
Workerly

Manage temporary staffing with an employee scheduling solution.

Workerly
 
NEW
Payroll

Payroll software with automated tax payments and filing.

Payroll
 
Shifts

Employee scheduling and time tracking app.

Shifts
 
Sign

Digital signature app for businesses.

Sign
 
Suites
People Plus

Comprehensive HR platform for seamless employee experiences.

People Plus

Security and IT Management

 
Creator

Build custom apps to simplify business processes.

Creator
 
Directory

Workforce identity and access management solution for cloud businesses.

Directory
 
FREE
OneAuth

Secure multi-factor authenticator (MFA) for all your online accounts.

OneAuth
 
Vault

Online password manager for teams.

Vault
 
Catalyst

Pro-code platform to build and deploy your apps.

Catalyst
 
Toolkit

Complete resource for any admin-related lookup queries.

Toolkit
 
Lens

Interactive remote assistance software with augmented reality.

Lens
 
Assist

Remote support and unattended remote access software.

Assist
 
QEngine

Test automation software to build, manage, execute, and report testcases.

QEngine
 
NEW
RPA

Automate manual, tedious, and repetitive tasks easily.

RPA

BI and Analytics

 
Analytics

Modern self-service BI and analytics platform.

Analytics
 
Embedded BI

Embedded analytics and white label BI solutions, tailored for your needs.

Embedded BI
 
DataPrep

AI-powered data preparation service for your data-driven organization.

DataPrep
 
NEW
IoT

Harnessing IoT analytics for real-time operational intelligence.

IoT

Project Management

 
Projects

Manage, track, and collaborate on projects with teams.

Projects
 
Sprints

Planning and tracking tool for scrum teams.

Sprints
 
BugTracker

Automatic bug tracking software for managing bugs.

BugTracker
 
NEW
Solo

The all-in-one toolkit for solopreneurs.

Solo

Developer Platforms

 
Creator

Build custom apps to simplify business processes.

Creator
 
Flow

Automate business workflows by creating smart integrations.

Flow
 
Catalyst

Pro-code platform to build and deploy your apps.

Catalyst
 
Office Integrator

Built in document editors for web apps.

Office Integrator
 
ZeptoMail

Secure and reliable transactional email sending service.

ZeptoMail
 
QEngine

Test automation software to build, manage, execute, and report testcases.

QEngine
 
Tables

Work management tool to connect people, processes, and information.

Tables
 
NEW
RPA

Automate manual, tedious, and repetitive tasks easily.

RPA
 
NEW
Apptics

Application analytics for all apps.

Apptics
 
Embedded BI

Embedded analytics and white label BI solutions, tailored for your needs.

Embedded BI
 
NEW
IoT

Build, deploy, and scale IoT solutions for connected businesses.

IoT
 
DataPrep

AI-powered data preparation service for your data-driven organization.

DataPrep

IoT

 
NEW
IoT

Low-code IoT platform and solutions for connected businesses.

IoT

Search Result

 
CRM Plus

Unified platform to deliver top-notch customer experience.

Try now
CRM Plus
 
Service Plus

Unified platform for customer service and support teams.

Try now
Service Plus
 
Finance Plus

All-in-one suite to manage your operations and finances.

Try now
Finance Plus
 
People Plus

Comprehensive HR platform for seamless employee experiences.

Try now
People Plus
 
Workplace

Application suite built to improve team productivity and collaboration.

Try now
Workplace
 
Marketing Plus

Unified marketing platform for marketing teams.

Try now
Marketing Plus
 
All-in-one suite

Zoho One

The Operating System for Business

Run your entire business on Zoho with our unified cloud software, designed to help you break down silos between departments and increase organizational efficiency.

TRY ZOHO ONE
Zoho One
Zoho Marketplace

With over 2000 ready-to-use extensions across 40+ categories, connect your favorite business tools with the Zoho products you already use.

EXPLORE MARKETPLACE
Marketplace
Skip to main content
Zoho Academy

Ecommerce UX: 3 Examples to Learn From

  • 9 Mins Read
  • Posted on January 5, 2020
  • Last Updated on October 29, 2024
  • By Lauren

At Zoho Academy, we’ve covered best practices for ecommerce UX at length. We’ve offered tips, tricks, and strategies for homepages, product pages, shopping carts, checkout pages, and customer service—specifically live chat. For each of those on-site elements, those articles have examples of businesses who were putting those best practices into action.

But what happens when it’s time to think about all those elements together, working as a well-oiled UX machine for visitors and prospects on their online journeys? Below, we look at three well-designed ecommerce sites, and consider how they’ve implemented best UX practices.

Leaf Shave

Leaf Shave is a razor company that offers “a plastic-free shave people actually love.” Here’s their above the fold content:

And here’s an example of copy and graphics slightly further down:

For starters, Leaf’s got its visual branding figured out: it’s gorgeous and consistent. UX is fundamentally about usability. Think of the Amazons and eBays of the world: these websites are hardly visually appealing, but they offer stellar UX. But that doesn’t mean that users won’t ultimately be more engaged by an aesthetically pleasing website and a beautiful brand.

Focus on the value

There are at least two value propositions on Leaf’s homepage. There’s the inviting header (“Welcome to the better way to shave”), which users will see first, and which will likely draw them in more out of curiosity than anything: What is the better way to shave? But there’s also the longer value proposition under the heading “Ditch cartridges. For good.”

What makes this value proposition so great is that it doesn’t ask prospects to do the work of figuring out how this company is different from “the other guys.” There are a thousand razor companies out there; and Leaf recognizes that it has to shout out its differentiation strategy if it’s going to spur engagement. Less work for us? Yes, please.

Perhaps what we love most about Leaf’s homepage occurs above the fold. Here, the company offers a drop-down menu above its header that lets prospects choose a color to see what the entire set looks like in that color. On a typical ecommerce site, we have to wait until the product page to see these options:

Other things we love about Leaf’s homepage include:

  • How the company engages users through microinteractions that allow them to click on each part of the razor to learn about its features.
  • The video loop that shows prospects how easy the product is to assemble. After all, anything that can be shown in a nine-second loop should be simple enough.
  • The persistent “Send Message” CTA in the bottom right-hand corner of the browse. It’s got a retro look to it, in keeping with the company’s branding; but it’s actually a live chat window. (We knew this because Leaf placed it precisely where we expect a chat window to be.)

The company wasn’t online when we clicked in; but we appreciate that they told us as much. It helped set our expectations. We gave them our email address, and we expect that we’ll be contacted there when they’re back online:

Knowing that the answer to our question is forthcoming, we clicked into a product page for a blade disposer. One of our favorite user experiences occurred when we added that product to the shopping cart:

View of Leaf Shave's website after adding item to cart.

 

Two things happen almost simultaneously here:

  1. A bar appears at the top of the screen alerting us to the fact that we’ve just added an item to the cart, along with a CTA to “View cart” right away
  2. A bright orange cart icon appears at the bottom-right, showing us how many items are now in the cart.

We can click on either one of these to be taken to the cart page. Clearly, Leaf’s priority at this point is moving users through to purchase. We suggest you consider a secondary “Continue Shopping” CTA in your own shopping cart—don’t presume customers are only there to buy one item.

We clicked into the cart and then into checkout. Leaf’s checkout page is remarkably user-friendly. (Notice how the company offers an “X” to the left of the product image for users who decide to remove items):

Here’s everything Leaf does right in their checkout process:

  • Fast and distraction-free. The entire checkout process occurs on a single page. And checkout is enclosed, which means that there are no distractions during the process.
  • Time-saving checkout form elements, which include the presumption that shipping and billing addresses are the same (though prospects can tick a box that says “Ship to a different address?” if this isn’t the case), not forcing account creation, and the option to speed-pay with PayPal.
  • No surprise costs. There’s no tax on the item, which is wonderful. And shipping costs are auto-updated on the same page as soon as the prospect enters the destination address. (Given the size and weight of the product, there’s no enormous sticker shock here; so Leaf gets away with revealing the total cost later than we’d otherwise like to see it.)
  • Clearly show what payments they accept. We love that they show the logos for the payment types they accept here…though it’s never a bad idea to do so earlier in the journey than later.

Finally, it’s worth pointing out that somewhere in this process, we took the product out of the cart to see what would happen. (These are things you should play with as you look for your own “best examples”!) Here’s what popped up right away:

It’s a charming response, if you ask us. And it’s wholly in line with their brand voice.

Akua

Akua makes jerky snacks out of sea kelp. Here’s what users see first when they land on the company’s homepage:

We immediately noticed two things:

  1. The simplicity of the first impression. Akua offers a primary navigation menu with only five items, a value proposition bookended by simple imagery, a primary CTA that leads users directly to the shop, and a secondary CTA that leads to a video to learn more about the company. The CTAs have an obvious hierarchy to them (which is smart from a business standpoint); but they don’t force visitors who aren’t ready into the purchasing funnel.
  2. The live chat option is persistent but hardly obnoxious; it sits quietly in the bottom right-hand corner and we know it’s there if we need it.

We assumed—correctly—that the difference between the “Shop” and “Buy Kelp Jerky” menu items were that the former would lead us to a catalog of all of Akua’s products, and the latter would lead us only to their jerky products. It’s worth noting that the second menu item is a great move from an SEO standpoint.

We clicked into one of their flavors, and were met with this:

Subscription options for products

When we click on the drop-down menu under “Package” and select a different option, the price shown in the top right-hand corner changes immediately. The same is true when we change quantities and when we tick the box to “Get 10% off with a monthly subscription.” As prospects, watching the price decrease when we click on the subscription option is remarkably satisfying. And of course, we love that Akua is willing to make our lives easier by ensuring we don’t have to reorder every time we have to reprovision.

Clean checkout

When we clicked the “Order” CTA, a cart view appeared on the right side of the browser. Akua doesn’t have a “cart page,” but they offer a “cart view.” From here we have the option to head to checkout, or to hit “Close” and continue shopping.

We’re also told that “Shipping will be calculated at the next step.” Sometimes this is really all a business can offer… but it’s certainly a best practice to at least tell your prospects that additional charges are coming. This diminishes at least a bit of the sticker shock they might experience when they finally see that total cost.

When we hit “Checkout,” Akua led us through a two-page checkout process, where we continued to see our cart summary on the right of the screen as we filled in our information on the left.

The only thing we’d have asked for is a progress bar so that we knew how many pages we had left to fill out:

Bear Walker

Bear Walker is a skateboard company. Here’s what visitors see first when they land on the company’s homepage:

Focused copy and design

You may notice that Bear Walker does something that no other company we’ve shown here has done. They’ve chosen one of their products to highlight above the fold. Or, rather, they show one at a time: The “hero image” is a slider; and if visitors pause long enough above the fold, they’ll see 4 of the boards. For visitors who find themselves interested in a particular model, the primary CTA (“See Board”) is for them. The secondary CTA (“See Limited Editions”) is for visitors who want to browse other options.

You might also notice that BW is the first of the sites we’ve shown to offer a search feature in its navigation menu—in the top right corner, just where we’d expect to see it, beside the cart icon. Their main menu only contains five items… and only two of those items present drop-down menus when a user hovers over them:

The remainder of Bear Walker’s homepage is simple, uncluttered, and straightforward: an email signup form, two videos, and five category images that lead to product category pages.

Granted, they don’t have a huge range of products, but they’re certainly not trying to pack a ton of information onto the homepage. And the “sticky” navigation menu moves with the user as they scroll, making it easy to navigate to a different page.

Showcasing your products

A few things Bear Walker’s product pages do well:

  • Multiple images. This is a product prospects will want to see from as many angles as possible. BW shows the top and bottom of its boards at various angles, along with detailed close-ups of the wheels and the handiwork. It’s as good as users will get to holding the product in their hands.
  • The note above the product title that says “This product is available.” Don’t make your prospects wait until the checkout page to discover that the item they want is out of stock.
  • The emphasis on singularity and perfection. Even though these emphases are not about site usability, they get the prospect stoked on the product—and on the possibility of owning one. In the product overview, the company notes that because each board is made-to-order, “no two boards are the same.” It also asks customers who’ve made a purchase to be patient: Bear Walker is “meticulous about the details,” and sometimes needs to start over again on an order to make a more perfect board. We’re not even boarders, and we’ve just gotten excited about this product:

  • The competitor comparison. If you’re a Bear Walker prospect, you don’t even have to do the work of comparing them to the competition. They’ve already done it for you. Users are offered side-by-side comparisons of price, production process, grip, and more:

  • The product video. Remember, consumers aren’t just buying your product: They’re buying into a lifestyle. Bear Walker keeps this in mind, and offers a video that allows prospects to imagine an ideal life centered around their product:

  • A persistent “Buy Now” CTA. We love this element. You’ll note in the image of the video above that the “Buy Now” CTA folows users down the product page as they scroll. There’s a fair amount of information on the company’s product pages—from a timeline of how the boards get made, to social proof, and more. Prospects might make that decision to buy at any point while scrolling. Bear Walker is ready for that moment.

We’ve given you quite a bit to chew on here—but we’ve hardly covered everything; and we recommend you click into these sites to see what else they’re up to. (All three have been acknowledged on the ecommerce awards site; so they’ve already been vetted by design pros who’ve given them the thumbs-up.)

Once you’ve dug into those? Look around to see what else out there. There are “best practices,” and then there are other practices. Some are experimental, others are more traditional, and the only way to find out what will work for you is to start experimenting.

Related Topics

Zoho products mentioned on this page: