SEO and Information Architecture: Making Them Work Together SEO and Information Architecture: Making Them Work Together

SEO and Information Architecture: Making Them Work Together

Design, Digital Marketing, Experience Design, SEO, User Experience, UX & UI ,

As we discussed in Algorithms, Natural Language, and the Future of UX and SEO, the introductory piece in our series on SEO and UX, Google and other search engines are becoming increasingly adept at identifying and interpreting user intent to determine what content to return, and how to rank and display that content for its users.

We know that Google has sophisticated artificial intelligence systems and machine learning capabilities that enable them to process searchers’ language and identify the goals that they inherently express through their searches. However, understanding user intent is just one piece of the search experience puzzle, and one small part of Google’s algorithm. Google must then be able to evaluate sites and content in order to determine whether they are a good fit for a user’s query. A site’s structure, or information architecture, is one of the most universally influential and significant aspects search engines use to determine that site’s purpose, credibility, and value.

What is Information Architecture?

Information architecture (IA) defines your site’s organization, hierarchy, and the terminology used to describe your site’s content and categories. An effective information architecture helps your users find what they’re looking for by orienting them to their current location within your system, guiding them to other areas or content within your site, and supporting them as they explore or search for information. It also should also give both your human and robot users a clear idea of the nature of your business’ products and services.

Different Websites Need Different Information Architectures

Your IA should be tailored specifically to your audience, context, content, goals, business, scale, and other areas that relate to your industry. An ecommerce domain is going to focus on presenting its most important or popular category landing pages and product landing pages, while a lead-gen domain will be aimed at getting users to convert through a sign-up or contact form. Both websites need a great IA to be successful but careful planning and consideration are needed to make everything work. 

Search engines want sites to be logical and easily navigated, both for users and crawlers. Crawlers generally read pages left to right and top to bottom, just like most people in the world. This is why nearly every domain places a logo or homepage link in the upper-left-side of the page, followed by orderly navigation across the top of the site. Both users and Google expect to be able to navigate a site through some form of global navigation element, and that format had better be present across the entire domain. 

This doesn’t mean your site has to follow a rigid, predetermined layout that applies to all sites in your specific industry. However, it does mean that the site’s page, category, and/or product structures should make sense and be accessible to users. 

Let’s look at some high-level examples of IAs and examine how they may vary based on site type & goal.

Blog Information Architecture Example

A blog site might have an information architecture similar to this:

This is a topic-forward structure with some background about the blog and its team, answers to questions readers frequently ask, and a way to get in touch. Users and Google will identify this site as heavily content-based, with specific areas of expertise or interest, and will infer that the site’s primary goal is to get users to read and engage with the articles that they publish.

Ecommerce Information Architecture Example

For an ecommerce site, you might construct something more like this:

Instead of topic categories, this information architecture is product category-driven and has very little secondary content. Google (and users) will see this site and identify that their primary goal is to get users to their products and to provide support or answers for questions about their products. Unlike the blog, an ecommerce site may be less interested in telling their story or providing additional content to its users, and that departure is reflected in their IA.

Information Architecture for Mixed Domains

Here’s a domain information architecture that is perhaps a little bit less clean-cut:

Looking at this information architecture, we might infer that while this company has fewer products, they are likely experts on those products and value their reputation. There are testimonials that serve to enhance their credibility and blog content that they use to convey their expertise and point of view. The addition of something like a “Mission” page indicates that they have a specific value proposition or cause, which further enhances their credibility.

While these examples are simple, we can start to see how nuanced and impactful your Information Architecture is in terms of how users and Google will perceive your site. Even small things, like the placement of a FAQs page, can say a lot. 

While a strong IA is highly influential in conveying your intent, focus areas, and expertise, it is important to note that it’s not enough to establish an intuitive architecture that reflects who you are and that helps guide your users where they need to go. Google (and your users) will still evaluate the specific content on your site to determine whether it meets their needs. There are also significant tactical considerations that affect how users and search engines experience your site, which will affect how you rank. 

The Value Behind Click Depth in Information Architecture

One important and sometimes-overlooked aspect of creating a great IA is click depth. Click depth focuses on establishing how far pages, categories, and products “live” from the homepage, or how many clicks it takes for a user to reach their target page. 

For example, you don’t want to bury products deep within a site’s category structure. This will create a fairly long URL path and could lead to some confusion with breadcrumbs, not to mention users. 

  • Homepage > Category 1 > Subcategory 1 > Tertiary category 1 > Product
    • This structure shows four clicks are needed to move a user from the Homepage through the category structure and, finally, to the product
    • The Category and Subcategory might have more potential value than the Tertiary Category or the product itself

Instead, focus on keeping categories, subcategories, and products fairly close to “home”. This makes it easier for search engines to find the page, attach relevant value, and present it in search results. 

  • Homepage > Category 1 > Product
    • This structure helps reduce the path to the final product
    • The Product page is within two clicks, so there is little concern about click depth

The best practice for click depth is to try to keep your most-important or most-valuable pages within two to three clicks from the homepage. Any pages that are four, five, or more clicks away from the homepage will be seen as less important and could end up with lower overall organic value. It will also help to keep your URLs shorter and more orderly, which is another good signal for any search engine. 

