How The Best Ecommerce Sites Win at Web Design [47 Examples]

Placeholder How The Best Ecommerce Sites Win at Web Design [47 Examples]

Inspired to unlock your slice of a $1 trillion online shopping industry? 

Before you start browsing for eCommerce templates, you need to understand how to sell online with a high converting store design.  To help you, I’ve surveyed the top experts in eCommerce, web design, conversion rate optimization and user experience. We also analyzed the strategies top-selling eCommerce sites and smaller niche brands use to score conversions.  So if you’re starting your online store and looking to design it (or redesign the existing one), you’ll find plenty of inspiration and hard-hitting best practices to scale up sales.

When performing your own search for inspiration, don’t forget to scratch beneath the surface. Dig deep into the internal pages of the e-commerce websites you love – a homepage is only one piece to the puzzle. The heart and soul of a site is the sum of the eCommerce design and content choices on each individual page.

Let’s start with your most valuable asset – time. With limited capital and resources, where should you be spending your website designer’s time and energy? According to the experts, there are three key pages that have the highest impact on selling online: Most Important Pages For Ecommerce Website Design

  1. PART I: Inspiring Homepage eCommerce Web Designs
  2. PART II: Category Page eCommerce Website Design Examples
  3. PART III: Creative Ecommerce Designs For Product Pages
  4. PART IV: Checkout Page Website Design Examples
  5. PART V: About Us Page eCommerce Site Design Examples
  6. PART VI: Search Results Page eCommerce Web Designs
  7. PART VII: Best Log in Form Design Examples
  8. PART VIII: Effective Email Newsletter Form Designs

 

PART I: Inspiring Homepage eCommerce Web Designs

Best in Homepage Design

The home page of your eCommerce site is the first step along the path to customer loyalty. In an instant, online shoppers need to understand how your brand is different. They’ve found you, now, convince them that their search of the e-commerce web is over.

A case study of 50 best-designed eCommerce websites is an excellent source of inspiration – providing data and analysis on what works and what doesn’t.

Every product line you carry is competing for space on this front page. Use your eCommerce website design to showcase the best and most powerful products that your targeted customers crave. Positioning products effectively, in a way that’s easy to navigate, can help your homepage serve as a conversion magnet. Top it off with beautiful product photography and watch your online sales skyrocket.

Nathan Resnick

Nathan Resnick
Website: Sourcify|
Twitter: @naterez94

1. Target.com – Communicating A Sense of Urgency

Target's Memorial Day Sale

Target’s desktop homepage clearly hammers home the opportunity to save money six times. And there’s a sense of urgency – the best sales are only this weekend.

Pushing timely and relevant sales events via your eCommerce site is a powerful revenue generator – even if it does rack up billable hours with your web designer. Utilize the area below the fold to drive excited shoppers to the product categories that are relevant to them.

Target’s Tappable Tiles Make Mobile UX Design More Approachable

Target's Mobile Home Page Is Tapable

The mobile version of Target’s eCommerce site scores major points for their one-page Metro theme with hints that more savings are just a scroll away. Instead of a boring product carousel, images and brief text are aligned in colorful, eye-catching tiles that can be tapped for instant access to relevant product pages.

2. Nike’s Bold Imagery Draws Users In

Nike Desktop Site

Nike carries thousands of athletic products online. In a single image, they’ve summed up that their products are inclusive and diverse, support physical fitness, and exude a confident, sexy vibe. This message, framed within responsive web design, is the sum result of using their products in your life.

And, they aren’t waiting for you to order a product – they’re converting site visitors into Nike+ App downloads – ensuring an ongoing connection with their target consumer.

Nike Positions App to Strengthen Mobile Engagement

Nike Mobile Site

Dropdown ads on mobile eCommerce sites can help smartphone users engage more deeply with a brand. Nike’s fitness app, in this case, offers a conversion opportunity specifically tailored to mobile users. Responsive design is going away in place of mobile-first.

But, it’s important to adopt a balanced approach. App downloads could distract from their product line. An extra step has been added to the customer journey – placing distance between a site visit and a revenue-generating opportunity.

3. Zoffoli Uses Background Video to Communicate A Powerful Message

Zoffoli Homepage Desktop with Video Background

The human eye is drawn to moving objects. Zoffoli clearly communicates their core value proposition with a powerful statement and a video background that reinforces their message.

4. Dali Decals Uses Mobile App Icons to Engage Smartphone Users

Dali Decals Uses Mobile App Icons

