Knowledge Base Article

Writing an Effective Knowledge Base Article

Writing an Effective Knowledge Base Article

Writing an Effective Knowledge Base Article

Find yourself answering the same questions all the time? Consider creating a knowledge base.

A knowledge base is a self-serve center where customers can find information about your product or service. It is a database of articles that answer questions, teach customers, and provide tips. When done right, it can decrease calls to customer support, improve customer satisfaction, and even increase customer retention.

You may be thinking that knowledge bases are exclusive to big companies, but that’s not true. In fact, a knowledge base can benefit smaller companies even more since they may not have the resources to spend on 24/7 customer support or live chat. Besides, a study found that 67% of consumers prefer self-service over speaking to a company representative anyways.

Writing knowledge base articles expands on the idea of FAQ pages in that it covers a wide range of topics in depth. Check out the four tips below to writing effective knowledge base articles.

Tips for Writing an Effective Knowledge Base Article

1. Choose a relevant topic

Take those questions you find yourself constantly answering and convert them into knowledge base articles. These questions may include how customers can change their billing information or how they can add a video to their landing page.

Dedicate an article per question. When answering a question, you will most likely have other questions you can answer in the same article. Rather than bundling that information in one long article, create a new one and link to it. Customers visit your knowledge base with a specific question in mind—don’t slow them down by burying the answer under irrelevant information.

2. Format for scannability

Knowledge base articles should be formatted for scannability, allowing customers to find answers quickly. Below are a few ways you can develop scannable content:

  • Choose the appropriate format: Certain knowledge base articles may be answered in a short paragraph while others necessitate numbered lists. Once you have developed a format for a specific topic or category, stick with it. Consistent formatting helps customers find information quicker and easier.
  • Be succinct: Provide answers clearly and effectively in the least number of words. The beauty about knowledge base articles is that they don’t need to be a certain length—just enough to answer your customer’s question thoroughly.
  • Speak your customer’s language: This is especially important when writing more technical tutorials where you may be tempted to write in developer terms. Check your emails to see how customers have described their problems and incorporate those terms in your article. For terms unique to your company or industry, take the time to define those the first time you mention them in the article.
  • Include visuals: Screenshots, videos, and GIFs can enrich the learning experience for your customers. Screenshots are easy because they’re low effort and least resource-intensive. However, customers may benefit more from interactive media, such as videos and GIFs. Whichever visual you choose, always make sure it supplements the text content and does not replace it. Not everyone will wait for a video to load.

3. Test your tutorials

When writing how to tutorials, it’s important to verify the steps yourself. Aside from confirming the steps are correct, going through the tutorial yourself allows you to take screenshots along the way that can be used in the article, identify issues with the process, and generate new ideas for future articles.

4. Keep articles up-to-date

You will update the design of your website, app, or software at one point or another. Maybe it’s moving a button or a brand refresh—either way, update your knowledge base articles to reflect the changes. The purpose of knowledge base articles are to provide a source of truth. When articles become outdated, they become useless and customers are less likely to rely on your company for answers.

With these tips in mind, you can start building your knowledge base with helpful articles that instantly provide value to your customers. Writing the first few articles in the beginning will take some time, but it will make you and your team much more productive in the long run.

Data in Design

Using Data to Design

Using Data to Design

Using Data to Design

Do you often use your gut feeling when it comes to making decisions? Ever catch yourself believing that a particular button color will convert users into leads? Instead of relying on your gut feeling, consider taking a data-driven approach to design.

Using data to design is an objective way to answering your questions and guiding you to the right solution. Data can eliminate assumptions and validate your decisions. At the right stage, it can even help you identify issues with the design prior to implementation—saving you from costly development rework.

Two Types of Data

There are two types of data: quantitative and qualitative. Quantitative data are measurable metrics, such as pageview count, dwell time, and conversion rate. In contrast, qualitative data are non-numerical and cannot be measured, such as observations, feelings, and opinions.

Quantitative data shows you the numbers and qualitative data tells you why. Both have their place, but the best design solutions result from both types of data. In this article, I will discuss how you can leverage data to make smarter design decisions.