Many web development groups have been paying attention to the idea of click depth in recent years. Today, it’s fairly common to see newer or improved content management systems attach a product directly to the Homepage instead of attaching them to the domain’s category structure. This allows products to be placed within any category structure without requiring multiple versions of products, each with a different canonical tag.

Using Your Information Architecture to Save Orphans

Creating a comprehensive IA is important not just because it helps to organize the site’s structure – it also helps to ensure you don’t accidentally forget, or “orphan” any pages. To search engines, any URL that can be indexed and presented in search results, but can’t be accessed through navigation, in-text links, or an XML/HTML sitemap, is an orphaned URL. And Google, much like the bad guys in plenty of classic musicals and books, doesn’t like orphans. 

Don’t worry that you’re accidentally creating some sort of digital orphanage in your site. Current content management systems and web development best practices have helped to significantly reduce the chance that webmasters will accidentally create orphaned URLs. You can easily avoid leaving pages out in the cold with a solid IA (and a comprehensive XML sitemap). Just take the time to be sure you’ve included everything you need and that nothing has been left behind. 

Getting it Done with Expert UX & SEO Professionals

Getting your site’s Information Architecture right is critical: it not only has a large impact on how well users can find what they are looking for (and provides Google with metrics to influence how you rank accordingly), but needs to clearly and logically represent who you are and what you do. Without a strong IA, you are less likely to be understood by Google (and your users), and are more likely to have an experience that doesn’t flow well.

A user experience professional can help you craft a clear information architecture that will meet your users’ needs, flow well when translated to your site structure, and adhere to usability best practices. To bring your information architecture to the next level, an SEO expert can help you get a better picture of how Google will perceive and evaluate your domain based on your architecture, and then make recommendations on how to optimize your structure for crawlers. The fusion of these two disciplines will ensure that your information architecture not only works well for your users but is also helping you perform better on search engines. 

Contact CQL for SEO & Information Architecture Services

Contact the SEO and UX experts at CQL today if you’d like to know more about developing and implementing the best-possible information architecture and SEO strategy for your domain.

Stay Informed

Stay up to date on the latest in technology, strategy and design.

The Rise of the User: An Introduction to UX and SEO The Rise of the User: An Introduction to UX and SEO

The Rise of the User: An Introduction to UX and SEO

Design, Digital Marketing, Experience Design, SEO, User Experience, UX & UI ,

During the early years of search engines, the search experience was largely driven, and limited, by technical capabilities: server & storage space, how to determine result relevancy, and the indexability of content and information. However, as systems and people have become more technologically advanced, the search experience has done the same. 

When you consider the sheer volume of data and information on the Internet, and layer in developments like voice assistants, robust natural language processing, machine and deep learning, and multi- and omnichannel approaches to consumer experiences, you’ll quickly find that the opportunities and technical possibilities for search engines now seem more limitless than ever. 

The early search engine paradigms of indexing all web content and relying primarily on keywords, backlinks, and advertising to determine result rankings would be laughed at today. Now, the search experience is increasingly about the user’s experience, which means that understanding both UX and SEO is key to having a strong search presence and value.

This article is the first in our series of four upcoming posts focused on why it’s important for companies to combine UX and SEO when creating, redesigning, or just updating a website.  

The Search Algorithm Evolution

Though recognizable, the Google that dominates the search market today has clearly undergone significant transformations since its inception in 1998 (starting with its name… it was initially called “BackRub”). In addition to the significant performance, storage, and server improvements, Google’s greatest differentiator and achievement is its search algorithm, which determines how web content is crawled, evaluated, ranked, and displayed on results pages. 

Simply comparing the search results for the word “cat” on 1998’s Google versus modern Google gives a sense of just how far search engines like Google have come.

Google updates its algorithm thousands of times each year (over 3,000 times in 2018 alone), including changes like bug fixes, temporary experiments, and core algorithm updates that are typically more significant and far-reaching. Some major algorithm updates have focused on restricting and reducing value for spammy or keyword-stuffed domains (the Penguin algorithm), while others have helped Google’s algorithm expand how it understands and values quality on-page content (the Panda algorithm). 

The changes that Google makes to its algorithm are reflective of, and responsive to, its goal to get users to the content and information that they seek efficiently and effectively. Google and other search engines don’t want to send users to domains with clunky interfaces, limited internal links, low-quality page content, and hard-to-navigate page structures. Bad search results don’t improve the search experience and could even drive people to other search engines, so it’s important to make sure the top results are quality options.

How Does a Search Engine Understand the User Experience?

Relying on user behavior is an excellent way to understand a domain’s usefulness and popularity, but this creates interesting complications: how can a search engine actually understand a user’s experience when it isn’t a living, breathing entity? Can a machine-learning algorithm understand the differences between a good and bad UX when all it really sees is code and structure?

The answer is surprisingly simple: Google is monitoring how users interact with domains contained in its index. If your site has high user interaction scores, then your domain gains organic value and increases your chances of appearing at the top of search results. The reverse is the same: if people are not using and exploring your site, then you’re going to be passed over for a competitor doing a better job. 