Creating mobile-friendly icons, similar to the ones you’ll find on an Android or iOS home screen, is a great way to encourage mobile site visitors to interact with your site.

5. Standout Breaks Products Into Categories to Make The Search Easier

Standout category page design

To ease out the process of discovering products, STANDOUT arranges the items into eight categories. Seamlessly blended elements make the layout intuitive and do not distract the eye.

UX Tips for a Powerful eCommerce Homepage

Every eCommerce platform is unique – they reflect the vision and values of the brand they represent. Every eCommerce website needs to get a few things right in order to win customers. This includes presenting products in a proven list format. Here’s my round-up of tips you need to consider when designing or redesigning your eCommerce site.

  • Resist the urge to list everything on your homepage. Keep the page uncluttered by removing anything that isn’t immensely helpful.
  • Ensure compatibility with desktops, smartphones, and tablets.
  • Provide helpful links to your company’s contact details, shipping information, return policy, and Terms and Conditions.
  • Focus on helping visitors self-identify and quickly access the information they need.
  • Use high-level categories that are easy to navigate.
  • Leverage uncluttered photos, accompanied by concise text to showcase your featured products and categories.
  • Highlight a timely sale or promotion to create a sense of urgency
  • Showcase unique images and videos to highlight authenticity; avoid stock images.

Scroll back to top

PART II: Category Page eCommerce Website Design Examples

Best in Category Page Design

An effective category page is much more than a filtered product catalog. It’s a tool that allows you to communicate and engage with shoppers that are looking to browse through your products – focusing specifically on the items in your custom eCommerce platform that can help them fulfill a need or desire.

You need to keep the visitor engaged, curious and excited about the products you offer. Let’s take a closer look at companies that get their category pages right, and a few that miss the mark.

1. Home Depot Takes Visitors on a Digital Journey Down the Store Aisle

Homedepot Category Page

This is the “Electrical” landing page on Home Depot’s website. The vertical sub-category menu on the left-hand side provides instant access to more specific product categories. A banner highlighting a timely promotion gives the visitor a sense of urgency. Images are used to spotlight popular products.

Text density is only increased as the visitor scrolls down. This gives the page a clean, informative feel. And the search engine optimization is still implemented without cluttering the elements of the page designed to encourage conversion.

Home Depot Drops Extra Content (Including Images) To Speed Up Mobile Load Time

Homedepot Mobile Category Page

Slow page load times will kill user experience and cause bounce rates to skyrocket. Home Depot made the decision to drop the images and extra content — presenting viewers with links to the critical next steps in the product research process.

Home Depot might be able to get away with this low-effort strategy for increasing page load times because they’re a national brand with massive market recognition. While I would recommend dramatically slimming down the mobile version of your category page, you need to keep the user visually engaged with a more sophisticated, custom eCommerce solution.

Create a mobile eCommerce category page that is able to adapt your vital content to any screen size (responsive web design), keeping a few visual design elements to create a compelling user experience.

2. Amazon Leverages Data to Feature “Best Sellers” in a Category

Amazon's Bestsellers Page

Amazon wins the eCommerce war by leveraging data in a way that delights consumers. You can take a page out of their book by creating a “Best Sellers” section at the top of your category page. Based on real-time data, this section should include product images, a hyperlinked title and customer rating information.

Clean, organized presentation of the items your visitor is most likely to buy is key for maximizing conversions using modern eCommerce website design.

Amazon Uses Horizontal Scrolling to Showcase Curated Product Carousels on Mobile Platforms

Amazon Mobile Swipe

 

Amazon overcomes the traditional limitations of mobile viewing by providing visitors with the ability to scroll horizontally through curated product carousels. This means that more products can be showcased, without requiring a massive webpage that requires visitors to wander endlessly through irrelevant information.

3. Milani Uses Comparative Imagery to Showcase Products within a Category

Milani Uses Comparative Imagery

The images Milani uses to showcase the products on their category page are powerful – both visually and contextually. Each product image is carefully chosen to provide viewers with product insights and shorten the time necessary to compare and select relevant products.

4. SportsMemorabilia.com – Turning Customer Passions into Categories

Sports Memorabilia's Mobile Site Categories

SportsMemorabilia.com got inside of their customers’ heads to best organize their products and create relevant category pages.

Take a step back from your eCommerce website design and put yourself in your customer’s shoes – How would you like to be able to sort and filter the products on your site?

Scroll back to top

