A well designed and user-friendly website can make the difference between a new customer making a purchase and a prospect who immediately bounces. In eCommerce, web design encompasses more than color schemes and cool effects. Successful web design includes a smooth navigation, high image quality, mobile compatibility, and many other factors that contribute to a positive user experience.
Unfortunately, it is easy to overlook important elements or make mistakes in the area of design due to prioritizing how something looks over how it functions.
Below are six of the most common eCommerce design improvements we implement to help increase user engagement and conversion rates.
1. Plan Out Category Navigation and Stick With It
The menu is crucial: it is the first thing visitors see and it ultimately tells them where to go. New visitors spend about ¼ of their attention on the main navigation of a website, so the menu is most often the first impression visitors have of the site. Common design mistakes in the navigation include having too many options, vague category titles, and overall disorganization. When customers aren’t sure where they need to go, they are likely to simply leave the site to search out other options.
The key to a successful navigation is thinking about how the customers shop and planning the catalog structure accordingly. When designing a site catalog, think like a customer and personalize the menu to best answer questions they’re searching for – this means getting them to where they need to be in the least amount of thought and clicks as possible. Avoid overwhelming visitors with choices right off the bat, and limit the primary navigation to as few options as possible. Then utilize attributes and faceted navigation within larger categories to help with filtering.
It’s important to stick with it – adding new product lines or brands can cause a review of the navigation already on the site, and bloat originally simple category structure. Select high-level categories named what customers call your products, to aid in on-site browsing as well as search engine optimization. Always think about what problems the customer is trying to solve, and cater to providing the answer as quickly as possible.
2. Simplify the Checkout Process
As of 2018, an average of 75% of all shopping carts are abandoned. Users abandon their cart for a variety of reasons, sometimes just to see if they’ll receive a coupon code, but most of the time it’s due to user interface mistakes, such as the addition of unnecessary required fields, uncommon fields in the checkout, or unhelpful error messages. A 2012 study conducted by Baymard Institute found that users reported 61 of the top 100 eCommerce sites were asking for “seemingly unnecessary” information. Consider providing shortcuts like autofill options for addresses or allowing customers to check out as a guest.
Because checkout process issues can vary so widely, there is no easy fix. Instead, the first step is to think like a customer (see how that keeps coming up?) and see if there is any unnecessary clutter in the checkout process. Once common sense is checked off, see exactly where potential customers get stuck. Setup the checkout funnel in Google Analytics and pay attention to the Abandoned Carts report in Magento.
Something to keep in mind: the longer the check-out process is, the lower the conversions will be. Keep it short and sweet in order to boost conversions and keep visitors coming back. Magento 1’s native checkout left a lot to be desired, but Magento 2 has a nice checkout process built in.
Finally, if you’re not running a shopping cart abandonment program, do it! https://carts.guru/en/ has become one of our favorite tools, but there are several tools out there specializing in shopping cart abandonment.
3. Use Great Images
Image quality is both technical and qualitative. Low-resolution pics will simply look bad and decrease the credibility of the site. Meanwhile, stock photography that is irrelevant to the brand or products will do little to convince online shoppers to buy from the website.
Go beyond the basics and invest in high-quality images that effectively highlight and differentiate the product and the brand. Customers expect images to add context and meaning. Whenever possible, use real people in photos, display product details in images, and give visitors large, hi-quality photos.
Studies confirm that larger images are more effective than smaller ones in boosting conversions. Though product information may have been pushed below the fold, customers were more concerned with seeing the product clearly when deciding whether to buy. Find that balance between compressing larger images vs sizing down images for the sake of performance. It’s 2018, get a CDN if necessary, but don’t skimp on images.
4. Write Valuable Product Descriptions
Many eCommerce product pages fall victim to the same types of mistakes:
Product descriptions that don’t convey the basics
Unclear information about the product’s benefits for the buyer
No visuals to clearly explain how to use a product
Product descriptions should be clear, concise and credible… sometimes entertaining helps too. They need to be carefully crafted to be descriptive and add value without wasting time. Tips like highlighting the benefits of the product for the customer (as opposed to a focus on features only), adding in sensory adjectives to allow the reader to experience the copy, and making the description scannable by utilizing bullet points or fun icons can pay dividends.
Another reason for creating great product pages is to establish trust. Including customer testimonials or social proof like tweets or Instagram photos that feature the product is a great way to assure customers that it’s as great as the description says.
Target does a great job of this. The screenshot below displays the company using their hashtag #targetstyle to advertise a bathing suit that women have taken photos wearing.
Not only does this add credibility to the product, but it sparks growth in social media presence as well as building your brand and customer loyalty.
5. Fully Embrace Responsive Design
Mobile traffic accounts for 30% – 40% of the average eCommerce site, and spikes greatly during the holiday shopping season. Responsive templates are pretty much a standard practice these days, and Magento includes a great best practice responsive theme, but just having a responsive site isn’t enough.
The most overlooked aspect of responsive sites is having site content not load well on mobile. Build the catalog and product content so it displays perfectly on phones, tablets, and desktop. Also, prioritize how site elements load on mobile. Desktop-centric features such as rotating banners, interactive social share buttons, and other features shouldn’t always display on mobile at all, or perhaps just not in the same order. For example, display a static banner on mobile instead of a rotating banner to help with performance and accommodate the shorter attention span mobile users often have.
6. Optimize Site Search
Site search can be a catch 22 – sometimes merchants are sold a bill of goods for a 3rd party site search provider and find out later their customers never even use the site search feature. Other times it’s a neglected piece of the site experience that desperately needs some attention. Setup Site Search Tracking in Google Analytics to see how often people are currently utilizing site search, and optimize based on customer demographics. Some sites have a search box just because it’s included in the theme, but it never gets used. In that case, it is best just to ditch it.
Tracking site search will provide insight into how visitors are engaging with your site and allow you to make better-informed decisions on any third party tools that may be needed. If your customers will benefit from an optimized search function, put the effort into building it out as a useful tool – it will be a great resource of data as well. Use a site search utility that provides values to customers through useful faceted navigation, suggested terms and merchandising capabilities.
Building a Better eCommerce Website
All of these steps help build trust with customers, and they need to be implemented in tandem. Conversion rate optimization is just as much about removing reasons that make people not buy as it is giving them a reason to buy. Mistakes in eCommerce web design don’t just decrease credibility—they decrease revenue.
Contact us to learn more about successful user interface design or for help optimizing your eCommerce site.
InteractOne Launches New Magento Site for Watson’s
Cincinnati, OH – InteractOne, Magento Solutions Partner, recently redesigned and launched www.watsons.com, a responsive-designed Magento website devoted to indoor & outdoor entertainment products for the home on February 16, 2016.
Watsons.com features all the products customers enjoy in the popular brick and mortar locations including pools, spas, furniture, fireplaces, pool tables and more. Now customers can research products with detailed descriptions and updated images before shopping in store.
The new site is built with a responsive Magento design, allowing full access from any device. The new site was created with a special focus on easy navigation. Specifically, a left column with attributes was added to make filtering easier. It was important to Watson’s to show customers they offer more than their well-known selection of pools and spas.
In addition, Watson’s needed a dependable and flexible content management system that was easier to manage in house. With quick product turnover and ever-changing seasonal promotions, it was critical that their in-house staff could make quick and easy updates to the website.
“Our experience with the team at InteractOne has been superior. They are extremely responsive to our needs and questions and expertly deploy solutions while relaying the information back to us in layman’s terms.” says Tracy Kuethe, Marketing Manager at Watson’s.
InteractOne has provided web development and Internet marketing services since 1998, becoming a Magento partner in 2009. We have helped many companies develop and establish very successful eCommerce sites and internet marketing strategies.
By Tom Deutsch, VP Creative Services at InteractOne
The practice of User Interface (UI) design can sometimes feel like a leap of faith. While we are “supposed” to test everything, most of us don’t. Most merchants (including many you’ve heard of!) just don’t have the staff, the infrastructure or … the patience … to turn every design decision or UI choice into an A/B test. Particularly in the planning, mock-up and pre-launch stages of design, merchants are making many gut-level choices about the UI vocabulary they will use.
This is not a bad situation; just make sure your gut is well equipped to make the call. Here are a few “some-assembly-required” approaches for building an effective eCommerce UI. Think of these as jumping-off points for testing, and you may find yourself ahead of the curve.
1. Benchmark: Use Success as a Model
This seems obvious enough. Look at the competitors you envy or the market leaders in your category. See what UI tricks and techniques they employ. The warning that comes with this approach is to know what’s really working on your competitor’s site. It would be a mistake to make an assumption based on some design feature they have that you don’t. Also, be aware that the truly huge eCommerce businesses (eg Amazon) are constantly testing; in other words, a cart arrangement you screen-shotted this morning might be gone by this afternoon (especially if it didn’t work!)
Simply wireframing somebody’s excellent site also doesn’t guarantee your customers will convert at a higher rate. You have to look at a bunch of successful competitors – and you have to have done it recently – if you want the benchmarking approach to be remotely effective. Take the common elements you find (nicely responsive on all platforms, minimal gigantic banners, text renders large enough to easily read, cannot miss the “add to cart” button …) and then look for the design principles that were used to make those effective elements consistent across the site. Truly, for most mid-market merchants, benchmarking is the foundation for all other approaches and should be done early in the planning process, before design mockups.
2. Set guidelines when re-theming
Most ineffective shopping experiences aren’t a result of “bad” design. That would be too simple to fix! Especially among Magento merchants, most conversion killers stem from a lack of consistency within the site, or from a mess of priorities for the shopper to sort through.
Among newer, responsive redesigns, a lack of discipline in setting up style sheets and PHP classes can have numerous ill effects – from strangely overlapped elements to …s…l…o…w… page-load speeds. Both of these are off-putting to your customers, to say the least. Talk to your developer about their approach to front-end coding and do some research to verify that they know what they are talking about. A beautiful wireframe or mockup doesn’t mean shoppers will be able to use the page once it is coded!
The second aspect where a disciplined approach is called for is in carrying over legacy structures. The old site may have “worked,” but the old site may have been a different platform or highly customized. Look carefully at shifting internal processes to conform to the best practices coded into the default software before you decide you must carry over a legacy feature.
3. Stick to the Theme
Basing your business on a template or theme might feel like a design cop-out. But simply put, the best theme developers will benchmark success before they build their theme.
Especially if you have few resources, adherence to the theme means fewer customizations and less expense in getting everything to work.
The trick here is to pick a well-built theme. Half of design is research and much is warranted when shopping for a theme. Often, the most popular themes are also the most well-built themes, but not always. Have a reputable Magento expert you trust check it out before you decide or purchase.
Once the theme is selected, decide to use the basic structure – leave it intact – and apply your brand priorities within these boundaries. With this approach, you will gain better control over the variables you have introduced with your new design, limited code modifications that can slow the site, and preserved your flexibility for future changes as needed.
4. Use Standard Navigation design Language
The advent and growth of mobile browsing accelerated the invention of navigation and action symbols. But it’s a free world, out there and there is no definite standardization. Users are the enforcers, in that they will decide (and let you know … if you’re paying attention) whether or not they understand your design and symbol vocabulary. Pay attention to them!
That said – choosing UI and navigation images, icons and colors effectively is far from trial and error. Demographics are key. Users of different ages, genders or other socioeconomic strata may be more or less accustomed to some of the iconography and shorthand that mobile users are encountering. Depending on your audience, it may be a mistake to apply the “hamburger” mobile menu indicator to the desktop site, or it may be a wise branding decision. For others, some symbols that you, individually, understand might simply bewilder a large sector of your shoppers.
More than anywhere else – symbol and navigation aid design are evolving. Make sure your research and ongoing traffic analysis includes these variables.
5. Know Your Platform
We’ve all heard the old truism: form follows function. Applying the principle to eCommerce, design (form) should highlight and follow the functionality built into your platform. If Magento is your platform, you have to ask yourself if your design is maximizing Magento’s best functional elements. Flexible and easily assignable categories and attributes are the most visible advantage that Magento offers; does your design detract or add to your shoppers’ ability to use them?
Mobile shopping is especially aided by a well-thought-out system of categories and sortable attributes. Does your design place these tools front and center? Are you being judicious in your use of promotional banners and blocks and on which devices they will display, or do they obscure navigational and product sorting tools?
Of course, this is where design intersects with operations, since your product managers and merchandising team has to make the effort to build employ the powerful settings available for displaying and sorting products and creating custom attributes categories based on shopper desires and habits. Since this can often require a shift in product planning as well as eCommerce administration, it often does not happen – at least to the extent that Magento makes possible. This is a missed opportunity from a UI perspective, since finding products easily and with certainty greases the path to conversion, upsell and cross-sell like no promotion can. (“Sort-by” filters enable the merchant to direct a customer’s search whereas a blank search bar does not!)
Any Magento merchant who dedicates more time and resources toward maximizing the shopper-directed advantages the Magento platform offers, instead of customizing a design arbitrarily, will be rewarded with higher conversion, AOV and a better overall UI.
6. Ask Someone Else!
Short of running a full test on a feature, simply asking an outsider (someone not already familiar with the site) to test your UI idea or assumption can be a quick and effective way to back up your instinct or intuition.
An effective UI is within every merchant’s reach. Making decisions concerning the user interface is not simply a design exercise, nor is it only valid when every step is scientifically tested. The tips outlined above can help you put your “gut” to work as you contemplate any change to the design of your eCommerce site.
By Tom Deutsch, VP Creative Services at InteractOne
Visual Merchandising is not a new term among retailers. Have you seen an episode of PBS’s Mr. Selfridge? Based in the early 1900’s, the show spends a lot of air time showcasing Selfridge’s cutting edge merchandising innovations.
In today’s retail world, visual merchandising still plays a critical role in overall sales. Trained merchandisers (the folks “behind the curtain” strategically placing items and watching how customers shop) have product placement down to a science.
Retail merchandisers focus on store themes, overall coherence, interior design, lighting, store layout, displays, colors, and that’s just the physical part. There are scores of people also trained in the Psychology of retail shopping.
For example, watch this quick video interviewing Ken Nisch, a retail design expert on his store design with North Face.
The take-away here is that there are trained and experienced people designing and strategically planning the beautiful stimulating brick and mortar stores. Why are we not actively applying their methods to our eCommerce stores?
In the eCommerce world, merchandising has largely been ignored.
Lost somewhere between early innovators of the first decade out to reinvent the world of business and the initial reluctance of many old-school retailers to embrace online selling, merchandising fell to the wayside.
For a lot of online retailers the defacto merchandisers are marketers, designers, and product planners. This leads to haphazard product presentation and grouping for the simple elements of a promotion, not to mention an annoying chore arising out of Magento’s “related products” feature.
E-tailers who utilize merchandising professionals benefit from a shift away from the practical and toward the strategic.
With eMerchandising, merchants move beyond standard A/B testing and analytic research to increase conversion rate optimization. Not that there’s anything wrong with A/B testing and analytic research, but most retailers don’t have optimized processes in place, nor do they have the amount of traffic needed to take a purely data-driven approach to product planning and store design.
Site analytics can tell you a tremendous amount, but they can’t make decisions.
The “human” element, as applied by a merchandising professional, does not simply rely on intuition, opinion or habit. Instead of only relying on analytics, merchandisers will consider product mix, customer profiles, competitive pricing and customer behavior- on a strategic level – in making tactical decisions about design and user interface (UI). Those merchandising decisions can then be tested and optimized for a much higher conversion rate.
The Customer Connection
In the gradual process of business maturation and rediscovering merchandising, eCommerce has brought the practice closer to the customer. Forward thinking eCommerce merchandising includes creative, in-depth content, easy to navigate pages and inventive interactive customer interaction through videos and state of the art photography.
Consider the example below from hubba. Their graphic doesn’t just feature video and good images as examples but also shows what social, interactive color swatches and sizing can do for products.
Magento merchants especially have a strong merchandising advantage built in the platform’s uber-flexible product categories, attributes and configurable products. Time to put them to use!
By Tom Deutsch, VP Creative Services at InteractOne
As if being in the relatively brand-new field of eCommerce weren’t enough of a “brave new world” for retail businesses, the rise of mobile has left us all scrambling to keep up and stay relevant.
Responsive eCommerce has charged to the forefront in the last couple years as the dominant approach to present full content and capability to customers anytime, anywhere. The reality of having one site and one database to administer, plus the powerful stamp of approval Google has given to the technology, has launched a thousand well-intentioned responsive theme installations. Unfortunately, these rapid adoptions of responsive means a lot of merchants are walking barefoot along the cutting edge.
The problem is, responsive has forced a change in the way we build websites, but not yet in how we conceive, design or manage them.
Sure, there are opinions and assertions about mobile-first design, which is a start, but the business case for re-tooling design and development of responsive eCommerce has been largely ignored. We all need to be talking and thinking about design in a different way. We need to stop planning our eCommerce sites the way we plan our living rooms: “this matches that” and “such and such looks nice over here.”
Modular design begins to approach a solution. The problem is that every element in modular design is nothing but a smaller page. And do we really want our sites looking like a bunch of multi-colored post-it notes or a stack of pancakes? Too often, using the “modular” approach has resulted in mediocrity – at least from a design and UX perspective.
Where do we go from here?
We’re all obviously managing to order socks and sunglasses, auto parts and movies from our desktops, tablets, phones and phablets. But there is no debating that “we all” (meaning everyone from the merchant to the designer to the platform and theme developers) still have a lot to learn about how to conceive, design, build and serve responsive (or adaptive) eCommerce sites.
Expectations have to be adjusted – not only with the fudging that goes on between mockups and code, but also regarding the flexibility of displayed elements. Changes that would have been relatively simple on a non-responsive site, like moving a button “just a bit to the right or left” of another element, will provoke a symphony of sighs, hems and haws from a front-end responsive programmer. It seems so simple, but when you look at how responsive code treats design elements – percentages and grids vs pixel measurements – the dilemma clears up.
Planning is Paramount
So how do you plan a responsive site … um … responsibly? The days of showing a developer a couple of flat-file designs or your “brand assets guide” are gone. Building a responsive Magento site, for instance, requires earlier and much more extensive wire-framing and collaboration among the business requirement folks, the design team and especially the front- and back-end developers. Clean code is more important than ever and yet hacking – as a shortcut – is more tempting than ever.
Neglect the planning and end up with a slow, expensive website you can’t update.
Designers need to understand how their specifications will translate into code, and the peculiarities of the platform or theme they are using. They can’t do that in a vacuum and it won’t happen during one or two meetings. Responsive first, yes. Second, move quickly to mapping out the UX and the likely pathways to that ideal experience, making sure your design has a natural place for each of these steps, on every device. Third: the details are more important than ever – consistency in font choice and use, isolation areas and insets are some of the most neglected and most important responsive design guidelines you have.
Responsive and adaptive design, as we know it today, is still in relative infancy. The platforms and themes will improve. The designers will innovate. The developers will streamline. The enormous cross-browser issues will come to a head and resolve somehow. We’ve definitely not arrived at responsive Nirvana yet, and getting there should be a blast.
Building an eCommerce website in Magento can seem simple. The basic software and an array of attractive templates are available for free. What could go wrong? In addition, there are no shortage of freelance designers that assume that because they can create a custom design and piece together code that they can put together a savvy Magento presence. A developer who has devised a quick-fix to a small problem to the site, may unknowingly cause other problems that can cause the whole site to cascade into disarray.
Why those Unfinished and Abandoned Magento Site Designs happen
Magento is a powerful, but very complex software tool, development and integration cannot be left to chance. A number of Magento users came to interactOne because the site they had started to build hasn’t been finished or simply doesn’t work- for any number of reasons. As a long-time Magento Certified Partner, InteractOne has the experience and technical know-how to diagnose and repair problems with your unfinished and abandoned Magento site design, navigation, database, code, search engine visibility, or third-party extensions. We have worked with all types of Magento code manipulations and have been able to successfully complete projects that were left in varying states of disrepair.
Does this sound familiar?
“We paid a developer thousands of dollars to develop our eCommerce site. Months later, it’s not completed and we can no longer reach them.”
“Our Magento site is complete, but no one on our staff knows how to manage the site.”
“The site build-out has been completed, but we have no idea how to migrate our data from the old site to the new one.”
“Our Magento site design will not work and many components are missing.”
Other situations that may be a cause for your site to sit idle is that a one-time employee who was your eCommerce site leader is no longer with your organization. Transition of any type can be stressful for any organization, furthering the issue is the fact that your internet sales are contingent upon a smooth transition forward. InteractOne can partner with your team to conduct in-depth training for your new and existing team members to ensure that your organization continues to receive the full benefit of your Magento eCommerce site. Training can take place in person, online/webinar or correspondence.
Let interactOne’s Experience get Your Site Back on Track
Regardless of what caused your Magento eCommerce site to go idle, InteractOne’s experienced team of developers can come alongside your company and get you back on track! Let’s get your unfinished and abandoned Magento site design back on track!