Though there are many, many metrics tied to how Google evaluates a domain, three of the most important are:

  • User Interaction: Google keeps track of user interaction metrics to evaluate a domain’s relevance for a particular query. They can be broken into three basic segments:
    • Bounce Rate – whether or not a searcher leaves your domain after clicking the URL in search results. If they stay and explore the site, then your bounce rate decreases
    • Session Duration – how much time users spend reviewing and reading page content. High ToS numbers indicate that users are reading and using the content
    • Pages per Session – how many pages a searcher visits after landing on the site. More pages per session show users are actively searching and navigating through the site and interacting
  • Site Speed: Users want fast, interactive websites they can use quickly and easily. If your site is slow, then there could be significant impacts to your user interaction metrics.
    • In 2018, Google changed its search results database from desktop sites to mobile sites, which means site speed is more important than ever
    • Domains with bad page formatting, too much junk code, huge image files, and improper browser caching can also be slow
    • Google’s PageSpeed Insights and Lighthouse tools are excellent ways to evaluate your domain’s overall speed and performance
  • User Goal and Intent: Google wants users to find the right result and engage with the selected domain, so it’s important that page layouts and formatting match a user’s intent
    • If you’re running a lead-gen or informational website, then you’d want a layout that focuses on the page’s content without putting obstacles in the user’s path
    • If you’re running an ecommerce website, then you want to use a product landing page layout that makes it easy to review and purchase your products

There are some important distinctions to make when it comes to how Google evaluates user interaction. Informational domains, like Wikipedia or major news sites, likely have high session duration numbers but might have a low pages-per-session count with a very high bounce rate. This could indicate that users are finding the information they need, reading through the details, most likely are not seeking related articles, and are leaving the site. Google sees this, understands that people are likely finding what they want, and attaches value to that domain.  

On the other hand, your average ecommerce domain might have high session duration numbers and multiple pages-per-session with a low bounce rate. This could mean that customers are shopping around and finding what they want, which is exactly what Google wants to see. If you flip this and see low session durations, reduced pages-per-session numbers, or a very high bounce rate, then you might be able to infer that customers aren’t finding what they want and are leaving. Google will leave right behind them. 

Search Engine Results Page Structure

The visual manifestation of Google’s algorithm is the search engine results page (SERP). All of the crawling, data collection, analysis, and ranking work that the search engine and its algorithm conduct do not have any value to the end-user until it is all generated as a results page. To provide users with the best possible experience (and therefore, to realize the greatest efficacy of the search engine), a list of links just isn’t going to cut it. For that reason, Google continues to evolve and improve how content is displayed to its users on the SERP.  

The addition of rich snippets, like news stories, the knowledge graph with featured information, media carousels, questions & answers, etc. are Google’s way of helping its users find the information that they are seeking successfully and quickly. At the end of the day, that is how Google determines its efficacy: whether its users are successful and satisfied. That means it’s Google’s job to figure out what its users want, what they care about, and what they are looking for, and to create an algorithm that can deliver that to them in a way that aligns with their goals. 

One of the key ways in which Google attempts to understand a user’s intent is through its use of Natural Language Processing, a form of AI that allows computers to better understand language and its intricacies. Google uses Natural Language Processing to identify a user’s intent and goal with their query so that they can return the content that the user seeks. In order to get a feel for how Google does this, quickly conduct a search for “coffee,” and notice what is returned. While this can be affected by your location, past behavior, etc., you might see things like: 

  • a map with nearby coffee shops
  • the coffee Wikipedia page
  • images
  • nutrition information for coffee
  • a link to shop for coffee on Amazon or another retailer

Now, conduct a search for “best coffee” to see how different the results are. You are likely seeing a page that is much more focused on coffee products:

  • popular or recommended products
  • a Q&A panel with questions about coffee brands, types, or how to choose a coffee
  • a map with nearby coffee shops filtered by customer ratings
  • links to pages that rank or rate coffee beans & shops
  • buying guides created to help readers select their perfect coffee

A search for a term like “coffee” is interpreted by Google as a request for general information and gives little indication of the searcher’s intent. However, the simple addition of an adjective like “best” provides Google with additional context that helps to determine that you are likely looking for ratings, rankings, or a recommendation of a product. It also likely understands that quality is important to you, while general information (like the coffee Wikipedia page) and coffee imagery are less important to you. Google is becoming increasingly savvy about identifying and interpreting its users’ journeys and intentions and continues to evolve the way it structures and returns results accordingly.

The Future of UX and SEO

Search Engine Optimization is now, more than ever, about more than how a search engine experiences and interprets your site; it’s about the user’s experience and how understanding things like user behavior, intent, and the journey can help search engines deliver the best possible outcomes. 

Over the next few posts, we will dive deeper into the opportunities and benefits associated with fusing UX & SEO methods, practices, and insights, and how these areas can help create a stellar experience for both the human and robot users of your website.

We will discuss:

  1. How to create a site structure that is user-friendly and SEO-optimized
  2. What experience scent is, why it matters for your SEO, and how to design your site accordingly
  3. What other opportunities (beyond your ranking alone) exist for you in SEO and how you can set yourself up to capitalize on some of those opportunities

Have questions or want to know more about combining UX and SEO in design & function? Continue reading our series, or contact us for professional digital marketing and experience design advice and/or services. 

Stay Informed

Stay up to date on the latest in technology, strategy and design.