PART III: Creative Ecommerce Designs For Product Pages

Best in Product Page Design

A strong product page within an online store provides in-depth information about a product and converts the reader into a buyer. Product specifications should be readily available, as well as opportunities to customize the product.

Timi Garai

Timi Garai
Website: antavo.com|
Twitter: @timigarai

Tabitha Jean Naylor

Tabitha Jean Naylor
Website: TabithaNaylor.com|
Twitter: @tabithanaylor

Scroll back to top

1. Nordstrom – High-Resolution Photos and Language

Nordstrom's High Resolution Photos

Every product page needs a powerful photo to show off the workmanship that goes into an item. Nordstrom provides their customers engaged in online shopping with high-resolution, lifestyle shots optimized at multiple angles, in a variety of scenes within their online store.

The sophisticated language used to describe this high-end item is perfectly matched to the target customer. The product description text paints a visual in the reader’s mind that blends perfectly with the product images.

Nordstrom – Real-Time Mobile Product Customization

Nordstrom's Real-Time Mobile Product Customization

Nordstrom’s black and white product page, optimized for mobile devices, is elegant and clean, with a ton of white space. Selecting a color option instantly transforms the gallery images to match. And, the Nordstrom App download option is placed in a way that doesn’t get in the way but encourages the shopper to make Nordstrom part of their app library.

 

James Dillon

James Dillon
Website: gorilla360.com|
Twitter: @JD_JamesDillon

2. Nike – Superbly Minimal and Inviting UX Design

Nike's Superbly Minimal and Inviting UX Design

The more well-known your brand is, the more opportunity you have to say more with less. Nike is an international power player in the sports shoe industry. So, they made a statement by saying a lot less.

The primary colors are shades of white and grey – giving the page an open, unintimidating feel. Everything required to build trust is there, minus anything that could be a distraction from the product’s legendary status in the market.

Nike Provides The Best Tools to Remove Barriers to Purchase on Mobile Devices

Nike Provides Extra Tools to Remove Barriers to Purchase on Mobile Devices

Keeping the customer on your product page, until they’re ready to click “Add to Cart” is vital for the success of your online store. Nike does this on their mobile site by providing visitors with a size chart. While simple, it removes the need for customers to research this kind of information elsewhere, helping to improve the odds that a motivated shopper will make a buying decision without further delay.

Kunle Campbell

Kunle Campbell
Website: 2xecommerce.com|
Twitter: @kunletcampbell

3. Hunter Encourages Social Media Promotion

Hunter Encourages Social Media Promotion

Each product page on Hunter’s site includes a ton of high-quality photos that showcase the products in action. At the bottom of every image, in a box that perfectly matches the eCommerce site template, there’s a clickable social media “share” button.

When properly executed as part of your eCommerce website development, this creates the opportunity for social selling. It’s important that design is taken into account so that these cues avoid distracting from the overall eCommerce website design of the product page.

Richard Lazazzera

Richard Lazazzera
Website: abetterlemonadestand.com|
Twitter: @RichardABLS

4. Do it center – Creatively Displaying Product Inventory Levels

Do it center - Creatively Displaying Product Inventory Levels

To help customers quickly find what they need, when they need it, Do it center provides real-time inventory levels on their website. Without cluttering the page, information is provided for both online and in-store inventory levels – without the need to click to a separate page.

Brian Massey

Brian Massey
Website: conversionsciences.com|
Twitter: @conversionsci

5. Bellroy – 3rd Party Testimonials Build Trust

Bellroy - 3rd Party Testimonials Build Trust

Sam Mallikarjunan

Sam Mallikarjunan
Website: mallikarjunan.com|
Twitter: @mallikarjunan

6. Car iD – Reassures Buyers

Car ID Reassures Buyers

If you’re selling customizable products or products that fit a specific car or part, you need to reassure buyers that they are getting the right one. Once you choose your vehicle, CariD reassures you that the product will fit.

10 out of 19 Experts Agree: Your eCommerce Product Page is the Most Important Page on your Site Because…

Pamela Hazelton

Pamela Hazelton
Website: pamelahazelton.com|
Twitter: @pamelahazelton

Adham Dannaway

Adham Dannaway
Website: adhamdannaway.com|
Twitter: @adhamdannaway

Shabbir Nooruddin

Shabbir Nooruddin

Bryan Eisenberg

Bryan Eisenberg, Author Of Be Like Amazon
Website: https://buyerlegends.com|
Twitter: @TheGrok