How You Can Leverage Data to Inform Your Design

Persona Development

One of the first applications for using data in design is developing a persona, or a representation of your primary user. Personas are essential to the user experience design process because they remind teams to align their work for the user instead of themselves.

Where are your users located? What are your users’ motivations for turning to your product or service? How does your business fit in with their higher-level goals? Pairing demographic information from a data analytics tool with one-on-one user interviews will reveal the type of person who will be using your product or service.

Web Design

A redesign can help increase your conversion rates when done right. While you may be dreaming up a completely new design, you should first take stock of your existing content.

If you have a database, you could ask your programmer to create a client-facing page where you can filter and sort the data yourself. You might find that a majority of your images are smaller than 1200px wide. Unless you plan to obtain larger images, a design that incorporates full-width heroes may not be feasible. Taking inventory of your existing data will help you determine the layouts that can work for the redesign and, more importantly, ones that won’t.

Information Architecture

Every website will have these standard pages: Home, About, Services and/or Products, and Contact. However, websites with hundreds of pages, such as ecommerce and editorial sites, demand second-level and third-level navigations. Where do you even begin to decide which pages to include?

Taking a look into your data analytics tool, you can sort pages by pageview count and bounce rate. If you have a search bar on your website, pulling up the top search terms may show you the pages most important to your users that they cannot easily find from your navigation.

Site Structure

Data analytics tools will show you your top pages, but it won’t tell you how to organize them. Should “refrigerator” be under the Kitchen category, or would it make more sense under Appliances? Conducting a card sorting exercise with your users can help you make that call.

During a card sorting exercise, you write down one term or topic per card. Once there’s a card for every term, users organize those cards into groups that they label. For a navigation, those group labels can serve as your categories and the cards under those categories are the pages you would include.

Content Strategy

All too often, marketing websites are filled with business jargon that no one else outside of the company or a marketing department would understand. When your copy does not resonate with your users, they won’t know what you’re selling.

Talking to your customer support or sales team will help you determine the terms your target audience use to describe your product or service. This data can contribute to higher converting landing pages, clearer labels, and helpful tooltips.

Design Priorities

Why are your users dropping off? Why do they keep asking the same question? Developing a customer journey map will help you identify areas of friction.

Customer journey maps illustrate the steps your users take to complete a task. For each step, you also include the emotion your user may be experiencing. The result of this data surfaces missed opportunities and a direction for where your efforts should be focused on next.

Data-driven design keeps your gut feeling in check, frees your work from bias, and produces results that better serve your users. When working with data, there’s always the potential to skew it, so remember to avoid leading questions during user research and to extract insights that will only guide you to build better user experiences.

Improve Your Website’s UX

11 Ways to Improve Your Website’s User Experience

11 Ways to Improve Your Website’s User Experience

11 Ways to Improve Your Website’s User Experience

If designing a website weren’t difficult enough, then designing a website that looks good and is easy to use might prove to be even more challenging. Fortunately, there are several ways to instantly improve your website’s user experience. Below are 11 UX tips for your next website redesign ranked from quickest to hardest to implement.

11 Actionable UX Tips for Your Website

1. Review your content

Read the content on your website. Does it make sense? Are you using industry or (worse) internal jargon the average user wouldn’t know? Make sure your content is easy to understand for your users. This begins with using terms they use to describe the services or products you offer.

2. Use headings and chunk content

Break up your content with headings and visuals. Blocks of text are uninviting and reduce readability. Using headings to divide your content into digestible chunks not only caters to users who skim, but those headings are also great for SEO. Images and videos are another great way to break up content so long as they are high quality and relevant.

3. Use one color for call-to-actions (CTAs)

Limit your website’s color palette to two to three colors—with the third color being your accent color that should be reserved for actions. Make your CTA buttons and links the same color to help users distinguish between clickable and static text.

4. Create contrast

Create contrast between your foreground (text) and background colors. There are other ways to make your website modern than making your content illegible. You should aim for a contrast ratio of 4.5:1 per Web Content Accessibility Guidelines (WCAG) 2.0. For more ways to make your website accessible, check out their recommendations here.