Elevating the Online Shopping Experience for the HYTEST Brand Elevating the Online Shopping Experience for the HYTEST Brand

Elevating the Online Shopping Experience for the HYTEST Brand

CQL @ Work, Case Study, Ecommerce Platforms, Experience Design, Salesforce Commerce Cloud, UX & UI ,

HYTEST has no problem retaining the loyalty of their life-long customers. For the last 85 years, HYTEST has been on the cutting edge of protection – and comfort – when it comes to safety footwear. Eager to expand their B2C market share and reach new consumers, HYTEST approached CQL to elevate their online shopping experience. We brought together a strategic blend of design and technology to deliver a website that was visually engaging and functionally sound.

Visually Expressing a Built Tough Brand

After conducting extensive market research, HYTEST discovered the younger generation entering the workforce was looking for a bit more style in their shoes. On their days off, these consumers were often sporting active wear and athletic sneakers. HYTEST used these findings to inform their products, developing new boots and shoes with an athletic fit and fresh pops of color. We leveraged these consumer insights and paralleled this product shift when refreshing the HYTEST brand and redesigning the website. An energetic, built tough brand quickly took shape, channeling a look and feel that reflected enduring comfort and top-notch performance.

Choosing a Proven Commerce Platform

In addition to a new visual expression of the brand, we also recommended an updated ecommerce experience that could support the demands of this growing brand. Salesforce Commerce Cloud quickly emerged as the platform of choice. HYTEST needed a commerce solution that would reduce friction during the checkout process and create a more streamlined order fulfillment process. Previously, orders were sent to local distributors rather than being handled at the corporate level. By bringing order fulfillment in-house, HYTEST would now have more visibility into their inventory, alleviating a major pain point on the previous website.

Cross-department collaboration between our design and development teams was key to creating an easier online shopping experience and increasing conversions.

Read the full HYTEST case study here.

Stay Informed

Stay up to date on the latest in technology, strategy and design.

Content-First CMS Helps Connect Consumers with Financial Advisors Content-First CMS Helps Connect Consumers with Financial Advisors

Content-First CMS Helps Connect Consumers with Financial Advisors

CQL @ Work, Case Study, Experience Design, User Experience, UX & UI ,

How do you redesign a digital experience to enable consumers to better connect with financial advisors? That was the problem we set out to solve for NAPFA (National Association of Personal Financial Advisors). But where to start? These are the five key steps we took to bring NAPFA out of digital discord and into consumer connectedness.

NAPFA Website Device Display

Step 1: Identify the Problem

In NAPFA’s case, we identified quite a few roadblocks preventing them from providing an effective digital experience. Major issues were rooted in content management, user experience (UX) and platform maintenance. An outdated and unintuitive content management system (CMS) was preventing the team from reliably publishing and managing new content. Another major concern was the user experience of the site. There were no clear user paths and the navigation was hard to follow. Behind the scenes, the overall maintenance and connectedness of the technologies in place were unsettling.

Step 2: Understand the Audience, Data and Platform

Working with key stakeholders, we held a persona workshop to identify the audience, key user needs and existing pain points. We dug into the analytics to understand user behavior and identify top performing content, so we could design a better functioning experience. Once we understood the experience their target audience was looking for, we explored the technology to understand the landscape. We looked at their CMS, databases, custom integrations and third-party services to make sure the new system could either replace or integrate with existing elements.

Step 3: Create a Strategy and Roadmap for Execution

Our discovery revealed many potential directions for improvement, more than what should be tackled at one time. We decided to implement a phased approach to ease the complexity of the rollout. The first phase would center around creating a better user experience with a redesign of the full site, CMS and Find an Advisor tool. We also set out to reduce, what we call, technical debt by creating a new foundation to house the CMS, Find an Advisor tool and conference manager, all within the same platform. This would remove the isolated CMS, isolated Find an Advisor tool and eventually house a member management portal and online store in a future phase.

NAPFA Find An Advisor User Journey

Step 4: Design a Solution that Reduces Pain Points and Creates New Opportunities

For this project, we decided to take a content-first approach. Wait, what does content-first mean? The theory is that if we pay extra attention to the needs of the content creator, we can empower them to create a better customer experience. To aid content production, we also created guides and templates to assist the content team so they can create content in a consistent manner. The editing experience itself is one of our favorite content interfaces we have ever designed. We created an in-context editor, meaning content creators can actually edit content directly on the page rather than working on a backend interface. We even added global modules that allow certain types of content to be used globally.

NAPFA Custom CMS Editing Experience

Step 5: Launch, Learn and Refine

Now that the site is live, we are continuously working with NAPFA to refine the experience as we continue to learn from users. We are excited to see where this new site can take the NAPFA brand, and even more excited about evolving it in upcoming phases targeted toward improving the advisor membership experience.

Read the full NAPFA case study here.

Stay Informed

Stay up to date on the latest in technology, strategy and design.

4 Areas to Evaluate Before Redesigning Your Website 4 Areas to Evaluate Before Redesigning Your Website

4 Areas to Evaluate Before Redesigning Your Website

Experience Design, User Experience, UX & UI ,