Essential Product Page Strategies

There are a few things that, if implemented correctly, can help your product page become the most powerful tool in your eCommerce arsenal:

  • Ask your content marketer to include SEO and user-friendly content on each product page. Where this content shows up is dependent on your design.
  • Ensure every necessary detail about your product is easily displayed to help customers reach a confident buying decision.
  • Use page numbers to add context and communicate that you have multiple options to meet your customer’s unique needs.
  • Empower buyers to filter your products by price, reviews, relevance – helping them leverage your selection based on their priorities.
  • Layer content in a way that provides thorough details and leaves plenty of white space

Scroll back to top

PART IV: Checkout Page Website Design Examples That Build Trust

Best in Checkout Page Design

The last step in a customer’s buying decision is to check out from your eCommerce site after they’ve filled their cart up with everything they need. This is the moment of truth – will they enter their payment details, or leave the payment gateway, and their cart abandoned?

Even if every other aspect of your eCommerce web design is perfect, the customer’s perception of this page decides whether you live or die.

Beka Rice

Beka Rice
Website: skyverge.com|
Twitter: @beka_rice

 

Giles Thomas

Giles Thomas
Website: acquireconvert.com|
Twitter: @acquireconvert

 

Scroll back to top

1. JCPenney – Easy and Informative UI

JCPenney - Easy and Informative UI

JCPenney provides everything a customer needs to confirm and process an order at a glance. I don’t have to scroll or search. Free shipping upsells and promotions are outlined at the top. Individual product details are neatly presented, and subtotals and totals are tallied to the right.

The use of graphic design, structured text, and easy-to-read font allow me to feel confident in my buying decision.

JCPenney – Emphasis on Help and Support in a Mobile World

JCPenney - Emphasis on Help and Support in a Mobile World

Trust and comfort, in part, comes from knowing that if something goes wrong, the company you’re dealing with has your back. At the bottom of every phase of the checkout, JCPenney gives mobile users multiple ways to reach out for immediate support.

While a customer might be filling their shopping cart from a smartphone, chat is a far more accessible way to get help in-the-moment.

Aaron Gustafson

Aaron Gustafson
Website: aaron-gustafson.com|
Twitter: @AaronGustafson

2. GAP – Checkout for Returning Customers

GAP - Checkout for Returning Customers

Customers want to check out quickly. For returning customers, having to enter payment and shipping information into the system more than once is a major let down. Allowing customers to log in and pick up where they left off in the checkout process is a key factor in building loyalty – making it easier to score repeat business.

Stacey Brazen

Stacey Brazen
Website: brazenprofitlab.com|
Twitter: @brazencw

GAP – Mobile Checkout UI is 2000 and Late

Unfortunately, in the mobile arena, GAP’s mobile version of their checkout page is lacking. It fails to provide clear direction on how to process the transaction – relying on the user to realize that they need to click on each tab and fill in the previously hidden fields.

It’s almost like their web designer is stuck in the early 2000s. Requiring users to guess, without clear prompts, is a horrible way to close the deal online. If the information they need is hidden in an outdated eCommerce solution, don’t expect a high percentage of purchase completions.

Martin Orton

Martin Orton
Website: martinorton.com|
Twitter: @MartinOrton

3. 6DollarShirts – An Easy-To-Follow Checkout Process

6DollarShirts - An Easy-To-Follow Checkout Process

From the moment a user clicks “checkout” in their eCommerce store, they’re presented with a transparent, easy-to-understand checkout page – intuitively designed to guide the purchase across the finish line. What is more, there are no bright colors or distracting pop-ups, that can lead to checkout abandonement.

Claire Brotherton

Claire Brotherton
Website: abrightclearweb.com|
Twitter: @abrightclearweb

BTW, have you noticed that the logo is everywhere on the examples we’ve presented? So, as much as you care about your web design, you should think of your logo. Here’s our guide on creating a logo online.

4. BloomThat Just Oh-So-Beautiful Credit Card Checkout Design

BloomThat checkout design

This BloomThat check out is all about good eye-pleasing design. And though it is custom-made (and checkout forms are quite challenging to customize!), it is quite user-friendly.

Payment options are neatly placed at the very bottom of the page and do not distract buyers from purchasing process.

The neat summary includes all the necessary information about the product — name, address, delivery time, taxes, total, personal message, and, of course, a picture of flowers 🌷

5. Airbnb Clean and Clear Checkout Design

Airbnb checkout design