5. Have a clear navigation

Make your navigation visible and clear. Users will land on your website from various sources—from a social media post to a search engine results page. A navigation that includes the most important pages on your website helps users orient themselves, eliminating confusion. Plus, a well designed navigation can prompt them to explore your website, increasing dwell time and potential to buy.

6. Make your contact information global

Keep your contact information visible at all times. This can be quickly achieved by placing your phone number, email, and address in either the header or footer. These sections of your website are global elements that should be located in their respective areas on every page. Users may want to contact you at anytime during their experience, so make that information easily discoverable.

7. Leverage the upper right corner

Websites serve a purpose. Your users are visiting your website to complete a task whether it’s contacting you, signing up, or logging into their account. Elements in the upper right corner make for easier targets compared to elements positioned in the middle of the screen. In addition, since it’s a common design pattern, your users will know where to look to find those functions.

8. Speed up your website

Your website has three seconds to load before users leave. Compressing your images is an easy way to increase the speed of your website. My favorite tool to compress images is ImageOptim. After optimizing images for SEO in Photoshop, I drag my photos into the tool and it compresses the images while keeping the metadata intact.

Aside from image optimization, Google PageSpeed Insights is a free online tool that identifies areas of your website that could be better optimized for speed. Just enter your website’s URL and a report will be generated for you.

9. Make your website mobile responsive

There is absolutely no reason for your website to not be mobile responsive. There are frameworks that are already mobile responsive, such as Bootstrap. Content management systems, such as WordPress, also have mobile responsiveness built into their free templates. With so many devices to access your website, make sure it looks good regardless of screen size.

10. Provide system feedback

Always let your users know what’s going on. Users perform various tasks on your website, such as submitting a contact form or filtering products. They don’t know whether or not your system is registering their actions unless you tell them. Show a progress bar, loading spinner, or change in button color to reassure users their input is being recorded. Providing instant system feedback instills trust in your users, especially first-time visitors.

11. Listen to your users

Finally, one sure-fire way to make a website easy to use is by giving your users what they want. Why spend time thinking of what would improve your website’s UX when you could ask those visiting your site themselves? Ask your users for their feedback to understand what isn’t making sense to them, where they are struggling with, and how you can improve their experience. Listening to users is at the core of user experience design, and should be the first source of information before starting a redesign project.

Implementing these tips can instantly improve your website’s UX, but you shouldn’t stop here. Investing in professional UX design services can benefit you more than a faster website or longer page time—it can save you resources, development costs, and headache in the long run. If you find your users still struggling after following the above tips, it may be time to reconsider your design strategy.

Troika Dashboard

Troika Dashboard Design

UX Design / UI Design / Mobile App

Troika Dashboard Design​

Troika Dashboard

Troika is a well-known brand experience agency in Los Angeles. In my role as designer, I provided UX/UI services to support their product Fandom Connect. With some guidance from the Troika team, I designed the admin dashboard as well as the mobile mockup.

Process

  • Requirements gathering
  • Sketches
  • Wireframes
  • Prototypes

Challenge

The challenge was to create a user-friendly dashboard their clients can easily understand and use. The dashboard was to take on both the Fandom Connect and Troika branding.

Process

As with all of my projects, I first sought to understand the product’s goal. The goal was to provide clients with brand programming and content during a sports game.

Design

From there, I designed the following pages:

  • Admin dashboard
  • Admin – layout uploader
  • Admin – carousel uploader
  • Admin – menu setting
  • Admin – social uploader
  • Admin – engage uploader
  • Homepage/landing page

Admin dashboard

One of the design requirements for this product was to have a preview panel on the right side of the screen. Any changes made to the homepage (consumer-facing page) in the dashboard would be reflected in real-time in this panel.

Admin carousel uploader

I made the center of this page a drag-and-drop area, allowing users to easily upload images. They can switch between media uploaders by selecting “Images” or “Video” on the left side of the main content area.

Image Carousel Uploader

Carousel Uploader List

Admin menu setting

Pairs of upward and downward arrows allow users to move a navigation item between positions.

