Designing a website that’s “accessible” means you’re providing an equivalent experience for all users, regardless of the physical ability an individual user may or may not have. The World Wide Web Consortium (W3C) puts it this way: “Accessibility means that people with disabilities can perceive, understand, navigate, and interact” with your website without barriers.
Who is the W3C? They’re an international non-governmental association that develops technical specifications for HTML and CSS, as well as recommendations and best practices for security, online payments, and accessibility. The W3C’s international gold standard for website accessibility rules is called the Web Content Accessibility Guidelines (WCAG).
Section 508 of The Rehabilitation Act, first adopted in 1973 and amended by Congress in 1998, requires federal agencies to make their electronic information accessible to people with disabilities. The rules were originally established in the fairly early days of the Internet, but Section 508 was modernized in 2017 to align with WCAG.
What this means in practical terms is, adhering to Section 508 for website development is synonymous with WCAG compliance. And while these standards are merely best-practice “recommendations” according to the W3C, for all U.S. government agencies — as well as for businesses and organizations that receive federal funding — these accessibility standards are requirements under Section 508.
The Americans with Disabilities Act (ADA), which became law in 1990, requires state and local governments, businesses, nonprofit organizations, and labor unions make “reasonable accommodations” for employees with disabilities. ADA is a broad law against disability discrimination that applies to agencies and organizations with 15 or more employees. While it doesn’t go into technical details about website development, Section 508, on the other hand, essentially tells employers how to comply with ADA. How so? By following the WCAG.
In addition to ADA and Section 508, there are other federal laws that touch on the subjects of website development and access to electronic information. The Connected Government Act of 2018, for example, requires all new and redesigned federal agency websites to be accessible using mobile devices.
Oregon’s Department of Administrative Services has developed a set of guidelines for usability and accessibility for state agency websites. Effective March 2017, all agency websites must:
The Web Content Accessibility Guidelines (WCAG) are separated into three levels of conformance. These roughly translate into “basic stuff” (level A), “essential stuff” (level AA), and “shootin’ for the moon stuff” (level AAA). The W3C acknowledges that AAA may be impossible to achieve, so for the most part we’ve only included rules from the first two levels here. Also, for the sake of brevity — and to prevent eyes from going crossed — we’ve omitted highly technical and fine point recommendations. (If you care to dig deeper into the geeky details, W3C has more than 1,100 technical specs.)
Here’s our quick reference checklist for developing a website that conforms to WCAG and Section 508 standards.
While accessible website design isn’t rocket surgery, it does require an approach to planning that starts at the very beginning. Done right, accessibility is woven into all phases and stages of website development: content strategy and information architecture, user experience and visual design, and programming.
Need help implementing these accessibility standards for your website? Contact Logan Hoffman at email@example.com or call 541.971.4113 ext. 711.
This article is also published on Medium.
It’s one thing to deliver an excellent student experience on campus; quite another to build an excellent website. Between us and one of our long-term clients, Colleges of Distinction, we’ve evaluated a countless number of college and university websites — the good, the bad, and everything in between.
In this article we’d like to share some of what we’ve learned, so that you can help your own higher ed website achieve excellence.
Let’s start with some of the most common issues we’ve seen in higher ed websites. Does any of this sound familiar?
No message. Many university websites lack a strong brand story. Also, they’re not sending targeted messages to defined audiences, prompting them to take specific actions.
No differentiation. What makes you different from other institutions? Whether or not you can articulate it internally, we’ve noticed many schools aren’t communicating it clearly online.
Internal focus. It’s easy to get so absorbed in the internal workings of your administration, faculty, and staff that you lose sight of what new students or donors need from your website.
Lots of sub-brands. Do you have a different microsite for each department? The ensuing chaos makes brand consistency a far-off dream — and maintaining the various logos, page templates, and back-end technologies is hard work. More importantly, an inconsistent experience for prospective students, donors, and other users can be jarring and off-putting.
Content clutter. Is your website a recruitment tool? an enrollment driver? a resource for students and faculty? … or is it a repository of all the information you’ve ever used, most of it out of date?
For every challenge, there’s a best practice to resolve it. Let’s look at a few of the most helpful rules we’ve noted from our experience.
Think strategically. A strategy is four things: a problem, a goal, a plan, and a result. Where is your website falling short? Where do you want it to be? Answer that, and you can plan a path to action.
Think like a user. Is the hierarchy of info logical? Are pages organized to meet the user’s most pressing needs first? Have you mapped the paths that users take and built a coherent journey?
Make action easy. Every call to action should be clear and convincing, and the conversion points — the places where users take those actions —should be easy to find and respond to.
Cross all those Ts. Every area of your website should be an extension of your brand. The design should be mobile-responsive, accessible from any device. It also needs to be ADA-compliant.
Establish metrics. Without a way to measure success, who’s to say if your efforts are paying off? We know it can be tricky to identify objective markers — but it can be done, and it’s essential.
When it comes to choosing an agency, there are two options: the conventional route, and the streamlined route.
Scan for strategy. Many creative professionals make beautiful work — but the point isn’t just to look pretty. It’s to accomplish the goals of your organization and meet the needs of your stakeholders. How do your candidates propose to do so? Do they have a proven process for delivering results?
Invest in discovery. Your partner should talk to internal and external stakeholders, perform a brand audit and competitive analysis, and research your history, values, goals, and competitors. Up-front research is the necessary foundation for getting started and will guide decision-making throughout the project.
Avoid death by committee. When collecting initial input, ask everyone. Make sure key stakeholders and representatives from every target audience have an opportunity to be heard. But when making decisions, establish a small, tight-knit team with the judgement to weigh conflicting perspectives and make the call.
Be bold. Today’s degree-seekers aren’t looking for the same old / same old. Don’t be afraid to look and sound different. We know standing out can be scary — but when you do, great things can happen.
The tips above may seem simple, but make no mistake: they’re game changers. After researching and auditing countless higher ed websites, we’ve seen these principles bear out over long and close observation. We hope they help you achieve excellence in your website, too.
This article is also published on Medium.
All website development projects start with questions. Lots of questions. In order to uncover unknowns and proceed with confidence, we recommend starting with a Discovery phase. Learn all about Discovery in this free, 8-page illustrated guide.
We start all new development projects with an extensive research and strategy phase called Discovery, which can save you from unexpected delays and costs by identifying challenges early, so they can be addressed. This worksheet is no replacement for a thorough Discovery, but it will streamline the start of your custom website or mobile app project by helping you organize your thoughts and needs.
Use this checklist to evaluate your website’s user experience, ADA compliance, brand consistency, and mobile responsiveness, and to start identifying its strengths and trouble spots.
When it comes to website development, there’s a big difference between using a one-size-fits-all template, and creating a multi-dimensional user experience (UX) that actually helps you achieve your business goals.
Every effective website needs a foundation. Within it, content strategy and information architecture (IA) are two essential layers. These strategic planning elements provide a home for your website’s content to live and grow and serve your organization. And content is, of course, everything.
“Your content is your website,” says Neil Patel, founder of Crazy Egg.
Here at the MAC, content strategy and IA documents are developed during an initial phase of work we call Discovery. Our research and strategy process involves several steps, typically in this order:
Before going further, let’s define the two terms central to this article.
Content strategy is a systematic way to describe your organizational goals, brand promise, and target audiences. In other words, what do you want to say, and who do you want to say it to?
It will also note which type of content is needed where — e.g. a paragraph of text, a video, a gated article, an infographic, or anything else that will tell your story and guide users along a desired path.
It may also include some preliminary keyword research to bring your content into focus with your users’ goals, baking in SEO right from the start in a way that adds value to your audience — rather than slapping it on later as an afterthought, in a way that neither users, nor search engine algorithms, appreciate. (More on content strategy elements here.)
Information architecture (IA) flows out of the content strategy. Its purpose is to concisely communicate the underlying structure and organizational hierarchy of the website.
An IA can take the form of a simple Word document outline, or it can be a more elaborate tree diagram with boxes and lines that show how a user can get from one page to another. Either way, the IA describes how the content of your website is organized in terms of pages, subpages, and sub-subpages. And — importantly — it also assigns names to identify those pages in your navigation bar.
You can think of your content strategy and IA as two sides of the same coin. Content strategy will influence IA, and visa versa. Because they directly impact one another, they should be created and refined more or less simultaneously.
A collaborative, iterative process is especially important when more than one person is developing these documents. At the MAC we’ll often have one of our content developers take the lead on the content strategy, while a UX designer will take the lead on the IA. These two individuals work closely together during the research and strategy phase, influencing one another. Out of that collaboration, we arrive at a final product that really serves the user and supports our client’s goals.
Which brings us to our next point. Content strategy and IA aren’t just a static reflection of your organization’s vision, purpose, and goals. They also empower you to develop your story and tell it in a more compelling way.
Here’s what I mean by this.
Let’s say you produce children’s toys that are handmade in Virginia from sustainably-sourced materials, and you sell your wares through an online storefront. These high-quality trains, building blocks, and puzzles are not for every parent with a two-year-old. Your target customer is someone who likes to shop at local, independently-owned stores and prefers quality over quantity. These are people who care about the environment and the way that their actions impact future generations, and they’ll pay a premium to feel good knowing their purchases are not depleting the earth’s natural resources.
Now let’s imagine how the IA and content can work together to tell a complete story on the homepage of your company’s website. The first thing visitors might see is a large photo of a bright-eyed toddler in a modern playroom, stacking a colorful wooden pyramid. Over the top of the photo are the words “She may not know it’s handmade with sustainable Virginia hardwood, but her smile says you bought the perfect gift.”Then, along the top of the page is a navigation bar with the following links: Handmade Toys for Toddlers | Green Gifts from $50 | Our Sustainability Promise.
As you can see from this example, your website’s content (photos and words) and IA (navigation labels) each have a role to play in differentiating your product and company from a thousand other online toy stores.
An alternative course of action would be to use more common terms for the IA such as: “Toy Catalog | Gifts on Sale | About us.” But these labels won’t help you differentiate from competitors, and they don’t help you tell your story. Generic terms, by definition, paint a picture that makes you look and sound like everyone else.
Upon arriving at any new website, the first question all website visitors subconsciously ask themselves is: Do I care about what I’m looking at? Yes (stay) | No (leave).
People are impatient. Especially when browsing the web. You’ve got just a few short seconds to communicate what you’re offering them — be it uncommon information, a useful new product, or a better service than that of your competitors. Good content, paired with a good IA, plays a major role in your ability to give people confidence they’re in the right place.
Unless you manufacture water or oxygen, what you offer is not for everyone. The more specific and clear you’re able to be, the more success you’ll have at attracting those who align with your mission and want what you’re selling.
This article is also published on Medium.
In the rare case, a visitor comes to your website and immediately signs up for your service or purchases your product.
In a more typical case, a visitor needs to be courted before they’re ready to commit (or in marketing jargon, “convert”).
A potential customer travels through the marketing funnel, learning more about you, engaging with your content, and determining if they’re going to purchase.
It’s your job to provide the perfect content, at the ideal time, to the right person.
This starts with a complete understanding of who that person is. At the MAC, we peel back the layers on their needs and decision making process through our Discovery method.
Armed with this research, you can accurately match the marketing funnel with your web content strategy, smoothly guiding the prospect to a decision.
This post demonstrates how to align a customer’s journey through the marketing funnel (awareness, consideration, action) with user-friendly web design and captivating content. We’ve also thrown in examples of content types to demonstrate how to implement this approach.
A lead generating website guides visitors through a specific set of pages, tied to a three-tiered funnel, leading to a desired set of outcomes.
For those of you who are visual learners, here is a helpful graphic:
Before we dive further into the funnel layers, it’s a good idea to get a grasp on what leads a visitor to convert. Key conversion factors include the website’s usability, the site’s relevance to visitors, and the ease of navigation. These are supported by content quality, reader-friendly formatting, clear calls-to-action, and simple conversion forms.
Your goal is to keep the visitor’s attention and motivate them to take the desired action. If they have to dig for an answer, they will likely move on to a different option.
Once you have your conversion factors squared away, you can fill in the marketing funnel with compelling content.
Create content to answer questions and concerns that arise at different stages of the decision making/buying process. More on this to come.
You may need to create different funnels for different target audiences or conversion goals. For example, a completed inquiry form or an actual purchase could be two types of conversions on the same website.
Additionally, the types of content you share and where it belongs in the funnel typically shifts depending on your industry and if you’re targeting businesses or consumers.
Are you starting to get the sense that this is a fluid practice? Well, you’d be spot on. It’s a choose-your-own-adventure approach, guided by your audience’s preferences.
Some examples to help clarify:
The awareness phase is where you build the connection between your brand and the topic. Your target audience has a problem and is searching for answers. You want to direct their attention to your solutions.
Content types for the top-of-the-funnel:
We took this approach with PainWise, a public awareness campaign addressing the opioid epidemic.
For the first phase of a digital marketing campaign, different messaging and imagery were used for specific audience segments. The goal here was to purely drive awareness. Clicks to the site were an added bonus and the goal of the second (consideration) phase.
REI has mastered funnel-driven content. To plug into people’s needs, they’ve produced a series of short how-to videos. These videos nudge someone closer to purchasing from them when adventure calls.
If a person has entered the middle-of-the-funnel, you’ve successfully captured their attention. The consideration phase is where you educate and engage. This is also where you typically build subscribers and followers.
Content types for the middle-of-the-funnel:
Havenly, an online interior design service, prompts visitors to take a style quiz. To view the results, the visitor completes a simple contact form with the option of booking a consultation with an interior designer.
Another example comes from Willamette Community Bank, one of our clients here at the MAC. Each product page includes a short contact form. Visitors are then contacted by a loan specialist with the intent of moving leads down the funnel.
At the action phase, leads are compelled to make a purchase decision, converting them to customers. Continuing to build trust and providing the right content can greatly impact your conversion rate.
Content types for the bottom-of-the-funnel:
Sprout Social takes a 30-day free trial approach. Teams have the opportunity to test out the social media management software, before taking the plunge.
With an in depth understanding of your audience and industry appropriate marketing funnel, you can accurately align your web content strategy to the customer journey.
To match the marketing funnel with your web content strategy:
Fine-tune this approach and you’ll improve your customer relationships and conversions.
This article is also published on Medium.
You wouldn’t launch a business without a plan. Likewise, launching a website without a strategy will leave you with a site that sends prospective customers running for the hills.
A web content strategy is essential for creating a site that helps you meet your business goals. And, your most valuable players will benefit.
The following outlines key elements of a content strategy and provides actionable steps for you to implement. If we were in math class, we’d say these are your order of operations.
Address how your website will help you achieve business goals. These site-level goals will guarantee each ensuing decision supports your organization.
Abound, a client of the MAC, provides guidance on schools across the US. Its goals include serving a previously untapped audience (adult students) and positioning themselves as a leader in the college guidance market. These goals directly dictate the site’s functionality and design.
Tied to your goals, your content mission statement steers audience-focused content.
The Content Marketing Institute offers a great template:
Abound’s content mission statement is:
Action step: Outline your goals and fill out the content mission statement template.
Knowing our audience’s needs, wants and desires is essential. This detailed understanding is key to providing them with helpful information. The more helpful you are, the more likely they are to reciprocate by subscribing/purchasing/etc.
This process, officially called persona development, is tightly woven into the MAC’s Discovery method. Asking key questions on the front-end helps ensure your audience is effectively and efficiently targeted.
Action step: Ask the audience.
The questions you ask will slightly differ depending on if you’re targeting organizations or individual consumers, but here are a few ideas to get you started:
Now that you’re in tune with your audience, how will you craft messaging to inspire action? What voice and tone will resonate?
Remember, how you speak to your customers is not necessarily how you want to be spoken to.
Action step: Create a brief guide outlining your messaging standards. Don’t pull your hair out; just jot down your approach on paper (or Google Doc) so any member of your team can write copy with your voice. MailChimp has a phenomenal example.
Before you jump into what your website will look like (don’t worry, you’ll get there), consider what features and capabilities need to be integrated. Examples include email signups, calendars, ability to buy a product or make a donation, lead capturing, and responsive display.
Going back to Abound, its site needed to house thousands of colleges and their unique offerings. The solution: a custom database enabling users to filter schools by college, program, class type, location and more.
Action step: Compile a big wish list of features. Then, prioritize the features that are most critical for when your website launches.
Don’t let the phrase “information architecture” scare you. We’re not asking you to pull out your protractor.
If it helps, think of information architecture as an outline or site map illustrating your content and navigation. You must consider your target audience, features and data comprising your website.
Gather a team of designers and content strategists for this step. If you are stuck, ask the experts.
Action step: List out all your possible pages, how they will link, and what they will be called.
Your information architecture serves as your guide for content and copywriting. So, what do you have and what will you need to create?
Take inventory of what content you have to work with. This content could live onsite or offsite.
Next, carefully audit what you’ve collected. Is this quality content? Is the messaging on-brand? Will it meet audience needs?
Action step: Review your inventory and evaluate the quality.
Now you can select appropriate topics to address customer needs and fill in content gaps.
All content topics you produce need to serve a purpose, whether it’s entertaining, informational, helpful, or some combination. This purpose should be directly tied to your marketing funnel.
For instance, an infographic linking to a landing page serves prospects at the top of the funnel or awareness phase. An informational webinar, demonstrating how you solve a problem, belongs in the middle of the funnel.
Finding the sweet spot between topic, content type, and buyer’s journey ensures your content is intentional and drives site visitors through your marketing funnel.
But how will a prospect find your content? Introducing, content hubs.
Your topics, or keywords, should form content hubs. Developing hubs means your site is meaningful for visitors and is search friendly.
Identify your key topics and affiliated keywords. Here is a SEO guide to get you started.
Plan out what types of content (landing pages, blog posts, videos, ebooks, photography, etc.) you will produce to support your topics and marketing funnel.
If needed, go back and adjust the information architecture to sync with the new content you are planning.
By now, you have a solid plan of what you will create and where it will go on your website. But, who is going to create all this wonderful, actionable content…and when?
This is where ownership comes in. Establishing ownership is essential for well-managed content that builds a strong brand image.
Web design and development is a multidisciplinary practice. Delineate who is responsible for content creation, production, distribution, and maintenance.
Establish your workflows — who is responsible for each step, and the order of those steps.
Also falling under the ownership umbrella are brand standards and messaging guides. You want your audience to know your content is your organization’s just by the way it looks or sounds.
Action step: Create two documents. One is a working document specifying your brand and messaging standards. (If you followed this outline, you should already have your messaging standards ready to go.) Another is your editorial calendar specifying what, when, where, and who.
To avoid random acts of content and a bloated website, gather your team — and web strategists — and start creating your web content strategy.
The purpose of creating a plan is to transform the experience for your team and your audience. The result: a website that helps you meet your business goals.
This article is also published on Medium.
A content strategist sits at a table with a stack of user personas, drawing bubbles on a page, mapping the information a web user is going to need, how they’re going to use it, and in what order.
A graphic designer stands at their desk, drafting content blocks on a wireframe, anticipating the needs of the user who will be visiting that page.
An interaction designer sits in traffic on their way home, thinking about what a button should do when the user clicks it, and what type of user action should make the email signup form unfold before them on the page.
All these specialists are helping to design a user experience. And while it’s easy to suppose that “design” is simply a shorthand for “graphic design,” in the case of UX, it’s so much more.
Well — in addition to being a buzzword — UX is also “an important, strategically relevant, multidisciplinary field for solving very difficult problems at the intersection of technology, spaces, the Internet and people.” (So says Trip O’Dell, product design manager at Amazon.)
Literally defined, UX is a person’s perceptions and responses from the use of a product, system, or service. That’s how the International Organization for Standardization puts it.
In less stuffy speech, user experience is “how you feel about every interaction you have with what’s in front of you in the moment you’re using it.” User Testing Blog followed that latter definition with several worthy questions:
These questions comprise a good litmus test for UX on the Internet. When creating a website, you’re aiming for “yes” all the way down the line.
According to Wikipedia, user experience design is “the process of enhancing user satisfaction with a product by improving the usability, accessibility, and pleasure provided in the interaction with the product.”
Make it fantastic, in other words. Do everything you can to wow your user on all those litmus questions above.
UX design is not a synonym for graphic design for the web. While it’s easy to assume that hey, design is design, these animals are pretty different. And in this case, that difference is pretty crucial. A graphic designer plays an important role in UX design — but there are other roles, no less important.
Truth: you can’t have peerless UX without a disarmingly attractive, elegantly simple, self-explanatory visual design.
Equally true, you can’t have great UX without an architecture that’s sensitive to a user’s needs, structuring information in a logical, comprehensible way.
Or without page layouts (wireframes) that offer the right content, in the right place, so intuitively that a user doesn’t even have to think about what they came for, because they’re already doing it.
Or without on-point messaging that appeals to the user’s immediate practical priorities and underlying emotional needs in a deeply compelling way.
Or without on-page elements — breadcrumbs, for example — that support the experience by making the website effortlessly navigable.
Or user testing to catch hangups and refine the design. Or best-practice web development to put the site on its feet and get it rolling.
In short, there’s a difference between designing a visual user interface (UI design) and designing every aspect of a multi-dimensional experience (UX design). Here’s Kyla Tom, lead graphic designer at Madison Ave. Collective, on the big picture:
“Web design … requires content development from individuals with editorial expertise, a graphic designer to really dig into the final UI design and create iconography, an interaction designer who knows exactly how smooth actions and transitions need to be, and a back-end as well as front-end developer to maintain the site and bring everything to life on screen.”
In short, UX is teamwork.
Because UX design isn’t the sole purview of any one individual — some mythical being who’s able to handle it all solo — it’s worth thinking about the various specialists involved in designing an excellent user experience, and acknowledging their role as UX designers. The magic happens at the intersection of several very different, very vital skill sets:
And it’s more than the sum of the parts. UX is strategic. It’s iterative. It’s multidisciplinary. UX design is what happens when content, graphic design, and development click. It’s the satisfaction you feel when, as a user, you land on a website and your needs are answered before you even have to ask.
That’s no buzzword. That’s an ideal worth striving for.
So, when asked what UX design is, don’t fill in the bubble next to “graphic design for the web.” Remember that on the multiple choice test, the correct answer for UX is: all of the above.
This article is also published on Medium.