Airbnb Plus has one of the best eCommerce web designs I’ve ever seen.

Every step of the checkout process is well thought out, and there’s nothing that can distract travelers from purchase. Cleaning fee, service fee, additional taxes, and the total price — you clearly understand what you are paying for.

Carmine brand color of the call to action button and the review stars naturally complement the simplicity of the checkout pop-up.

eCommerce Cart and Checkout Design Tips

You’re on the fifty-yard line; the quarterback just yelled “HIKE!”. Will your great eCommerce site be able to score the sale? Implement these strategies to ensure your cart and checkout pages are up to the challenge.

  • Confirm every product detail as part of the cart review process.
  • Complete the checkout process without hiding the cart.
  • Help users quickly return to view the product pages for items in their cart.
  • Provide customers the option to checkout or continue shopping.
  • Don’t ask for personal or payment information before asking the customer to confirm the contents of their cart.
  • During checkout, only ask for information that’s vitally necessary to the fulfillment of their order – respecting privacy builds trust.

Scroll back to top

Part V: Beautifully Designed About Us Page Examples

Beautifully Designed About Us Page Design

If you think that your About Us page should not be taken too seriously, you are wrong. A beautifully designed About us page is your chance to make a positive and long-lasting first impression and highlight your strong points.

It’s also a mistake to think that customers stick to your product page only without taking a closer look at the company itself before proceeding to checkout.

The About Us page is as vital as your homepage or checkout page or any other web page of your eCommerce website. (Unless you stick to selling on Amazon — or your brand is already as popular as Amazon.)

So the general idea for a brand is: you should craft a visually attractive e-commerce About Us page with an intuitive UX and a friendly layout.

Below are five eCommerce About Us page design examples that will inspire you and help build trust with your potential buyers.

1. Chillblast Uses Video on ‘About Us’ Page to Be Convincing

Chillblast About Us Page Deisign

Instead of just filling your About Us web page with plain text, jazz it up with some visual content. A short video, for example, with you, the business owner, as the speaker.

It works perfectly for those customers who are too busy to read but ready to spend a couple of minutes to listen to your story.

A video is a great way to feature customer testimonials and the products you sell and show that there’s a real person behind this eCommerce business.

And it is one of the best web UX hacks as it looks great on your web page and immediately attracts your users’ attention.

Ben Miles, managing director at Chillblast, designed a quick video about his business and wisely placed it on his About Us page.

2. ZipHearing — Introduces TheTeam

ZipHearing AboutUs page

There’s no need to hire a web designer to make your About Us page more personal. Get your buyer acquainted with your team, just like ZipHearing does.

Disclosing your (smiling!) face and the faces of your colleagues will make your customer feel at ease.

Don’t be too shy to include some offbeat details about your team. This information will catch your customer’s eye and stick in their memory.

For example, your customer support rep loves doughnuts more than anything else. Or your head of sales jumps on the table every time he or she makes a big sale. Write about that.

These small details will also make your customer journey a bit smoother.

3. WeBuyBlack — Appeals to Social Values

WeBuyBlack AboutUs page design

Sometimes a single sentence along with a story-telling picture can describe your eCommerce business better than an extensive article.

Think clearly how you can communicate your vision to your target audience with the help of UX and intuitive layout. Let your website design reveal your social and economical values.

WeBuyBlack, eCommerce marketplace for black-owned businesses, as they call themselves, did it the right way. They designed a picture that reflects the nature of products sold on their marketplace, placed it on the eye-catching juicy background, and wrote good copy — brief but hard-hitting.

4. Flowers Online 24 — Flags Their Physical Location

FlowersOnline About Us page design

Having an online business does not mean your products cannot be discovered offline.

If you have a brick and mortar store, design your eCommerce About Us web page with offline shoppers in mind. It would be wise to let your customers locate your retail store easily.

Find a cozy place for a map and write your store’s address and hours of operation beneath it, just like FlowersOnline24 did. This will make it easier for your customers to navigate straight to your store after making an online purchase.

5. OakHall Shares the Store’s TimeLine

OakHall About Us page design

Lucky you are if your brand has a time-honored history — you’ve got a chance to make your About Us page design as creative as possible.

Take a look at OakHall’s timeline. Isn’t it great? The whole story of the company starts back in 1859. I couldn’t even make a screenshot of the full page as it would have made this article endless.