Admin Menu UI

Mobile mockup

Below is an example of how the final homepage would appear on mobile.

Fandom Connect Mobile

Result

The result is a simple-to-use dashboard that matches the look and feel of Fandom Connect as well as Troika’s brand. If the scope extended beyond the deliverables, I’d be interested in testing the prototypes with users and collaborating with programmers to ensure the designs are feasible.

“Rachel helped us on a project that required UX/UI expertise. Even though it was a short period of time, she understood our need, the request we were asking for in our brief, and asked great questions that helped move the design process along! She also delivered rough drafts and final edits on our timetable. It was great working with her!” – Jaja Hsu, Associate Producer

MBA Portal Design

MBA Portal Design

UX Design / UI Design / Design System

MBA Portal Design

MBA Portal Design

Due to the nature of this work, designs are not shown below.

FCTI operates a network of multi-bank ATMs (MBAs) that provide cardholders of small banks and credit unions access to their accounts. On these ATMs, partners also have the option to run campaigns or display advertisements. Creating these campaigns, however, was a manual and time-consuming process. Seeking a way to automate the campaign creation process, they hired me as their first UX/UI Designer to design the end-to-end user experience of the MBA Portal.

Process

  • Requirements gathering
  • Information architecture
  • Sketches
  • Wireframes
  • Prototypes
  • Design system

Requirements gathering

After interviewing stakeholders and internal team members, the objective of the portal boiled down to two tasks: 1) Provide users a self-serve platform to submit their campaigns and 2) Allow FCTI to review campaign submissions. The portal was to be simple and straightforward enough for their wide range of users.

Requirements Gathering

A picture worth too many words

User research and internal interviews revealed graphics to be the biggest pain point for both personas. To address this, I designed several reminders in the Content step of the multi-page campaign creation flow. Placeholders are thumbnail versions of the actual graphic size and orientation, providing a visual cue to partners. Size dimensions are explicitly written beneath each label. As an extra layer of prevention, I suggested the system reject graphics that don’t meet the dimension requirements and trigger an error message to users if unqualified graphics are still uploaded.

Wireframe Examples

Scalable design

As part of the project, I supplied a style guide for this new product. Using the marketing website as a base, I extended beyond its colors and components to develop a scalable style guide for the MBA Portal.

Scalable Design System

Result

After several sessions of usability tests and design iterations later, I delivered high-fidelity mockups of the MBA Portal. FCTI regains the hours previously lost to submitting campaigns on behalf of partners. In addition, users are given more control over the campaign creation process and have more insight on when their campaigns will be reviewed and published. The result is increased operational efficiency, higher ratio of correct graphics being submitted, and more satisfied partners.

Portal Design Result

Contact Form Design

Contact Form Redesign

UX Design / Marketing Design / WordPress

Contact Form Redesign​

Contact Form Design

I led a responsive redesign of the contact form task flow for Animal Behavior College. A major source of their student enrollments comes from users filling out the contact form. I worked with stakeholders and programmers and used user data to design their contact form process to be responsive.

Process

  • Design review
  • Stakeholder interviews
  • Conversion rate optimization
  • Wireframes
  • Content writing

Background

The process of getting their information is split into two contact forms or screens.

The process begins with the first contact form. After users fill it out, they’re taken to another page with a second contact form. Any input on this page is optional. However, as an incentive for users to submit this second form, this page says it will check whether or not there is an externship location in their area.

If the zip code is valid, they’re taken to the second (and final) Thank You page. If the zip code is invalid, users are directed to an error page where they can try again.

Contact Form Flow Chart

Challenge

An agency had previously provided desktop and mobile mockups for essentially two templates: one for the homepage and one for a content page. Also included was their redesign of the first contact form. They didn’t include annotations, so the challenge was designing contact forms and Thank You pages that were in line with their design, but also met business goals.

Process

The first step was to take their design of the first contact form and improve on it based on stakeholder preference and usability. Their design had a couple of usability issues. First, the proximity between the radio buttons was too narrow. The form displayed radio button options on a single line. Not only does this decrease the tap target size of each option, but also the burden was then on the user to accurately select his desired option on his mobile device.