Improving the user experience, updating your brand and fixing functional limitations caused by outdated technology are all good reasons to consider redesigning your website. Refreshing the online experience gives you a chance to reevaluate the primary function of your site and the business goals it helps you achieve. By honing in on those objectives and evaluating these four key components, you’ll be well on your way to executing a successful website redesign.

Site Visitors

Understanding your audience is the first step in influencing them to take action. In order to motivate your customers, you have to know what makes them tick. What are their challenges? What incentivizes them to make purchases? How are they viewing and interacting with your site? Once you drill down into who your consumers are, you’ll be able to deliver a personalized experience they can’t resist.

The State of Your Current Site

Assessing your current website will establish a benchmark that can be used to measure the effectiveness of the new site. It’s important to identify current pain points, limitations and shortcomings with an unbiased eye to truly create an elevated experience through the website redesign process. During this stage, it can be valuable to consult various departments who interact with your customers in unique ways, including the marketing, sales, and customer service teams.

Expectations for the New Site

You’ll want to identify the decision makers and determine who will be involved in executing the work. Knowing the internal stakeholders and understanding their expectations ahead of time will help ensure the project is completed in a timely manner. Determining who will be involved in the day-to-day work will help ensure the right people are pulled in from the beginning.

Brand Standards

Your website is only one of the many brand touchpoints consumers will engage with, both on and offline. It is important for all expressions of the brand to have a cohesive look and feel to create a seamless user experience. Your website, social media channels, email promotions and print materials should all look like they belong together. Be sure to follow any existing brand standards that include guidelines for fonts, colors, logo treatment and other stylistic elements.

Understanding these four components is the starting point for any website redesign project. If you’re thinking about evaluating and improving your site experience, then contact CQL’s team of expert digital marketers to get started.

Stay Informed

Stay up to date on the latest in technology, strategy and design.

MidwestUX 2018: The Importance of Accessibility in Design MidwestUX 2018: The Importance of Accessibility in Design

MidwestUX 2018: The Importance of Accessibility in Design

Experience Design, User Experience, UX & UI ,

This past October, five members of our design team traveled to Chicago to attend MidwestUX 2018. MidwestUX is an annual conference focused on bringing the design community together to collaborate and challenge us to advance the Experience Design industry. The CQL design team spent two days attending sessions, gaining a fresh perspective on the future of UX and its impact on other industries. Below we share some of our design insights from MidwestUX 2018.

One of the themes this year was designing for accessibility, both from a user standpoint and from a designer’s perspective as a fellow employee. As designers, we often focus on usability for a specific set of personas that may not dive deep enough into other barriers. We can give our persona a name, age, motivations, and goals, but are we also thinking about their physical, educational, and economic obstacles? I may decide to use a specific shade of gray on a project because it works well with that client’s brand, but how many of their users will have trouble seeing it due to vision impairments? Likewise, our team may use verbiage on an app that sounds clear to us, but what if half the users are low-literacy?

User Accessibility

This year at MidwestUX, Dana Chisnell, from the Center of Civic Design, lead a session that questioned how accurately our designed experience matches reality. She focused on two massive gaps in the U.S. voting process, discovered through the collection of thousands of stories from voters, taken over a five-year period.

Gap #1: There is a huge disconnect between the people who administer elections and the voters themselves regarding the voting process. A staggering 49% of Americans are low-literacy, adding an extra layer of difficulty for these voters and a need to truly understand the barriers they face in the voting process. This really brought home the need to think through the language being used on sites. Who’s the audience? Is this headline clear? Is there a simpler, more direct way to word this?

Gap #2: There is a large gap between privileged voters and burdened voters, explaining why it is harder than it should be for many of us to vote. Dana walked us through the journey for a privileged voter and the journey for a burdened voter, both of which were very different than the anticipated steps. Travel, geography, expense and literacy were all major factors. What really stuck out to me was how different the user journey for a “typical” voter was, compared to reality. It reinforced the need to obsessively interview, test and truly understand the obstacles our users face on a daily basis.

Employee Accessibility

Accessibility is equally important from an employee perspective. How many of the talented designers you work with seem to be wired a bit differently? Neurotypical employees are individuals of typical developmental, intellectual and cognitive abilities. Atypical employees are individuals who are on the autism spectrum or have other developmental differences. Are you doing everything you can to make the work environment healthier and more flexible for both neurotypical and atypical employees?

Amy Johnson, a Senior Mobile Visual Designer from Allstate Insurance Company, lead a discussion that walked us through tools she has used first hand to thrive in her career as a neuro diverse team member. Besides being so successful in her work, she has made great efforts to share the benefit of hiring those with atypical brains.

For a long time, Amy was unemployed after a layoff. She went to interviews but didn’t get hired because hiring managers informed her that her facial expressions were inappropriate. She had great work and a solid skill set but she didn’t make enough eye contact. This led her to investigate why she was being turned away from great opportunities. She found out, just shy of 30 years old, she was autistic. After becoming educated on her diagnosis she found a job at Allstate and was able to truly thrive and collaborate with others. Her efforts at Allstate have paved a better future for other atypical designers. Below are some of Amy’s insights on identifying and working well with atypical team members.

Signs of someone who is atypical:

  • Difficulty in understanding unwritten social rules
  • Little or no participation in group conversation
  • Extreme honesty
  • Reluctance to ask for help
  • Excessive questioning
  • Bad reactions to interruptions