All the information is presented in a compelling yet honest way. The events are arranged vertically and the most important ones are illustrated with pictures. To make the experience more immersive, the brand-specific events are accompanied by the most significant moments in history, like Atlantis’s final landing at Kennedy Space Center.

While sharing your story, remember to inform your customers where you were at the very beginning, how you’ve managed to overcome the hurdles on your way, and how your company can solve their problems. If you make them laugh… or cry — you’ve reached your goal.

Great Design Tips for an eCommerce About Us Page

Crossing a busy road is not scary if look right and left before doing that. Same goes for your website. Building a memorable About Us web page design is a piece of cake if you follow the rules.

Implement the following tips and strategies to show the awesomeness of your eCommerce business to the world around you.

  • Add a brief 1-3 minute video telling a story of your brand;
  • Personalize your shopper’s experience by adding photos of your team;
  • Share the human side of your business with the help of stories;
  • Let design translate your company’s values through colors and copy;
  • Add a map to make it easy for customers to locate your physical store;
  • A beautifully designed timeline can show the history behind the company;
  • Appeal to emotions — make people laugh… or cry.

Scroll back to top

Search Results Page eCommerce Web Designs

Search results page design can either make or break your eCommerce website.

If your search bar delivers the results in a straightforward way, allows for flawless filtering and easy sharing, then just skip this chapter, you know it all.

If your site search user experience is not up to the mark and your customers are still struggling, it’s time to get down to business and improve it the right away.

Just imagine, according to Forrester research, 43% of your site visitors got immediately to the search box. Moreso, those who use search are 2-3x more likely to convert compared to those who do not.

Do not let users miss your products because of the unscannable search results page design. Below are a few examples of best search results page designs that convert occasional visitors into standing customers.

1. Dynamic Office Solutions — Detailed Search Results Pop Up

DynamicOfficeSolutions Search Results Design

There may be thousands of products in your eCommerce site, but your customer may never stumble upon them if your website search design is lame. The impact of a bad search results page is quite predictable — lost sales, outrageously high cart abandonment rates, and… one unhappy store owner.

Dynamic Office Solutions managed to bridge the gap between the user and the extensive content they are offering in their online store.

With the help of CloudSearch eCommerce search engine, they masterfully narrow the results to the specific products a user is looking for. To make sure the search results are correct, they also perform the search within categories and pages.

Pictures, product details, and prices make it easier for customers to make a balanced purchase decision.

2. PearlsOnly — Uses Pearl Wizard To Make Shopping More Personalized

PearlsOnly search design

PearlsOnly Wizard

The more you know about your target audience, the more customer-oriented your business can be.

Pearls Only gathers information about their user preferences in a game-like manner, offering to fill in a quick form. Based on the answers they get, they offer a personalized product, that, as they think, would fit perfectly.

The best thing about this search wizard design is that users can see the progress bar (i.e. estimate how long it will take), send their results to their mailbox, edit answers, and even get free expert advice.

3. Giftmandu Helps Filter Results Wisely

GiftMandu Search Design

Advanced filtering gives the opportunity for the shoppers to conduct their own mini-research and sort the products the way they feel like, not you. Design your search results page with various filtering needs in mind.

Giftmandu lets their customers filter the search results according to their preferences, including category, brand, tags, you name it. Filtered search results can further be sorted by rates, sales, price, recommendations, and so on.

4. STANDOUT — Creates Awesome Mobile Search UX

Standout search results design

According to Statista, 63,4% of all web page views are made through mobile phones. It’s no longer a secret that your eCommerce website design should reflect all the modern tendencies and be mobile-ready.

Standout men’s designer fashion store, running on the X-Cart eCommerce platform, does not use the native CloudSearch app, but also allows for smart search results filtering. What is more, the responsive layered navigation works perfectly both on mobile and laptops.

Every pixel is designed to create a pleasurable user experience. The filtering is fast and intuitive. And if anything goes wrong, there’s always a helpdesk phone number you can dial to get immediate support.

Web Design Tips For eCommerce Search Results Page

Modern customers are looking for immediate search results. They are not inclined to wait for more than three seconds. Follow these simple tips to make your website search UX speedy and convenient:

  • Offer advanced search options to get your products found no matter what your customer is looking for;
  • Ginger up your eCommerce search design with product pictures;
  • Offer immediate support if ‘no products are found’;
  • Learn as much info about your shoppers as possible to make the search results highly relevant;
  • Use the advanced tools that filter search results like a pro;
  • People use their smartphones more often today, so take time to make your search design responsive.