The second issue were the field names. While having field names within the field makes for a shorter form and cleaner look, it can become a frustrating experience for the user. When field names are within the field where placeholder text would be, they disappear upon selection of the field. This may lead users to forget the information they should enter and potentially leave the form altogether.

Working off of the agency’s mockup, I created wireframes for the:

  • First contact form
  • Second contact form
  • First Thank You page
  • Invalid zip code page

 

First contact form

Aside from displaying the radio buttons vertically and moving the field names above the fields, I also designed one field per line as opposed to having two fields on the same line. I did this to help make filling out the fields easier for users on mobile. I also changed “What program interests you most?” to “Which program interests you most” for grammatical purposes.

Contact Form Iterations

Second contact form and first Thank You page

The existing second contact form included some text I felt were unnecessary. For example, above the fields read: “Please fill in the fields below.” Another bit of unnecessary microcopy was the “Almost Done!” text after the Country field.

I removed these from my wire and instead wrote “Meanwhile, see if we have a location near you by telling us a little more about yourself” above the second form.

From past experience with this company, I knew the original microcopy was added to get users to fill out the form, so I reworded it and placed it outside of the form on top.

I also switched the red font color to the brand’s navy blue color because users might mistake the red text for an error message.

Previous First Thank You Page

Thank You Page Design

Second Thank You page

If users enter a valid zip code into the second form, they’re directed to this page. This one needed the most improvement because it was the final page in the taskflow and a great opportunity to improve the conversion rate.

Old Second Thank You Page

The existing second Thank You page read “Congratulations! We have locations that provide hands-on training for ABC students residing in zip code _____.” Then, in red again, “Please contact us at (800) 795-3294.”

After users get to this page, they receive a call from the company. To help prepare them for the conversation, stakeholders suggested creating a list of topics users should discuss with the Admissions Counselors. They had brainstormed other ideas, but nothing was ever set in place.

I looked at their list of ideas, selected the ones I felt would be best for conversions and provide value to users, and included my own ideas. For the second Thank You page, I:

  • Wrote new copy
  • Added a click-to-call phone number
  • Made a bullet point list of topics the user should discuss
  • Selected an image
  • Added a few testimonials
  • Added social media buttons
  • Included a carousel of student images

The result was a content-rich Thank You page designed to keep the user engaged and excited about his chosen course.

New Second Thank You Page

Invalid zip code page

If users enter an invalid zip code on the second contact form, they’re directed to this page. For this wire, I edited the copy to have a warmer, human-like voice. The existing error page read: “I am sorry the zip code you have entered is not valid or is currently not in our database. Please try again.” I changed that to “Unfortunately, we don’t have externship locations for students residing in _____.” I mentioned externship locations to remind the user why he had entered his zip code in the first place.

 

Review

From my wires, the graphic designer made mockups, which we presented for review. Stakeholders preferred to preserve the colors of the original forms (i.e. yellow top bar and red button). They also wanted to keep most of the original copy on the first Thank You page and invalid zip code error page.

The second Thank You page was completely approved. However, they requested a few more changes to our mockups.

After a few iterations, we had our final designs.

Design Iterations

In the beginning of this process, I had originally suggested having an inline error message on both contact forms. Rather than the user selecting the button and then seeing error messages for either missing fields or invalid data entries afterwards, I suggested having a tooltip display during the form filling process.

This would help users fill out or correct any fields on the spot, which may reduce the time it takes for them to fill out the form. Furthermore, this feature would eliminate the need for an invalid zip code error page.

I had presented a wireframe for this tooltip as well as a video demonstrating the behavior of the tooltip to the developer and stakeholder. While the idea was approved, it didn’t make it in the final design due to programming issues.

Result

With a contact form that is responsive on all devices, users have an easier time filling out the form, which increases the potential for more enrollments.

Contact Form Responsive Design

Ecommerce Interaction Design

Epiphone Ecommerce Design

Web Design / Mobile Responsive / Landing Page

Ecommerce Web Design