Ways to better the work experience for atypical employees:

  • Low sensitivity areas such as a health room
  • Flexibility with working from home
  • Goal setting with manager for bettering oneself inside and outside of work (Amy and her boss had a goal taking on public speaking and this year at MWUX she was able to accomplish that)
  • Various types of seating throughout the office
  • Getting involved in culture focused groups or committees

Although user accessibility and employee accessibility may seem quite different on the surface, they both influence our ability to make our experiences more impactful. As technology continues to advance, there is no excuse for having inaccessible designs and work environments. This year’s MidwestUX conference made me take a hard look at the users I design for and the people I work with, asking myself, “Do they feel accounted for?” It’s a simple question, but it’s ultimately the first step down the path toward true accessibility in design.

Spoiler Alert: MidwestUX 2019 will be hosted in our own backyard – Grand Rapids, Michigan. We hope to see you there!

Stay Informed

Stay up to date on the latest in technology, strategy and design.

Four Winns’ New Website and Configurator Helps Buyers Build Their Own Boat Four Winns’ New Website and Configurator Helps Buyers Build Their Own Boat

Four Winns’ New Website and Configurator Helps Buyers Build Their Own Boat

CQL @ Work, Case Study, Design, Experience Design, UX & UI ,

Here at CQL, we are proud of our partnership with Four Winns, and we wanted to to give a shout-out to the Four Winns marketing team for another successful website launch this week.

With the boat show season in full swing and most of us living through the the tail end of winter, we have found ourselves daydreaming a bit when pouring over lifestyle images of sun, water and fun while building this site over the past few months.  

(Is it summer yet?)

Build Your Own Four Winns

This year, CQL and the Four Winns team are making sure every boater and boating family can create the boat of their dreams with the help of on-line customizations and a ‘build-a-boat’ configurator.

Buyers can go to the boat shows, see the quality, talk to the experts and configure their own boat, just the way they want it. By tying the configuration to a sales lead system, Four Winns dealers can know specifically what a customer wants. 

Being Part of a True ‘Made In Michigan’ Brand

For those of you who aren’t familiar, the new website is just half the story. Cadillac, MI has been home to Four Winns since the company’s founding in 1962. Over the last 20 years this brand has had step-level growth that has propelled it into being one of the leaders in the industry.

Today, Four Winns brand includes Bow Riders, Deck Boats, Tow Sports and Cruisers. 

While you will likely find a Four Winns boat in nearly every marina in America, the brand is poised for global expansion after being acquired by the French yacht builder Beneteau. 

Four Winns is a true success story and one CQL is proud to have been part of for the last eight years – now if we could just have a Four Winns of our very own!

Explore the new Four Winns website or say hello to our friends at a boat show close to you.

Stay Informed

Stay up to date on the latest in technology, strategy and design.

Apple Pay and Salesforce Enable Ecommerce Conversions for Mobile Holiday Shopping Apple Pay and Salesforce Enable Ecommerce Conversions for Mobile Holiday Shopping

Apple Pay and Salesforce Enable Ecommerce Conversions for Mobile Holiday Shopping

Experience Design, Salesforce Commerce Cloud, UX & UI ,

As CQL’s team prepares to launch Apple Pay across fourteen global brands on Salesforce Commerce Cloud (formerly Demandware), we caught up with Chris Shaffer, a senior CQL developer and Ryan Petrick, CQL’s UX Design Director to gather some insights.

CQL: Why is Apple Pay important for ecommerce business?

Ryan: Conversions! As ecommerce designers, we are always working on ways to reduce the 25% of users who abandon carts due to complex checkouts. And the numbers are even worse on mobile where conversion rates drop by over 70%. By allowing an e-shopper to bypass the checkout forms (bill to, ship to, credit card authorizations) … abandoned carts will be reduced.

Chris: Transaction security is another important benefit to using Apple Pay, both from the stand point of the business and the consumer. Because Apple Pay depends on both your phone and either your PIN or your fingerprint, it provides the protection of two-factor authentication in a consumer-friendly way. Additionally, the consumer’s bank/credit card details are an extra step removed from the retailers.

CQL: In October of 2014 Apple’s CEO Tim Cook declared 2015 the ‘Year of Apple Pay.’ While we all knew that was optimistic; why now?

Ryan: Apple Pay’s adoption is growing because the ‘one-finger purchase’ is coming of age with wearables and handheld devices leading the way. Today, this surge is being fueled by new Mac OS Sierra and iOS allows you to unify all of your shopping on desktop, mobile and watches.

CQL: Don’t you think it’s partly because of the cool factor?

Ryan: In full disclosure, I’ve been referred to as being a ‘Mac fan-boy’ in the office… probably because I’ve been the one that waited in line for a phone or woke up at 3 am on a launch day to place an order for a watch.

But yes, it is enticing to pay with a simple fingerprint. It’s so futuristic… and it’s happening now. I even bought a pair of shoes the other day… with my watch.

Said another way, Apple Pay has made it a bit too easy to purchase things you need and possibly things you don’t need!

CQL: So we have seen Apple Pay at the cash registers around town, but now on websites? How does that work?