Scroll back to top

Part VII: Examples of Log in Form Designs For Your Inspiration

Log in Form Design Examples

The sign-in form design is one of the most essential elements of your e-commerce website, your company’s image. You have to think it through very carefully before even launching your online store.

A cluttered login form with badly-designed UI is likely to turn your prospects away from a purchase. A beautifully designed sign up form will encourage them to become a member of your community, a customer or a subscriber.

Below are a couple of highly-effective and attractive login form design examples that should inspire you and help you build your email list.

1. PearlsOnly — Quiz on Sign Up to Build Email List & Boost Loyalty

PearlsOnly Quiz On Sign Up

Let me start this chapter with an unusual example — sign-in form designed by PearsOnly in the interactive quiz format.

This welcoming and attractive login form makes it impossible to go by. A purple roulette promises you to win a full price discount if you register for their e-commerce site. A speck of humor for those who ‘hate fun & games’. And a robust call to action button answering the question ‘I want to…’ from the user’s perspective.

Would you spin the wheel if you had a chance to save big?

2. GitiOnline — Offering Additional Discounts For Mobile Sign Ups

GitiOnline signup form design

GitiOnline is another beautifully designed shop built with X-Cart. What differs them from the crowd is that they sign their customers up using mobile phones. This way, in addition to email newsletters, they will send SMS notifications, thus keeping their customers up to date with company news.

The sign-up form design is quite simple — a charming lady on the left, and a couple of fields to fill in on the right. And, of course, they didn’t forget about the GDPR law and ask every subscriber if they agree to receive transactional and promo emails.

3. TOMS — Offers Several Options to Choose From

TOMS signup from design

TOMS, the world-known shoe retailer, makes the login process comfy for both types of shoppers — returning and the new ones. If a visitor has been there before, he or she are able to quickly login for faster checkout and order tracking. If it is a new subscriber — then they are free to choose one of the most convenient options for registration.

I just wonder why I can log in using Facebook, Google+, and TWITTER, but registration is possible only with the first two social media networks. Taking into account that G+ is more dead than alive, only one means of registration is left.

4. BirchBox — Seduces Potential Visitors With Quality Pics on Sign UP

BirchbBox signup form design

Every designer knows that the impact of images in interface design is colossal. Visually attractive pics push customers to checkout, while poorly-created ones leave a sour taste in the mouth.

BirchBox knows their target audience perfectly — they are visuals getting pleasure out of watching (not reading or listening or anything else).

An attractive yellow and orange box along with the cosmetic products catch users attention. A short copy explains the value they bring to the user, which is also important.

5. Glass Packaging Solutions Offers Quick Sign Up Through Social Media

GlassPackaging Solutions signup design

Social login is proved to improve conversions across the web and mobile platforms. It gives shoppers an easy way to sign up for a service without filling email & password fields, confirming your registration, and then entering your email & password again to log in.

Glass Packaging Solutions designed their login/signup form in a way that is convenient for both — those who prefer to sign in the classic way and those who want to quickly log in via existing Facebook, G+ or PayPal accounts.

UX Tips For eCommerce Sign-in Form Design

Sign-in form design matters much for eCommerce, especially for small businesses.

According to CXL study, store owners observe a 68% increase in user engagement after implementing social login. This small but useful option also reduces the number of failed login attempts and password reset requests.

There are lots of other design hacks that you can use to make your eCommerce login form more attractive to your potential buyers.

  • Surprize your website visitors with a funny game on sign-in. The first impression is the one that lasts forever.
  • Tempt new users to share more info about them offering discounts;
  • Stimulate sign-ups with incentives available after registration only;
  • Offer different sign-in options both for registered customers and newcomers;
  • Seduce your website visitors with juicy website design on sign-in;
  • Let people quickly sign up using social login.

Scroll back to top

Part VIII: Email Newsletter Form Designs That Convert

Email Newsletter Form Designs

What is a cleverly designed newsletter form? It is the one with a clear concept, thoughtful approach, and persuasive copy.

Spend more than a few minutes to plan the newsletter form layout. Think up an effective call to action. And ask your team what they think about the copy.

Take a look at the following six email newsletter sign up design examples that should give you an idea of a better way to convert visitors into standing customers or subscribers.

1. Barnyarns Value-Focused Newsletter Subscription Form

Barnyarns Newsletter Subscription design

A newsletter subscription form is another way to collect emails of the people potentially interested in your products or services. And, quite clearly, it should explain the reason why your would-be customers should lift a finger and disclose their emails.