Ecommerce Interaction Design

Epiphone is an American musical instrument manufacturer known for their acoustic and electric guitars. Their website was dated and due for a modern upgrade. For this ecommerce design, I focused on redesigning the ecommerce grid and product detail pages with consideration to mobile responsiveness and usability.

Process

  • Heuristic evaluation
  • Competitive analysis
  • Sketches
  • Wireframes
  • Prototypes

Filters, no fillers

An important feature of any ecommerce site is the ability to filter products to avoid decision fatigue. After reviewing Epiphone’s current products and conducting competitive analysis, I designed a filter for the ecommerce grid page. Filter options include the product type, brand, and price. Set to “Featured” products by default, the sort feature allows users to view the latest products or products in ascending or descending order of price.

Ecommerce Grid UI Design

Taking center stage

The product detail page gives each guitar the stage it demands. A bold hero sparks interest and a balance between words and imagery, modern layout, and smart use of trendy UI elements pull the user further down the page. Paragraphs accompanied with bulleted summaries aid with skimming and paginated reviews save vertical real estate.

Ecommerce Landing Page Design

Result

Modern and mobile responsive, this ecommerce design concept for Epiphone highlights the qualities of its products and makes it easier for users to find the perfect guitar for their musical needs.

How UX Can Amplify Your Digital Marketing Efforts

How UX Can Amplify Your Digital Marketing Efforts

How UX Can Amplify Your Digital Marketing Efforts

How UX Can Amplify Your Digital Marketing Efforts

Looking to boost sales? Are your digital marketing efforts not working? You may need to take a deep look at your product or service and optimize its user experience.

User experience refers to the overall experience your customer has during their interaction with your product or service. UX encompasses a person’s emotions, attitudes, and opinions about her experience using your website or app.

Web Designer vs. UX/UI Designer

Unlike a traditional web designer, a UX/UI designer identifies the problem and takes a user-centered approach to solve it. The UX design process includes: talking to customers, using research to inform decisions, testing and iterating designs, and ensuring business requirements are met and technical constraints are considered to produce a win-win solution for everyone.

What Does UX Design Have to Do With Marketing?

You might be asking, “What does UX design have to do with marketing?” It’s simple. The goal of UX design is to design products that make your customers happy. What makes them happy? Intuitive interfaces that help them accomplish their tasks. It also helps if the interface is easy on the eyes and maybe even delightful to use.

One way to think of UX is Yelp. Companies with a good Yelp rating often reflect positive user experience and, conversely, those with a bad Yelp rating reflect a negative one. No amount of marketing can turn those negative reviews into positive ones. Those customers have already had first-hand experience with a company’s offering. If that’s the case for you, it’s time to step back and understand how you can improve their experiences.

Why are your customers hesitant to purchase? What is preventing them from submitting a contact form? Getting to the root of the problem—why your customers are frustrated—will guide you to the solution. Perhaps you had too many competing CTAs on your landing page or your error messages weren’t specific enough. Listening to your customers and providing solutions to their problems set your business up for success. Designing a website, app, or product from a usability standpoint lets users know you care to address their pain points and goals and that your product or service can meet their needs.

UX Working With Marketing

Marketing is great at driving traffic to your website and conversion rate optimization (CRO) excels in closing those leads into sales, but both of these tactics end there. They don’t take into consideration what happens to users after they become customers. UX bridges this gap and delivers on what you’re promising in your marketing campaigns.

When you invest time improving the product or service you’re marketing, you’re giving a reason for your customers to talk positively about you. Given that people are 4 times more likely to buy when referred by friends, these word-of-mouth recommendations can cut your marketing spend and increase customer retention.

UX is an important part of your digital marketing strategy. Aside from creating an inherently marketable website or app, it can also positively impact the rest of your organization, including your customer service and engineering teams. Before spending another dollar on a paid ad or commercial, look internally at your product or service. It may be time for an update.

6 Signs Your Legacy System Needs Modernization

6 Signs Your Legacy System Needs Modernization

6 Signs Your Legacy System Needs Modernization

Legacy System Modernization