Ryan: With the launch of new Mac OS Sierra and iOS, shoppers have unified the way to check-out for shopping, desktop, mobile and wearable. Here is how it works:

CQL: Any tips on implementing Apple Pay on Salesforce Commerce Cloud?

Chris: For the backend integration, Salesforce’s Commerce Cloud team has done a lot to simplify the process, especially if you are already signed up with a handful of payment providers with whom the Commerce Cloud team partners (e.g. Worldpay, Adyen, and CyberSource). A very basic implementation of Apple Pay can actually be done with little to no coding in these situations – The platform/service can even inject the button itself on the cart page and handles the full flow. A more advanced implementation can be added relatively easily to include some of the missing features like server-side address and contact detail validation. 

Ryan: Our user experience team is always thinking about the number of clicks and time it takes to get through a traditional checkout. When customers move through the various steps such as: Add to cart, view cart, proceed to checkout, shipping, billing, confirm- they have a lot of time to think about that purchase.

We are designing more one-page checkouts and traditional 3-steps are going to be a thing of the past. Apple Pay is the natural progression of the simplified checkout. By adding the option for Apple Pay, users no longer have to fill-out forms or scramble in their wallet to get a credit card out. It has all that information from when you first set up Apple Pay.

When designing the experience, we want Apple Pay represented anywhere you have ‘Add to cart’ or ‘Checkout’, Product Detail Pages (PDP), Quick-views, Shopping Cart, etc.

And really keeping it foremost on mobile is critical because that is where the big problem exists. The fact that it does not currently work in Chrome, Firefox and IE makes this more of a mobile strategy right now. For those browsers, we simply ensure that users will not see the button.

One item to note is that Apple’s 2016 guidelines are pretty new and you will actually find that the Apple Store does not completely comply with them yet. 

CQL: Conclusion

As we let Chris and Ryan get back to their 70 global sites before the holiday code-freeze, we wanted you to consider a few trends:

  • The 2015 holiday season showed mobile shopping bigger than ever, with 45% increase in mobile traffic and 82% increase in conversions. We can expect that the 2016 holiday season will continue this trend.
  • With retailers seeing $18 billion in shopping cart abandonment, it’s easy to see why any smart strategy to conversions, security and mobile is worth the investment.

Sign up for our blog and we will let you know more about Apple Pay, Salesforce Commerce Cloud and ecommerce strategies.

Stay Informed

Stay up to date on the latest in technology, strategy and design.

Toddler Explains the Future of Web Applications Toddler Explains the Future of Web Applications

Toddler Explains the Future of Web Applications

Technology, Experience Design, User Experience, UX & UI, Web Applications ,

My son, Emmett, is the catalyst for my inspiration. Solving our customers’ problems start with interactions and this time it just happens to be watching Emmett play with his trains.

Let’s put Spotify on pause for a minute and regroup around the point that it wasn’t until recently that a user’s experience was considered when developing web applications.

Sound a little foreign today? Maybe, but please bear with me.

In a Not-So-Distant-Past, the Question the Tech Community Pondered Was: ‘Can We Do It?’

Said another way, in the past, we asked ourselves can we build something that solves the problem in front of us? Thanks to the rapid advance of technology, we no longer have to wonder about the possibilities. If we can land a rocket falling from space on a floating barge in the middle of the ocean – we can do anything.

Today, the question has shifted to ‘Can our user leverage this application with little or no training to solve their problem?’ If the answer is yes, we, the software community believe ourselves to be successful. (Queue the soft music as we put our feet up in the evenings…)

But Yesterday’s Innovation Is Quickly Replaced by the Good Thinking of Today.

Yes, our expectation that users deserve a great experience is important, but it is not enough today. We have seen too many instances where UX on the web does not take it far enough. Cost, performance and security are often sacrificed.  

