Evoke Emotion & Encourage Sales with your Color Palette

Evoke Emotion & Encourage Sales with your Color Palette

by | Dec 9, 2021 | Design, eCommerce, Site Development

Setting up an eCommerce website for your business or personal brand is an exciting step. Not only are you making an investment in the future success of your company, but you’re also making a statement by creating a public space for your brand. Once your eCommerce website is up and active, it will be the place where people go to learn more about your business,  and form an opinion about your brand.  Guests will be influenced consciously and subconsciously based on the color scheme you incorporate into the site’s overall design. And this visual influence will ultimately play a role in deciding if they want to spend money on your products or services. 

That is why it is so important to create a color scheme that matches not only your brand but evokes the desired emotion you want your visitors to feel when they are engaged with your brand. 

In this blog post, we’ll go into why you should care about website color schemes, what they can say about you and your brand, how to pick the right color palette for your website, and tools that can help get you started.

What exactly is a website color scheme?

It is simply a collection of all the colors you use on your brand’s website. This includes every design element — such as the text, backgrounds, images, shapes — no matter how big or small. If it’s on your webpage, it’s part of your website color scheme. (If you have corporate brand guidelines, these choices will be driven by that document. If not, this is an opportunity to develop one.)

However, a color scheme is more than just the colors displayed on a webpage. It’s also the different weights that you assign to each color. For example, if you’re using bright red on your website, you’ll need to decide how big of a presence you want that shade of red to have in the overall look of your website.

Why is your color scheme so important?

Before we dive into the process of how to select the right color scheme for your site, it is important to understand why your color scheme matters so much. 

Choosing the right colors for the design of your website is crucial for your online success because they gain a reaction from your targeted audience. Colors can be  used  to stir your visitor’s emotions, to peak their interest – a simple color can become synonymous with a brand and choosing the correct color scheme can  increase brand recognition and extend beyond your website.  

Think about your favorite brands — what colors do they conjure up in your mind’s eye? For instance, do you think of blue when you think of Tiffany’s? Red when you think of Target? Yellow when you think of McDonald’s? If you answered yes, and happen to go to any of those brands’ websites, you’ll likely see those colors prominently featured. You have the same opportunity with your website design – to make a similar impression on your customers with the colors you choose. 

When deciding on how to make that impact, your color scheme is the first place you should start. Remember to be mindful of color psychology and the effect color can have on the emotions of your site visitors. While it’s not a requirement to follow the “rules” of color psychology, it can help you focus on the message and feeling you want your site to convey.

Here’s a quick overview of color psychology, and what different colors might convey:

  • Red: A bold color that evokes strong emotion. With its intensity, it creates a sense of urgency. For example, Target. 
  • Orange: Cheerful and confident, orange conveys the idea of enthusiasm. However, it can come off as the color of caution as well. For example, Amazon. 
  • Yellow: Like orange, yellow provides a cheerful feeling. It represents optimism and is usually attention-grabbing. One thing to consider, however, is that some shades can strain the eye. For example, McDonald’s.
  • Green: Represents growth and nature. It signifies health, serenity, and tranquility. It is associated with wealth. For example, Starbucks. 
  • Blue: This color is associated with water, and provides a feeling of calmness and serenity. Blue creates a sense of security and trust and is often used for corporations. For example, Facebook.
  • Purple: The color of wealth and success. It’s a powerful color, but also represents creativity. For example, FedEx.
  • Brown: Friendly, earthy, and commonly represents the outdoors. For example, UPS.
  • Black: A color with a sophisticated feeling. It’s often what we think of with “sleek” brands because of its exclusivity and mystery. For example, Nike.
  • Gray: Provides a feeling of security, reliability, and intelligence. For example, Lexus.
  • White: Provides a clean or neutral feeling. It’s a key color because it adds breathing room and what is referred to as “white space.” For example, Adidas.

If you already have a logo or brand colors ask yourself, do they evoke the emotion you want from your customers? If not, it may be time for a redesign to focus on  colors that test well with your audience and connect with your industry.

.

How to choose the right color scheme for your website:

A little research in color theory and color psychology can go a long way in helping you choose the right color palette for your website. Everyone wants to get their site up and running as soon as possible, but there are a few things you should consider before you hit Publish that you should know:

Who Is Your Target Audience: Before you decide on website color schemes, you should do some research into which colors are most popular among the people you’re trying to connect with. For example, if your target audience is men over 50, you’re probably going to choose sleek blue and gray tones over bright pinks and yellows.

Which Colors Are Your Competitors Using: Certain industries tend to gravitate towards specific colors. For example, wellness brands tend to use a lot of neutral, earthy tones, and children’s brands typically use pastels or bright, playful colors (imagine a child’s brand that relies heavily on blacks and grays). Yes, you want to stand out from your competitors, but you don’t want your color choices to confuse or alienate your target audience so look into different variations of similar colors to ensure you stand out.

Do your research: The colors you use in your web design will affect how people perceive your brand, whether they realize it or not. As we discussed above, your first step in choosing your website color palette should be researching color theory and color psychology to learn how different colors are related to different emotions.

Keep up with industry trends: Having a better understanding of color trends gives you great insight into what’s emerging in the marketplace, helping you create a website that is new & progressive. Note: Change for the sake of change isn’t always a good thing. Too much change to keep up with the times can confuse your customers so be sure to continuously test what is working and what is not. 

Ensure you have balance: Think about the color harmonies, usually when deciding on a color palette you’ll begin with the dominant color as it will hold the most weight on your website. For instance, Target’s dominant color is red. From there, work your way back to lighter colors to compliment your dominant color. Use the below balance tool as a reference once you are ready to get started. 

The easiest way to select color combinations for your site is by using the color wheel and applying the principles of analogous, complementary, monochromatic, and triad color harmonies.

As you select your colors, remember that the types listed above aren’t definitive rules. They are meant to give you a general idea of the overall feel you want your site to have, but they’re by no means the only ways to create a palette that works for your brand. In addition, be careful about using too many colors as they risk competing against one another and causing eye fatigue or overwhelming your customers. How do you get around this? Introduce new experimental colors in small quantities to reduce risk.

Where to find color inspiration for your website:

Inspiration is everywhere, it can be found in the outdoors, by studying different design fields, watching your  competitors , and by staying informed with web/ branding trends. To help you on your color journey here are some of the trusted, easy-to-use resources we recommend: 

Pantone: Pantone is the design industry leader when it comes to choosing the right colors and provides the latest in color trends across all forms of marketing and graphic arts industries. Pantone is a physical color index and the perfect tool for any designer or business crafting products that are printed. 

Pinterest: Pinterest holds an impressive amount of color palettes created by designers and creatives all around the globe. Simply search by color, season, or theme for instant color inspiration.

From bright Pantone swatches to colorful idea boards, dedicated color websites and blogs can be a great way to experience unique color combinations you might not have thought to try otherwise. Try the below free sites for instant color palette inspiration.

Paletton: This color palette generator is great because it has several different modes, such as a color-blind simulation. It’s also useful for seeing how different visitors will view your color scheme, which is especially helpful if you can’t do a lot of in-person user testing on the site.

Coolors: This handy tool is great for testing different colors next to each other. Featuring a drag-and-drop interface, it allows you to not only customize your color palette but move things around to see what looks best or clashes next to another color. 

Canva’s color wheel: This colorful tool by the Canva team is a great resource for picking out a new palette and for learning even more about the color theory we referenced earlier. It’ll help you discover different combinations based on those theories, so you know your decision is backed by art and science.

BrandColors: BrandColors shows you how leading brands use color to differentiate their businesses, tell their brand stories and let their customers know what they stand for. You can scroll alphabetically through a list of corporations, nonprofits, and startups, or search by brand name.

If you already have images, logos, or branding that your website colors have to match consider using sites like Color Hunter, Adobe Color, Paletton, or Hex Color Scheme.

Test out the final product

When you’re finished choosing your colors and designing your website, you’ll need to test it out to see how it will look when it goes live. Think about it: you test your CTAs, headlines, and other website elements. Why should color be any different? A website behavior analysis tool like Crazy Egg offers the perfect opportunity to figure out how your audience responds to your current color palette and can help you make better-informed decisions on the overall design and palette of your website. For example, you are creating a website for a sports team who normally gravitate towards bolder, darker colors, but you decide to choose the colors pink and blue and you find out during the testing phase that your audience doesn’t like it or doesn’t react how you want them to. Without testing, you would not have known this feedback and wouldn’t have had the opportunity to change it.