Company websites are often the top priority when it comes to modernizing a brand, leaving the legacy systems that support those websites behind. A legacy system is a backend interface or application that plays a critical role in day-to-day business operations. It’s often built on outdated technology with little to no consideration of user experience. They can be a custom homegrown system or a system of multiple applications.

Legacy systems pose several problems ranging from operational inefficiency to even security vulnerabilities. While your backend could get by with a repair here and there, it might make more financial sense to replace the system altogether and rebuild on a more secure and growth-driven platform instead. If you’re on the fence on whether or not your legacy system is truly in need of modernization right now, read on below.

6 Signs You Need to Modernize

1. Your development team spends more time fixing than developing

Every day seems to come with a new issue. The save function is no longer working, data goes missing, or an invoice was never sent. Your programmers should be spending more time developing new functions for your expanding business—not fixing repeat issues or those that could have been prevented with a better infrastructure.

2. Fixing one area of the application breaks another

You know there’s a problem with the underlying technology when resolving one area of the system causes the failure of a different area. Sometimes, it’s not always clear-cut that those two events are even related to each other either. Perhaps one of the applications was updated at the time or maybe hosting was the root of the issue. You start to become weary of making any fixes at all.

3. Difficult, or impossible, to implement new features

As your business grows, your strategy or offerings may change with it as well. You may want to add new functions, but are often limited by what the current technology can accommodate. At this point, you begin making compromises for what can be technically achieved while still making progress with your goals. Your legacy system is holding you back from expanding your business.

4. Special training is required

Your employees don’t understand how the system truly works. They might be wondering what an input field is asking them to enter or where to go to complete a task. Their misconceptions and lack of knowledge may cause them to make grave mistakes, costing you time and money to correct.

5. The system frequently crashes or shuts down

It’s not uncommon for the backend interface or business application to crash. Your development team have looked into it, but can’t pinpoint the root of the issue. Fortunately, the system does end up rebooting and your employees can resume their work. While the system always gets back up and running, those few seconds or minutes can greatly hinder your business and not to mention your customers’ perception of your company.

6. Workarounds are often the solution

Your employees are turning to workarounds to perform their jobs. They have stopped emailing your IT team for support because they know their priorities fall low on the list. Out of necessity, they have found ways to make the legacy system work for them—even if it’s a temporary solution. Sure, they get the job done, but these quick wins run the risk of being lost after an update or cause an issue with the code. Worst is that these employees might be teaching their coworkers these workarounds too, further spreading a nonviable solution.

There are a number of problems with legacy systems, but at the end of the day it’s up to you to decide what is best for your company. Modernizing your backend interface or business application is a major undertaking—costly at that. However, when done right, rebuilding your system for sustainable growth can also save you a lot of headaches and money in the long run.

How UX and SEO Can Work Together

How UX and SEO Can Work Together

How UX and SEO Can Work Together

How UX and SEO Can Work Together

UX and SEO Go Hand-in-Hand

User experience (UX) refers to the end-user’s emotions during the interaction with a product or service. UX design is the process of improving a website’s usability through user research, testing, and reiterating.

Search engine optimization (SEO) is also a process of improving a website, originally focusing on increasing visibility in search engines. It achieves this through on-page SEO, backlinks, and other methods. With Google’s algorithms getting smarter—RankBrain, I’m talking to you—the goal of SEO has shifted from satisfying Google bots to satisfying users.

SEO Now Focuses on UX

It can be said that the focus on UX within the SEO community began when mobile devices became a popular way of accessing the Internet. As more users turned to their phones to do a Google search, Google needed to provide faster and more mobile-friendly results. Hence, the first mobile-related ranking factor in July 2013. What better way to get publishers to adopt your idea than to make it an SEO ranking factor, right? 😉

Aside from having a mobile responsive website, there are several traditional SEO factors that involve UX. In fact, UX impacts SEO more than you might think. Poor usability, mystery meat navigation, and lack of content can hinder a website’s SEO efforts. Let’s take a look at factors that affect both UX and SEO.

Factors that Impact Both UX and SEO

Page Speed