With today’s technology – we truly can have our proverbial cake and eat it too. We do this by decoupling the user’s interface (UI) from the backend services (BackEnd). While separating the UI and BackEnd is not a new concept, native mobile applications (iOS & Android) have always done so. It has been less prevalent in web applications. The tech community has typically shied away from ‘decoupling’ for an easier ‘hybrid’ approach because of the perceived complexity.  (see example #3 below)

So Here Is Where the Train Metaphor Comes In…

When I think of decoupling, I can’t help but think of train cars. As it turns out, train cars are a great analogy (and this isn’t just because I have a 1 1/2 year old). And let’s say you have a bunch of people that need to get from Grand Rapids to Chicago ASAP. And you also have a few thousand tons of logs that need to get from said cities. You have a few options given to you in the form of a story problem:

Option #1: You can throw ‘performance’ out the window and take everyone/everything at once. You would do this by connecting up 4 or 5 ‘working’ train engines to the passenger cars and the logging cars and take everyone/everything for a long meandering ride along the coast of Lake Michigan. Arguably still a great experience – it’s a beautiful ride.

Option #2: You can throw ‘security’ out the window and take everyone/everything at once. You would do this by connecting up a few ‘bullet’ train engines to both the passenger cars and the logging cars. While the chances of you getting there fast are good, you may also find your ride ends in a catastrophic way. Pulling a couple thousand tons of logs at a bullet train speed isn’t exactly ‘secure’. Bad vibes here.

Option #3: One could separate the two loads. Send the ‘working’ engines down the line first with the logging cars. Then send the bullet train with passengers down the line. The bullet train would zip along and catch up to the logging train. The passengers would again enjoy a long meandering ride down the coast. Only now we sent more engines and burned more fuel. Our only benefits being the bullet train departed later, saving folks a few minutes along the way.

Option #4: You could separate the two loads. Send the bullet train out ahead carrying the passengers for a safe, yet quick, ride down the beautiful coast. By decoupling the train cars, you also enable the ‘working’ engines to pull the logging cars to the same destination, arriving a few hours later, nice and secure.

It sounds like option #4 is a solid choice. Have we reached an agreement?

Technology now allows us to decouple the UI and attach it to a bullet train. That bullet train is called a Content Delivery Network (CDN). The CDN is designed specifically to deliver web content (images, videos, etc.) at the speed of a bullet. < Picturing this in my mind is so satisfying… The CDN is so focused on performance that engineers build them to cache data on servers geographically located close to their intended audience. Decoupling the UI allows the backend to utilize ‘working’ servers that provide all the necessary power and security to process and store business critical and sensitive information.

Thank you for thinking this exercise through with me; funny how that’s my day job.

Stay Informed

Stay up to date on the latest in technology, strategy and design.

Scarab Jet Boats – Launching a New Website and Some Unexpected Screams Scarab Jet Boats – Launching a New Website and Some Unexpected Screams

Scarab Jet Boats – Launching a New Website and Some Unexpected Screams

Digital Marketing, Ecommerce Platforms, Experience Design, UX & UI ,

As part of the CQL’s digital commerce team that helped re-launch Scarab Jet, I remembered Scarab from the Miami Vice days in the 1980’s, a prominent offering in the Wellcraft Brand. I could almost see Don Johnson sporting his wayfarers speeding on the ocean when I had an opportunity to visit one of the original boats earlier this month at the Miami International Boat Show. The boat was a magnificent paint swirl of teal and purple and just looked F-A-S-T.

But after my first Miami ride in the Jet-powered Scarab I must admit, embarrassingly so, I let out a couple screams of joy with the hairpin turns and I might have unwittingly have helped sell a couple of boats with my unbridled excitement…

The Michigan based team of Recreational Boat Holdings have had the vision to re-launch Scarab Jet boats since 2013, however the implementation of these plans started in earnest over the past six months. CQL’s goals in helping the Scarab Jet team was to help Rec Boat envision the direction for where they wanted to take the new Scarab Jet site (with a focus on Lead Generation for dealers, as well as a reduction in PPC and other digital marketing costs) mixed with a User Experience that would separate them from their competitors and show excitement for this classic Brand. This has been accomplished with the launch of

After pouring over digital and lifestyle images for months, I can tell you these new boats have an aggressive look: bold colors, fresh styling, and a heavy dose of seating for friends that is all standard. If you did not know, this new line of boats is coupled with a Rotax® jet propulsion engine. Yes, I said Jet. Go fast, Go really fast. (And when you get close to the shore, it won’t suck up sand and debris.)

Besides creating a wake that allows you to surf behind the boat, Scarab Jet boats have fun-inspiring add-ons like amazing sound systems and wakeboard holders. There is nothing lacking for a day on the water.

Working with the Scarab Marketing team for the last six months, I learned that the Rotax’s® award-winning iST (Intelligent Shift and Throttle) technology brings confidence of electronic shifting and throttle control to boating.

But that was what I learned on paper.

What I experienced on a test drive in Miami is the boat’s ability to rotate 360 degrees without throwing passengers around and that the interior is designed by boaters for boaters. No detail is missed. This means even a novice can dock a boat with confidence and your fellow boaters will enjoy all the moments for days.

I have to admit after months of seeing all the features in spreadsheets, I didn’t know what I was in for when I was offered a ride on the new 255 Wake Edition. As we made our way out of the marina and into smooth water, we were told to ‘Stop taking videos…’ and ‘…hold on.’

We didn’t take the Scarab Jet driver seriously, so he sent a more direct command. We listened and we are thankful that we smartened up (One of us surely would have been overboard as we hit maximum speed in seconds flat). We easily climbed to 52 mph and the boat didn’t miss a beat. The ride felt like a roller coaster and combined with water and sun, it was pretty hard to beat.

Who knew jet-boating was so exciting!

And of course, the CQL team likes fast too – even if it is only on the ecommerce systems we build. The rich, video-enhanced site loads in under 2.5 seconds and the page views and visit times have doubled in just a week since it launched.

It appears that future Scarab Jet boaters are ready for the same exhilaration that we experienced in Miami as they have built 853 of their own versions (in just a few days) on the CQL-designed Build-a-Boat feature.

Is it summer yet? I am really looking forward to the coming months where I can try my hand at wakesurfing.

I have to admit, when you get to help legendary brands bring their passion to the web, it is as exciting as a ride in a Scarab Jet boat.

Based on what we are seeing from the response to the new website, I am not alone.

Explore the new Scarab Jet website at and visit them at a boat show close to you. Get onboard and experience it on the water.

You’ll be a raving fan too.

Stay Informed

Stay up to date on the latest in technology, strategy and design.