Bringing it all together

When it comes to running a website or a business (or both!), it’s always a good idea to look for ways to simplify basic processes. After all, the less time you spend on basic tasks, the more time you’ll have to spend on processes and decisions that have a bigger impact on your success.  And when you have an established color scheme, you make basic design choices much easier, both for yourself and for your designers and developers. Are you ready to incorporate the right color palette onto your website to evoke the right emotions with your customers and need expert help?

    Get expert help today!

    An InteractOne Senior Team Member will get back to you within a day.

    Drop Us a Line At:

    Or, if you prefer an old-fashioned phone call:
    Phone (USA): (513) 469-3346

    4665 Cornell Rd. Suite 255
    Cincinnati, OH 45241

    eCommerce Web Design Trends We’re Noticing

    eCommerce Web Design Trends We’re Noticing

    by | Mar 9, 2021 | Design, eCommerce

    To have a successful eCommerce website, your User Experience (UX) needs to be top of mind. UX is how a customer feels about a specific interaction on your website, be it your customer service, their checkout experience or simply scrolling through products.

    Obviously, you want to be providing only positive experiences. New UX strategies and tactics are being pioneered every day, and it’s up to you to ensure that your brand is keeping up with the latest trends in UX and web design. Make sure that you’re aware of—and also utilizing—the best possible tools and web design trends for your business, and you’ll ensure your site has a great UX. 

    With that in mind, here are 7 eCommerce user experience and web design trends we’re noticing.

    Dark Mode

    By any standard of measurement, everyone has seen an increase in their ‘screen time’, and with that has come the desire and need to lessen the strain on the user’s eyes. Therefore, it’s not surprising that dark mode (or night mode) is becoming an increasingly popular design trend. Dark mode is a display setting that uses light-colored text, icons, and graphical user interface elements on a dark background. Users often enjoy the aesthetic and the experience, regardless of whether they’re using their device during the day or at night. 

    It’s worth mentioning that dark mode consumes as much as 90% less energy on a user’s phone than light mode, making it more battery-friendly as well. This makes dark mode a great way to meet your customers’ needs and improve your brand.

    Chatbots

    As opposed to live chat, which requires a human customer service person to respond to queries, chatbots are technology-driven tools for keeping your business’s lines of communication open. Now they are growing in popularity because they are proving extremely useful for meeting certain customer needs. 

    From a business perspective, chatbots are great for taking care of simple tasks or answering queries during off-hours. From a customer perspective, chatbots are ideal for emergencies, with most people using them to get a quick answer or resolve a complaint or question. They’re especially popular with younger users—40% of millennials claim to use them on a daily basis, and 69% say they would rather engage with a chatbot than a person. If possible, it’s great to use both chatbots and live chat to ensure you have all your bases covered.

    Voice Search

    It’s been tipped as the next big thing for a few years now, but over the holidays we noticed that voice search is really on the rise. As of last year, at least 35% of all US households are now equipped with at least one smart speaker, and they’re being used to make all kinds of purchases, from food and household items to fashion.

    The primary appeal of voice search, like with chatbots, is convenience, and if you can increase that, you will be sure to improve your site’s user experience. Gartner estimated that, by 2021, “brands that redesign their websites to support visual and voice search will increase digital commerce revenue by 30%.” Ultimately, the more avenues you make available to people to purchase your products, the greater your chances for increasing your conversion rate.

    3D Modeling

    Visuals are hugely important for ensuring a strong user experience, and so naturally, eCommerce stores are looking for ways to power up this aspect of their business. For an eye-catching, engaging way to showcase your products, 3D models are a great option to try. 

    High-quality 3D visuals allow users to zoom, spin, and inspect products at every angle. This allows your customers to get a better look and feel for your products and greatly aids in their decision-making process. 3D visuals can also add dimension to the overall look and feel of your website, particularly if it has a more minimal layout. If you use Shopify, you can find an expert who can help you incorporate 3D modeling by visiting the 3D model category of the Shopify Experts Marketplace. If you use BigCommerce, the Zakeke Product Customizer app enables you to provide real-time 3D product previews like the one below, for a more immersive customer experience.

    Augmented Reality

    If you really want to step it up, you can enable users on mobile devices to view your 3D models in the world around them via augmented reality (AR). This allows shoppers to see what your products look like in their immediate physical environment, without having to physically engage with them. This can have a powerful effect—AR has been found to increase customer engagement by 66%. 

    In recent years AR has gone from novel to increasingly viable, as brands and websites of all sizes look to engage users on a more meaningful level. Jeep is utilizing AR for its “Build & Price a Jeep” page, and fashion and accessories brands like Warby Parker are also offering virtual try-on via AR capabilities on their app. For a next-level, immersive experience, AR is the way to go.

    Shopify has a whole suite of solutions for augmented reality on their platform, and BigCommerce recommends powerful AR technology provider Threekit for eCommerce on their platform. That said, all of this can be a little daunting to the uninitiated. If you’re stretched for time, reach out to our team at InteractOne for expertise and guidance, and we’ll help you find the right solution for your business.

    Multimedia Content

    The proliferation of faster internet speeds is enabling greater online shopping in the form of multimedia-rich websites. The best web stores nowadays combine text, images, audio, and video for an exciting, engaging user experience. 

     However, you don’t want to overwhelm your visitors, so you need to choose carefully what you implement, and where. Prioritize simplicity and combine elements where possible so that they’re not competing for your users’ attention and inadvertently making your UX worse!

    It’s possible to combine a lot of multimedia elements at once without overwhelming your visitors—Redbull achieves this with their website’s clean design. On the other hand, the example on the right quite clearly shows you everything you shouldn’t do.

     

    You’ll also want to ensure your website remains ADA compliant. A key to ADA compliance is keeping your multimedia elements accessible by including alt text on images, having closed captions on videos, and avoiding using autoplay on video or moving content.

    Dynamic Visual CTAs

    Your web store will surely already have calls to action (CTAs) encouraging people to at least “sign up,” “add to cart,” and “check out.” But there is a lot more you can do with CTAs than you might have initially thought. As we all know, an eye-catching CTA is essential for converting shoppers, but in order to do that, you need something that’s strong both verbally and visually. 

    Like so much else with eCommerce websites, CTAs are becoming more dynamic and visual. Sliding CTAs are gaining popularity as a way to introduce movement and grab shoppers’ attention, and that’s just one way you can bring these important parts of your website to life. In order to find out what works best for your website, you’ll need to conduct A/B tests on your CTAs to determine exactly how big and bold to go with the copy and design.

    Conclusion

    If you’d like guidance on choosing and administering any of these or other UX and design trends into your eCommerce website, get in touch with us. Our team of specialists will be happy to assist you.

    Get in Touch

    Connect with one of our experts today to discuss your eCommerce needs!

    Contact Us
    7 Simple A/B Tests to Improve Your eCommerce Site

    7 Simple A/B Tests to Improve Your eCommerce Site

    by | Feb 17, 2021 | Adobe/Magento, Design, eCommerce

    No matter how much time and resources you devote to building the most modern, most user-friendly automotive eCommerce website, there are always going to be features that can be improved upon. That’s where A/B testing comes in. 

     A/B testing comes down to making small adjustments to your website until you find the combination that resonates most with your audience. This means that there are few “ah-ha!” moments; with A/B testing it’s all about baby steps. But be patient, let the testing data inform you, and you will reap serious rewards. 

     Whether this is your first attempt at A/B testing or you’re already on a never-ending quest for ways to improve your eCommerce site and increase sales conversions, here are seven simple A/B tests to try for your automotive eCommerce site.

    Show Your Product Alone or In Context?

    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.

    Product Videos

    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 bring their product to life, short of having customers physically hold the parts or products in their hands. 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 make it accessible and 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, 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. You could also ultimately provide both view options via small buttons above the product results, as CARiD does, if you find that your shoppers respond well to having the choice.

    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 they can’t find where to check out or add to the cart then your site is failing. Those are the two most important elements of your store and when it comes to those CTAs, 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 are boosted.

    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. Automotive eCommerce customers also crave control, which auto-carousels remove. So if you’re using a carousel (banner slider) at the top of your pages, try swapping that out for a static hero image with a single, clear proposition. You may find that one bold image and message resonates more than a flurry of images and options. CARiD’s homepage is a great example, enabling shoppers to immediately enter their vehicle’s details to find the best products for their needs.

    Highlight a Price Reduction

    If you’ve recently reduced the price of an item, make sure your customers know about it by showing 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 like JEGS uses on their website, different colored 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.

    What to Prioritize With A/B Testing

    You can avoid costly mistakes with your A/B testing if you know what to prioritize. Here are some things to do and keep in mind as you begin.

    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” definitely applies to A/B testing. 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 work for the other.

    Start Big – Begin by testing the larger elements on your pages; hero images, purchase buttons, product descriptions. Don’t get bogged down with testing the smaller elements until you’ve tested the 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. 

     

    Our team has a lot of experience in A/B testing to determine the most profitable outcome for automotive eCommerce websites. If you’re ready to get the absolute most out of your website, contact us and we will be happy to assist you.

    Get in Touch

    Connect with one of our experts today to discuss your eCommerce needs!

    Contact Us
    Comstar Video Case Study

    Comstar Video Case Study

    by | Feb 12, 2021 | Design, eCommerce, Technology

    Comstar

    Comstar is a manufacturer, developer and retailer of environmentally friendly, industrial strength chemical products for the trade professional. 

    Comstar partnered with InteractOne to build a new Magento 2 website. This new website needed to have international reach, empower distributors and support B2B and B2C clients. 

    In this Case Study video we’ll be taking a look how InteractOne created this new site as well as highlighting many of the back-end user-friendly functionalities that allow the Comstar team to manage and this high-end eCommerce site without the need of a developer. 

    See the new Comstar’s website for yourself here.

    Contact the certified Magento developers & their team at InteractOne here!

    Get in Touch

    Connect with one of our experts today to discuss your eCommerce needs!

    Contact Us

    Marc Phillips Video Case Study

    Marc Phillips Video Case Study

    by | Feb 8, 2021 | Design, eCommerce, Technology

    Marc Phillips

    Marc Phillips is a leading innovator and manufacturer of decorative high-end rugs. They are headquartered in New York and Los Angeles. Marc Phillips’ rug collections are vastly-layered, yet highly-curated by their team of creatives, who breathe soul into the brand mixing laid-back livable with a sophisticated edge.

    Marc Phillips partnered with InteractOne to build a new eCommerce website. One that better showcases their luxury brand and products, and provides all of its visitors with a sleek and modern user experience.

    Marc Phillips new website needed to do more than showcase their products and their brand. This new website had to serve multiple masters, in that it needed to be functional and usable for their customers, distributors and partners worldwide.

    In this Case Study video we’ll be taking a look how Interact One created this new site as well as highlighting many of the back-end user-friendly functionalities that allow the Marc Phillips team to manage and this high-end ecommerce site without the need of a developer.

    Click here to see the new Marc Phillips website for yourself.

    Click here to learn more about InteractOne and how we create amazing ecommerce experiences.

    Since 1998, InteractOne has been helping our clients grow and compete online, always keeping in mind to do whats best for our clients. We build, maintain and market great eCommerce experiences.

    Get in Touch

    Connect with one of our experts today to discuss your eCommerce needs!

    Contact Us

    The Beginners Guide to Creating Brand Guidelines

    The Beginners Guide to Creating Brand Guidelines

    by | Sep 25, 2020 | Design, Digital Marketing

    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.

    Brand Story

    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:

    Brand Values

    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.

    Mission Statement

    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.

    Design Elements

    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!

    Contact Us

    How to Optimize Your Homepage Design

    How to Optimize Your Homepage Design

    by | Sep 18, 2020 | Apparel, Design, eCommerce

    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 by Shopify 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 a positive user experience. This involves multiple elements, but rethinking your web design is key. On average, visitors will spend 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 by SEM 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 their homepage 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 brand Savage 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 the 17% 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.

    Conclusion

    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!

    Contact Us

    How to Correct Common User Interface Issues and Improve Conversions

    How to Correct Common User Interface Issues and Improve Conversions

    by | Jul 6, 2018 | Design, eCommerce

    Improve Conversion rate

    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.

    Example of social proof

    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 Watsons.com

    InteractOne Launches Watsons.com

    by | Mar 17, 2016 | Adobe/Magento, Design, eCommerce

    Contact Information:
    InteractOne, Inc.
    513.469.7042
    [email protected]

    new site for watsons.com

    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. 

    About InteractOne:
    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.

    6 Tips for Better User Interface

    6 Tips for Better User Interface

    by | Nov 30, 2015 | Design

    finger-UI

    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.