Above is an example from Barnyarns unleashing the value behind their educational newsletter subscription. They claim to send tips, how-tos, exclusive offers and some valuable info about new products.

MSIA’s Newsletter Subscription Form Clearly Explains Value

MSIA’s Newsletter Subscription design

Here’s another newsletter form design focused on value and user preferences by Movement of Spiritual Inner Awareness.

Their motto is quite straightforward — they promise to send inspirational quotes once a day. Plus, there is a simple CTA button, purple as their logo and the brand style in general.

LEGO’s Newsletter Form Answers Your Question ‘Why’

LEGO signup form design

There is much to admire about the way LEGO uses digital marketing, with lots of shareable content, engaging social media posts, and dozens of mobile apps.

LEGO site design is also up to the level. An eye-catching yellow banner prompts to subscribe to Lego shop promos to be the first to hear about brand new sets, exclusive products, promos and events.

Quite a good reason why you should be included in the list of subscribers, isn’t it?

2. Ecwid is upfront about the email frequency

Ecwid newsletter form design

As we can see, Ecwid eCommerce website builder brings attention to the frequency of emails. They promise not to bother their subscribers with long-winded memoirs — just a single teensy email per week.

What is more, the pop-up image immediately introduces the topic of the newsletter in a direct way.

This newsletter form design may seem to be rather primitive. However, it adequately serves its primary purpose — collecting emails in a friendly, non-intrusive way.

3. WrestlingShop Appeals to Emotions

WrestlingShop signup form design

Emotions play a vital role in decision making. If you manage to establish an emotional connection with the user, through eCommerce website design, or copy, or whatever, you are likely to have more returning customers in the future.

Done well, emotional design increases engagement and creates an enduring and delightful feeling about the products you sell.

Richard Coogan, the founder of Wrestling Shop, knows that and uses it in every step of the marketing funnel. And what I love most of all is the call to action (CTA) button telling users how awesome they will be if they subscribe to the newsletter.

4. NeilPatel Quiz-Like Newsletter Form Design

NeilPatel newsletter form design

Adding quizzes inside your newsletter subscription forms is proved to be one of the most effective methods of lead generation.

That’s what Neil Patel does to grow the email list on his personal website. And who knows how to create eye-catching newsletter form designs better than the guru of marketing?

His subscribers can win an SEO cheat sheet, million visitors a month, or even a call with his team. Though some of the options seem quite ultimately unrealistic, I cannot deny the fact that this spicy orange wheel of fortune does attract attention.

Email Newsletter Form Design Tips For eCommerce Businesses

No doubts about it, there are a lot more trends in newsletter signup form designs. Your choice should be based on your preferences. Some online store owners people prefer to go for the minimalist style — with a few lines of text and a clear call to action. Others think outside the box and create an unusual subscription box to attract the newcomers.

  • Here are some of the most critical aspects you should keep in mind:
  • Explain the value of your newsletter to your subscribers to be;
  • Inform about the email frequency — people hate getting emails too often;
  • Trigger emotions. This way, your brand will just stick in people’s minds.
  • Go creative.

Is Your eCommerce Site Up to the Challenge?

It’s my hope that you’ve learned a great deal about eCommerce website design, and the factors that influence customer trust online. Tweaking and optimizing an eCommerce site is a constant process. And you should be searching for inspiration anywhere you go – online or offline. 

With powerful open source eCommerce tools, like X-Cart, the possibilities for your eCommerce site are endless – even if you aren’t a web designer with decades of experience. Your shopping cart software matters. Find out why we are the best eCommerce platform for developers.

So what are you waiting for? Create an online store today or check out our e-commerce web design services.

Get the Best Expert-Backed Tips on Selling Online Straight into Your Inbox

Only one email a week, we promise

Awesome! You won’t be disappointed 😉
Darren DeMatas
Darren DeMatas
Founder @ Ecommerce CEO

Darren has an MBA in Internet Marketing and 10+ years of experience marketing retail, manufacturing, and Internet marketing corporations, 7-figure brands and startups online.

Create Online Store!

eCommerce website hosted with us. 30 days for FREE.

No risk, no credit cards required.
Set up your personal store now.

Read also

Push notification

Let's Get Closer to Each Other

Get notified every time our eCommerce experts have got something fresh for you — tips, deals, and so on.

Yup, I'm in No, thnx
1K Shares
Share1K
Tweet46
Email