The time it takes for a page to load affects UX and SEO. Users’ attention spans have reduced from 12 seconds to 8 seconds, and 40% of users will abandon a page if it takes more than 3 seconds to load.

For the rest of the users waiting for websites to load, they’ll be frustrated in the moment, especially when feedback is nonexistent. When users get frustrated, they’ll likely not return. The next time they search for a website that offers similar products or services, they might click on a different website in the SERPs. Thus, negatively affecting the other websites’ SEO efforts.

Page Speed Meme

There are several ways to improve a website’s page speed. One (free) tool to diagnose how Google views your page load time is PageSpeed Insights. It gives you a page speed score on both mobile and desktop along with recommendations to reduce page load time.

Minifying code bloat, enabling browser caching, and compressing images are all ways you can speed up your website. A note about images: Before you reduce their files, make sure they have optimized meta data. Fill out the title, description, and keyword fields of the image file. Save the file with a descriptive name that includes your keyword (e.g. cosmetic-dentistry.jpg). Filling out this data and saving the file with your keyword helps its discoverability in image search.

Site Structure

Site structure, or information architecture (IA), is an SEO ranking factor. A well-organized site structure with content arranged logically plus a clean global navigation to reflect that is beneficial for both users and Google.

Users depend on the navigation menu to discover and find their desired pages. Google uses the sections and sub-sections to determine the website’s theme. When organizing your pages into sections and sub-sections, use your keywords as the menu labels. If you use breadcrumbs, which you should, use your keywords as the labels as well.

Using keywords where appropriate and relevant in your navigation helps users understand the topic of a page without having to click on it. Links should explicitly describe their target pages. Having broad terms as navigation links or using “Click Here” are both examples of mystery meat navigation.

Mystery Meat Navigation

Dwell Time

Dwell time, or time spent on page, is one data-backed way to measure user engagement. Long dwell times usually indicate high engagement whereas short dwell times may mean user dissatisfaction. One way to keep users on your page is by ensuring your content is exactly what they need.

In SEO, content is king. Although content is sometimes neglected in the final product where large beautiful images are instead prioritized. Despite the rise of image-heavy web and mobile app experiences, there’s still tremendous value in having high-quality content. (I mean it is one of the three biggest SEO ranking factors.) Plus, images aren’t sufficient for those with disabilities.

When writing content, make sure you keep the scent. Write descriptive title tags and meta descriptions that include your keywords. Then, reiterate the topics of your pages by including your keywords in the page titles and/or H1 tags. Matching what users see in the SERPs to your actual page reassures users they’re on the correct page.

It’s not enough to have well written content though. Part of high-quality content is having the right typography to get the message across. Font choice, size, and color all play a critical role in the readability of content, especially on mobile screens. UX should enhance the reading experience for users.

Broken Links

No one likes using a website littered with links leading to 404 pages—not even Google. Broken links are a sure-fire way to lose users because 1) they’re not valuable to the user and 2) they can reflect negatively on your company because it shows disregard to the quality of your website.

From an SEO perspective, broken links prevent Google bots from crawling your pages. This is especially bad when your backlinks point to 404 pages. Imagine if all your hard work to get authoritative sites to link to you diminished because the wrong URL was used.

UX and SEO teams should work together to identify and resolve broken links. They should either write 301 redirects to alternative, but relevant pages, or provide a user-friendly 404 error page.

Accessibility

Bouncing off broken links, websites should be accessible to users who have disabilities and/or who depend on screen readers. Both UX and SEO teams can help those who use assistive technologies by writing descriptive title tags for links and images. They should also write descriptive alt text for images.

Title tags should describe the target pages of links and alt tags should describe images. You should include your keywords in these HTML attributes as long as they’re relevant and appropriate. Doing so provides context to screen reader users and serve as a relevancy signal to Google.

As you can see, UX and SEO are quite complementary to each other. UX depends on SEO to be visible in search engines while SEO depends on UX to retain users. Prioritizing UX and SEO in the early stages of web development can only benefit your final product. When executed flawlessly, you can have a high-performing website optimized for user satisfaction and ultimately conversions.