How do you truly know who and what your brand is without a brand guideline? A brand guideline explains the importance of your brand, who you are and the design and copy elements – and importantly – the standards of your brand. You will want to have a physical guide on-hand so your and existing and future employees can keep your brand consistent and cohesive. Surprisingly, many companies of all sizes do not have a brand guideline to reference. How are your employees supposed to know who your company is all about if they don’t know for themselves? In this article, we’ll break down the must-haves for any brand guide and how to establish them.
Where do you start a brand guide? The best way to start your guide is with your brand’s story. While crafting your company’s story, you should concentrate on answering the following questions:
How did you start?
Why did you start?
What was the progression of the business?
Explaining the story behind your webstore will help give your company, future employees and customers a taste of who you are and why you are here. Your brand’s story needs to be informative but also in your company’s voice. This section is the first step in showing off your business’ personality.
Nutraceutical has a thorough yet simple way of explaining their brand’s story:
Your brand values are where you explain what your company stands for and why you do what you do. This section is a great place to make a list of what you and your brand value. Making a list will help you and your employees visually see what needs to get done and how those activities align with your values. While figuring out your brand’s values, many companies choose a specific social cause to support. A social cause can coincide with your brand story and mission statement. In today’s marketing climate, many social issues that companies follow are sustainability, inclusivity, freedom and safety. Surveys show that 76% of respondents would or have purchased from a company that supports organizations or causes they approve. While 67% of respondents have stopped or will not shop from companies that do not have aligned views on social issues. Therefore, while setting up your brand’s values, try to stay as clear as possible and implement it in the right way like on your about us page or a social media bio or about us section.
Every brand needs a mission statement. A mission statement explains what the business or organization is, why it exists and the reason for its being. Keep your mission statement between one to four sentences long. You want to keep it simple yet concise. It helps your company refocus attention on accomplishing future goals, let’s customers know the company’s purpose and serves as a guide for decision making.Your mission statement may also go on your about us page on your website with your values and brand story, so customers can understand who and what you are a little more.
Schuler Shoes effectively expresses its values and mission statement on one page:
Audience and Competitors
While creating your guide, you will want to describe your target audience. Explain your targeted customers’ location, age, gender, interests and other relevant information. The more information you have about your audience, the easier it will be for you and your team to connect with them, either in-person or via marketing campaigns. Also, include a list of your top competitors and why they are your competition. Identifying your competitors will help you and your employees see what the other brands are doing throughout the year and how to have the same or better standards and marketing efforts.
The design of your brand is important when implementing any marketing strategy. This is where your customers visually understand who you are. You will want to explain all your design elements within your brand guideline document, so your brand looks cohesive on every marketing strategy that you implement. Essentially, your brand guidelines will have a style guideline within it. A style guide is a set of standards that defines your company’s branding. Design elements to include in your style guidelines are the font, font size, typography, brand colors, image/video sizes, layouts, logos and any other information about designing. It is best to include examples of incorrect and correct uses of the design. Make sure every graphic designer and copywriter has a copy on-hand of your style guide because it will be vital to their success and the success of your advertising efforts.
Tone of Voice
Just like with your visual design elements, your tone of voice or copy standards must be clearly defined. Defining your tone will have an impact on all the written copy you use in everything you implement for your business like your website, social media, text messages, advertisements, customer service, emails and any other marketing effort. You will want to explain the type of voice your company portrays based on your target audience. Explain if your customers are more conservative, youthful, energetic, open-minded, etc. It is also good to include examples of instead of this, we say this and past work. You can also put copy information under your style guidelines.
These are the basic tips to get your brand guidelines started. You can add more information like your brand identity, questions and answers and any other relevant information. Also, remember to update the guide every time you change or add anything to your brand and style guide. Creating an effective brand guide requires a team of experienced marketing and design professionals. Our team at Interactone has many years of experience creating compelling branding design material for high profile clients. For more information and help with your brand guidelines or any other marketing efforts, contact us today.
Get in Touch
Connect with one of our experts today to discuss your eCommerce needs!
Your fashion eCommerce website’s homepage is your digital storefront. And just like your physical storefront, it needs to be welcoming, well designed and easy on the eyes.
A recent study byShopify found that over half of buyers have shifted more of their spending online during the pandemic, and 40% said an easy-to-navigate website made their shopping experience a positive one.
With so many choices out there, it’s crucial to make sure your web store provides apositive user experience. This involves multiple elements, but rethinking your web design is key. On average, visitors willspend 10-20 seconds on your homepage before they bounce. So you need to make a strong first impression, fast.
Here’s how to optimize your homepage and get your visitors to convert to customers.
Use a strong header image
Your homepage should display your unique value proposition, or what gives people a reason to choose you over your competitors. This could be your sustainability efforts, your distinctive designs. Anything that sets your brand apart.
Using a strong header image that clearly communicates your brand’s unique style straight away is not only immediately enticing to your visitors, but also reduces the number of choices they have to make. Give them one compelling thing to click on and you take away the paradox of choice, making their shopping experience much more enjoyable.
Everlane is one such example of a brand that features one strong image “above the fold,” or in the upper half of the page. Their homepage presents their latest campaign in a way that feels evergreen and fully representative of their brand, regardless of how new or old the product is. The photos are friendly and inviting, drawing the visitor in.
Have a clear visual hierarchy
Keep the design of your homepage simple, and have a logical navigational structure. Make it easy for your visitors by prioritizing important products and putting key information front and center.
Fawne Shoppe has a straightforward visual hierarchy on their homepage, starting with their most recent drop and descending through the collections. The call to actions (“shop now,” “have a look,” “shop our edit”) are consistent, but not repetitive. A banner menu at the top enables visitors to immediately see and navigate their most popular shopping categories, such as “new,” “designers,” and “baby” and “kids” clothes.
Make it engaging
Fashion retailer Madewell was found bySEM Rush to be one of the most engaging US fashion eCommerce websites, with a low bounce rate of 22%, and it’s easy to see why. A recent visit to theirhomepage presented their latest collection with fresh, welcoming photos and a hard-to-resist offer of the “ideal fall wardrobe, narrowed down to six easy pieces.” You can make your homepage equally as engaging by championing your key offering(s) with a strong design and appealing color palette. Pay attention to what your customers like about your brand and put that in the spotlight on your homepage. Speak to them with a warm and friendly tone, and try to reflect the values you share, to make it resonate. Kabayare Fashion is another client of ours who does this well. Their homepage features large, compelling photos followed by special items from their latest collection. They also feature blog posts which speak directly to visitors, whether to wish them a happy holiday or to share style advice. It’s thoughtful content that engages and encourages their visitors.
Present your best offer
Aside from stunning photography of your latest and greatest products, your homepage should feature your best deals. This could mean a seasonal sale, special promotion, or membership discount. For example, direct-to-consumer lingerie brandSavage X Fenty leads with the latter, promoting their “New Xtra VIP Xclusive” offer to encourage new visitors to sign up to their subscription service.Urban Outfitters plugs their latest sale with a bold banner ad at the top of their homepage that features a “limited time only” discount. Whichever option is relevant for you, lead with your best offer and keep it simple with one clear call to action.
Include important information in the footer
Homepage footers are not to be overlooked, as they’re a place many shoppers are trained to go to to find lower priority yet still important information. Here you should have links regarding contact information, customer service, and refund and exchange policies. Beyond this, also include your social media links, email sign-up field, brand information links and a careers link. The footer is also a great place to enhance shopper trust by featuring the logos of credit cards and other payment options you accept, as well as badges for security services you have an account with, such as McAfee or GeoTrust. This shows visitors that your store is both reputable and user-friendly, which is especially important for the17% of consumers who abandon their carts due to a lack of trust. The footer can also be a place to put useful information such as a list of “top searches,” which is what Madewell does in the footer of their homepage. It allows their visitors to easily click through to popular items such as “skinny jeans” and “tote bags.” These kinds of details show that you’re paying attention to what your customers love about your brand, and suggests that you want to make things easier for them.
These are all relatively simple steps to achieving a strong homepage design and creating a positive user experience. Once you’ve done all of this, ensure your homepage is refreshed regularly, as you release new collections and as seasons and demand changes. With a little effort you can create a highly favorable online shopping experience.
We’ve helped many of our clients design and develop engaging homepage designs. We also work with our clients using best-in-class conversion rate optimization software to improve their homepage engagement and conversion. If you’d like to know more about how we can do the same for you, please contact us.
Get in Touch
Connect with one of our experts today to discuss your eCommerce needs!
No matter how much time and resources you devote to building the most modern, most user friendly eCommerce website there are always going to be features that can be improved upon. That’s where A/B testing comes in. Back in November we covered why eCommerce sites need to A/B test and some of the best extensions to A/B test on. But what elements should you A/B test? That’s what we’ll be covering in this blog. Whether this is your first attempt at A/B testing or you’re on a never-ending search for ways to improve your eCommerce site and increase sales conversions, these tests are worth your time. Here are seven simple A/B tests to try for your eCommerce site.
Show your product or show how it’s used?
Of course you are going to feature your products with great, high-res images, but what’s the best way to display them? Do users want to see the product in action or just against a solid background? A/B testing will tell you.
Every single bit of research and data shows that video is the future. Even the most crisp, beautiful high-res images have limitations. Video is as close as merchants can get to bringing their product to life, short of having customers physically hold the product. If you haven’t yet fully committed to product videos, start with a few for some select products and see how they perform. If you already have product videos, test out an auto-play option and add captions to catch the eye of customers surfing your site with their sound ‘off’.
List View vs Mosaic
It’s the job of your website to make it as easy as possible for customers to find the right product. But, what’s the best way to organize your products visually? For some products and industries a grid view is more successful. For others, a mosaic produces better results. Try A/B testing the visual layout of your product pages and compare the user engagement for a list view versus a mosaic view.
BIGGER calls to action
Customers should never have to ‘search’ for what they’re looking for on your page. It should always be (fairly) obvious where they should go for what they need. If customers can’t find where to ‘Checkout’ or ‘add to cart’ then your site is failing. Those are the two most important elements of your store and when it comes to those CTA’s, bigger is better. But what design, color scheme, and wording on your buttons work best? Test it out.
Feature Contact Information
It may seem like something small, but adding your contact information can have a big impact on your conversions. Relationships are built on trust and customer/merchant relationships are no different. Customers want to know how to get in touch with you if something goes awry. Try prominently listing your email address, phone number and (if applicable) physical location across the top of your site and see if your conversions see a boost.
Static Image over Carousel
Carousels have fallen out of favor in recent years. Testing has shown they can often be distracting to customers, causing them to overlook details that merchants are often trying to get noticed, such as sales and new products. Ecommerce customers also crave control, which auto-carousels completely remove. So, if you’re using a carousel (banner slider) at the top of your page(s) try swapping that out for a static hero image with a single, clear proposition. You may find that lone image and message resonates more than a flurry of images and options.
Highlight a Price Reduction
If you’ve recently reduced the price of an item, make sure your customers know about it. Show them visually. But what’s the most effective way to show them? That’s what you need to test. Perhaps it’s a ‘slashed’ price, or bolded text or an icon on the product image. There’s only one way to find out which works best for your site. A/B test it.
A/B Testing Tips
You can avoid costly mistakes with your A/B testing if you know what to prioritize. Here are a few tips you can try:
Test your most profitable pages first – start ‘where the money is’. Begin testing on the pages that bring you the most traffic and the most money to build on that success.
Assign A/B testing to a single person – Give one person on your team the responsibility of A/B testing management, implementation, monitoring and reporting. The term, ‘too many cooks in the kitchen’ can definitely apply to this. Keep things simple and empower a single person to handle these aspects.
Don’t forget about mobile – Perform A/B tests on both mobile and desktop. Results for mobile can be 180 degrees off from results you see on desktop. What works for one doesn’t necessarily mean it will work on the other.
Start big – begin by testing the larger elements on your pages; hero images, purchase buttons, product descriptions. Don’t get bogged down testing the smaller elements until you’ve tested your larger elements and improved those first.
Test a single element at a time – Select one element at a time to test, otherwise your results are going to be skewed and you won’t be able to determine what elements that are being tested are effecting the page.
To learn more about how to get the absolute most out of your eCommerce site, contact us and a member of our expert team will be in touch with you.
Get in Touch
Connect with one of our experts today to discuss your eCommerce needs!
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.
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!