The Brief

The Approach

The Results

THE BRIEF

THE APPROACH

Fixed Image Processing Bottlenecks

Because we were already in the code, both teams agreed this was a great opportunity to identify improvements to boost page performance. We found that image processing was a drag — the site previously processed images during deployment rather than processing them ahead of time on the back-end. Oomph used the JSON API Image Styles module to create image derivatives (copies) in different sizes, ultimately decreasing build times. 

Lightened the Load on the Back-End

As Oomph configured the new architecture, we scoured the site for other opportunities to reduce cruft. Additional improvements included removing deprecated code and rewriting code responsible for creating front-end pages, eliminating static queries running thousands of times during page creation. We also resized large images and configured their Drupal site to set sizing guardrails for photos their team may add in the future.

Home page weight before and after:

Page Weight	Before	After	% Change
Desktop	25.41 MB	3.61 MB	Down 85.79%
Mobile	12.07 MB	3.62 MB	Down 70.01%

Visualizing the improvements to loading speed:

THE RESULTS

THE BRIEF

THE APPROACH

Multiple color themes

Site authors choose from five color themes, each supporting light and dark mode viewing. Every theme was rigorously tested to conform with WCAG AA (and sometimes AAA), with each theme based on a palette of 27 colors (including grays) and 12 transparent colors.

User preferences

Site visitors can toggle between light or dark mode or use their own system preference, along with adjusting font sizes, line height, word spacing, and default language.

Mobile first

Knowing that many site visitors will be on mobile devices, each design component treats the mobile experience as a first-class counterpart to desktop.

Examples: The section menu sticks to the left side of the viewport for easy access within sections; Downloads are clearly labelled with file type and human-readable file sizes in case someone has an unreliable network connection; galleries appear on mobile with any text labels stacked underneath and support swipe gestures, while the desktop version layers text over images and supports keyboard navigation.

High Accessibility

Every design pattern is accessible for screen readers and mobile devices. Color contrast, keyboard navigation, semantic labelling, and alt text enforcement all contribute to a highly accessible site. Extra labels and help text have been added to add context to actions, while also following best practices for use of ARIA attributes.

Performance aware

Each page is given a performance budget, so design components are built as lightly as possible, using the least amount of code and relying on the smallest visual asset file sizes possible.

THE RESULTS

THE BRIEF

THE APPROACH

Given the challenges, our work began with a month-long discovery process, probing deeper into the audience, competitive landscape, customer journeys, and technological requirements for the platform. Here’s what we learned.

The Borrower Experience

Among those deep in the citizenship process and close to finishing the paperwork, many are simply waiting to have the funds to conclude their journey. For them, we designed as simple a workflow as possible to create an account, pass a security check, and apply for a loan.

Other users who are just starting the process need to understand whether they’re eligible for citizenship and what the process entails. We knew this would require smart, in-depth content to answer their questions and provide guidance — which was also a crucial component in earning their trust. Giving away genuinely helpful information, combined with carefully chosen language and photography, helped lend authenticity to OPA’s stated mission.

The Investor Experience

OPA sought to crowdfund capital from small investors, not institutions, creating a community-led funding source that could scale to meet borrowers’ needs. A key innovation is that funders can choose between two options: making tax-deductible donations or short-term loans.

If an investor makes a loan, at the end of the term they can decide to reinvest for another term, turn the money into a donation, or withdraw the funds. To reinforce the circular nature of the platform, we designed the experience so that borrowers could become investors themselves. The platform makes it easy for borrowers to change their intent and access different tools. Maturity dates are prominently displayed alongside “Lend Again” and “Donate” actions. Testimonials from borrowers on the dashboard reinforce the kinds of people who are helped by an investment.

The Mobile Experience

Our research made it clear the mobile experience had to be best in class, as many users would either prefer using a phone or didn’t have regular access to a tablet or computer. But, that didn’t mean creating a mobile app in addition to a desktop website. Instead, by designing a universal web app, we built a more robust experience — more powerful than most mobile apps — that can be used anywhere, on any device.

However, tasks like signing up for an account or applying for a loan need to be as easy on a mobile device as on a desktop. Key UX elements like step-by-step workflows, large touch targets, generous spacing on form fields, soft colors, and easy-to-read fonts produced a highly user-friendly interface.

THE RESULTS

Have you ever waved to someone and they didn’t wave back? Awkward, right? But are you sure they could see you and recognize you? Was the sun in their eyes? Were you too far away? Were you wearing a face mask?

There is a similar situation with your branding on your website. On a smaller mobile device, is your logo legible, or are the words shrunk down and too small? Are the colors high-contrast enough to be seen on a sunny day? Is there consistency between your social media avatar and your website, between your print materials and your digital advertising? Can customers recognize your brand wherever it might be displayed? 

For your brand to be the most successful, it takes a little extra effort to think through all of these possible scenarios. But it’s worth it, or your customers will give you the cold shoulder, whether they intended to or not. 

This extra bit of strategy and planning around your brand is called “Responsive Branding.” Just like responsive design, where your website’s content adapts to the device a customer is using, responsive branding adapts to the device, the medium, and the platform while also considering situations like low light, high light, animated, or static.

Oomph works with organizations across industries to build or refresh responsive brands that serve and delight their users across the full spectrum of digital experiences. Here’s what we’ve learned about responsive branding and our tips for creating one that works. 

What Is Responsive Branding?

Let’s first start with what you’ve probably already heard — responsive web design. Coined by Ethan Marcotte in 2010, the “responsive” part came to mean that a web design responded to the size of the screen, from a phone to a tablet to a widescreen desktop monitor. 

Then came responsive logos. These take the elements of the main logo and adapt them for different sizes and use cases. A logo might have too much detail to be legible as a small social media icon, for example.

Responsive Branding blends these ideas and looks at the design system holistically. A successful responsive brand may include:

• A logo version for different sizes and applications. Variations might include one with the tagline, one without, one with a mark and typeface, one just the name, one just the mark, the possibilities go on!
• Secondary logo options which may include abbreviations, monograms, or different combinations of the main elements
• When applicable, an internationalized version of the wordmark and tagline
• A color palette that can provide variation while addressing accessibility and situations of low light or high glare
• A fluid typography system that provides contrast between sizes within different size media (including print!)
• A fluid spacing system
• Motion when appropriate, like video intros and outtros

Why Responsive Branding Matters

Your business makes a huge investment in building a brand that stands apart from the competition while communicating your personality and value. You are building trust with customers through every interaction. When your brand works well in one situation but not another, it erodes trust. 

A strong brand will be clear, understandable, and memorable for all users in all situations. Whether you have physical locations or digital ones, the brand works with the same consistent strength and message every time.

When you invest in a responsive brand, you: 

• Make your brand more visible. More users can connect with you when you have a brand that’s both recognizable and responsive. Given that 60% of consumers are more likely to buy from a brand they recognize, the opportunity cost of not getting this right is huge. 
• Improve accessibility. Digital accessibility means people of all abilities can use your website and experience your brand. Up to 1 in 4 American adults live with a disability, so a lack of accessibility means fewer customers to reach. For visual brand elements, that means considerations for color blindness, low vision, and cognitive impairments like dyslexia. 
• Create a more consistent brand. Responsive branding equips your team with the tools to express your brand effectively across mediums. That means less time involved in building new assets and a more consistent experience that meets your users’ high expectations.

3 Elements of a Responsive Brand

A responsive brand is more than a shape-shifting logo. The most responsive brands make strategic use of these three elements: 

1. Logo

Your logo is the first piece of your brand that customers will recognize. Using a single-state logo can compromise that impression — a logo that looks great at a large scale is often unintelligible as a small icon. 

Responsive logo designs help ensure your logomark is clear and impactful no matter where you apply it. Beyond the size considerations we mentioned, it should include different formats like horizontal, vertical, and square to support many different digital, social, and print platforms. 

Some other techniques we use to create scalable logos include:

• Dropping words or lettering
• Dropping the icon or image
• Creating an abbreviation version
• Stacking the icon/image and text/lettering
• Combining separate elements into a single icon
• Simplifying details and shapes within logo marks
• Varying thickness and white space to make small logos more legible

Oomph Tip: It’s okay to take several design rounds to get it right. Iterating helps uncover where you’ll use the logo, what it must convey, and which colors and iconography can best support that purpose. We went through several design iterations with our client AskRI before settling on a bold, simple font and clear chat bubble icon that plays off the state of Rhode Island’s distinctive shape. 

Color Palette

A responsive color palette is less about picking complementary shades on a color wheel and more about creating an experience that works in all situations. People with visual impairments and people on low-lit smartphones, for example, rely on high-contrast color combinations to engage with your brand. 

Start by following the Web Content Accessibility Guidelines (WCAG), which include specific recommendations for color contrast ratios. Colors that meet that standard include light text with dark backgrounds, or vice versa. 

Depending on where your brand appears, you may need to adjust your color palette for different settings. For example, your full-color logo might look stunning against a solid white background but becomes illegible against bright or dark colors. A single color logo is useful for some digital use cases like Windows web icons and iOS Pinned Tabs. In non-digital spaces, single color logos are great when color printing isn’t an option, such as with engraving or embroidery. Build out alternate color variations where necessary to make sure your palette works with you – not against you – across your materials. 

Oomph Tip: If your brand palette is already set in stone, try playing with the brightness or saturation of the values to meet recommendations. Often your brand colors have a little wiggle room when combinations are already close to passing corformance ratios. Check out our article about this issue for more pointers.

Typography and Layouts

Responsiveness is also important to consider when structuring web pages or marketing collateral. The most legible layouts will incorporate adaptable typography with clear contrast and simple scaling. 

When selecting a font, be sure to think about: 

• Minimum legible sizes. When is small too small? It depends, of course, but don’t forget older customers, those with low vision, or those in situations that make reading more difficult. Use at least a 16px size for digital products and 12pt size for print. These might change depending on the font, but these sizes are a great place to start.
• Inclusive typefaces. Many designers overlook how understandable certain letterforms appear to be. A way to quickly review is to look at the number 1, lowercase l (L), and uppercase I (i) of any typeface. Then also look at the capital O, the zero, and the lowercase o — 1lI O0o. Can you tell the difference when these characters are out of context? If you can’t, then your customers might have trouble as well. Use your judgment, but also use this trick to expose possible problems with your communication. These five keys to accessible web typography are a great place to start. 
• Scaling ratios. Similar to a musical scale of harmonious notes, a typographic scale is a collection of font sizes that work well together. Using a typographic scale helps to make your text visually appealing and readable for different users across different devices. Some examples include exponential scales, where you multiply the previous font size by a ratio to get the next font size, and Fibonacci sequences, where you add a number from the Fibonacci set to the base font value to get a new size in the scale. 

Oomph Tip: Don’t go it alone. Tools like Typescale and Material UI’s The Type System can simplify typography selection by recommending font sets that meet usability and scalability requirements. And the U.S. Design System has some suggestions as to which typefaces are the most accessible.

How To Get Started With Responsive Branding

To create a responsive brand that resonates, you first have to identify what elements you need and why you need them. That second part is your secret sauce: finding a balance between a design your users can recognize and one that inspires them. 

A design audit can zero in on the needs of your brand and your audience, so you can create a responsive design system that meets both. Not sure where to start? Let’s talk.

In good times and bad, healthcare is deeply ingrained in our lives. From the beginning to the end, our providers monitor our growth, treat our illnesses and injuries, and keep us as healthy as possible.

But healthcare organizations can no longer take that provider-patient dynamic for granted. In the wake of the COVID-19 pandemic, more patients than ever distrust the healthcare system. The healthcare industry is also working to recover from the $206.2 billion hit it took in 2020, driven largely by forced delays in preventative care and elective surgeries.

As the healthcare sector finds its footing post-COVID, providers have a tremendous opportunity to build stronger patient relationships than ever before. In 2022, 83% of healthcare consumers said they wanted to make their health and wellness a priority again, while another 37% said they wanted to be more engaged with their healthcare. So where should providers start? With a laser focus on user experience (UX).

As telehealth and retail disrupters like CVS and Amazon gain momentum, it’s easier than ever for patients to get a flu shot or a test for strep throat – a convenience that patients love. These healthcare disruptors also have a leg up in the virtual world, since they’re powered by the modern digital platforms that patients have come to expect.

To find a way forward, traditional healthcare organizations need to focus on creating a strong UX and digital presence that can both compete with disruptors and satisfy the regulatory requirements unique to healthcare (we’re looking at you, HIPAA).

Why Your Patients Expect Better UX

Once upon a time, patients believed that doctors knew best. They went to the healthcare provider down the street and trusted that the provider had the expertise to resolve their health woes.

In 2023, patients are informed consumers. 60% of patients research online before choosing a provider, many of whom consult the healthcare organization’s website. If this isn’t reason enough to revamp your digital footprint, 40% of patients also say they prefer to book appointments online.

Together, these statistics illustrate a growing demand among patients for more robust, patient-friendly digital experiences. The issue is that this is exactly what healthcare organizations have struggled to do for years. At Oomph, some of the most common challenges we see among healthcare brands include:

• Exceptionally fragmented platforms and digital presence
• Siloed back-end systems that make it difficult to map and track patient health information (PHI)
• Complex organizational structures that inhibit quick innovation

Yet there are exciting examples of innovation across the industry, too. Forward-thinkers like the Cleveland Clinic are proof that healthcare UX can and should be innovative — largely because better digital capabilities enhance the patient experience, fueling stronger relationships that benefit providers and the patients they serve.

Our healthcare team at Oomph works with providers of all sizes to uncover digital solutions that make sense for their size and structure, budget, and patient needs. Here, Oomph UI Designer Alyssa Varsanyi shares best practices they’ve developed in partnership with our healthcare clients.

Our 4 Healthcare UX Best Practices

1. Be Accessible and Inclusive

Accessibility is non-negotiable for any digital experience. It’s even more important for provider sites, which are likely serving people with a wide range of conditions — all of whom need and deserve complete and immediate access to healthcare.

To create a healthcare UX accessible to all, healthcare organizations should:

• Follow WCAG Guidelines, including color contrast (We have a tool for this!)
• Incorporate inclusive language, including diversity, equity, and inclusion principles
• Use plain language standards, which means language that’s clear, concise, and legible for readers of all education levels

2. Create a Safe Space

In healthcare, protecting patient data is table stakes. To create a safe space, you have to think not just about patient confidentiality but also about building trust. A thoughtful digital environment with inclusive language can go a long way to helping patients feel seen, heard, and cared for.

Websites like Cedars-Sinai are a great example of how websites can be built around trust. Their platform exemplifies how language can be the foundation for a credible site, especially when paired with supportive modules like sources and testimonials.

To take the same approach to your site:

• Communicate progress: Patients want to know where they stand. Find ways to reflect the status of their care, whether that’s upcoming appointments or prescriptions in need of renewal.
• Follow conventions: Your patients aren’t visiting your site to learn something new. Keep consistent with healthcare standards and terminology so patients can easily recognize different tools and features.
• Prevent errors: Mistakes happen. Patients enter their birth date incorrectly or accidentally click the “Schedule” button before they’re ready. The best healthcare platforms both eliminate conditions that can lead to errors and add preventative steps, like prompting the patient to confirm their selection.
• Offer solutions: If and when errors occur, explain them in plain language and with a visual treatment so the patient can understand how to fix them without having to call customer support.

3. Make Navigation Easy

Many patients come to healthcare systems with an immediate need — a parent needs to find an open appointment NOW for their child’s pre-season sports physical, or a cooking enthusiast needs to locate an urgent care on a Sunday to patch up the new chopping-related cut on their hand.

In either scenario — and countless others that people face daily — it’s critical that patients can easily find the right information at the right time and in the right way.

To make this a reality, healthcare organizations should strive to:

• Consider specific users: How do they speak? What imagery resonates with them? Speaking your patients’ language will help patients move through your platforms more intuitively.
• Prioritize visibility: Patients shouldn’t have to remember where it was that they could schedule an appointment or view their records. Make important elements and actions easily and frequently accessible.
• Mirror real-world conditions: No one wants to get lost down a digital hallway. Make it simple for patients to find what they need – like bill payment – then easily return to where they started.

As technical as these tactics are, don’t forget to show empathy, too. It is possible to show compassion online, like how Stanford Health poses the question, “What can we help you find?” Emotional asks like this can illustrate an organization’s genuine desire to be helpful to their patients.

4. Build Responsive Experiences

Healthcare needs don’t wait until patients are sitting in front of their computers. Think about an adult child peeking over their senior parent’s shoulder while they search for a specialist, or a new parent scrolling through their phone at midnight while cradling their sick baby.

Now imagine those people frantically pinching at the screen so they can read the entire text block or find the right button. Stressful, right?

Patients should be able to seamlessly access healthcare anytime anywhere, which means designs must be responsive. Keep in mind:

• Device types: Designs need to render and be easy to use on all screen sizes.
• Clean designs: Focus on the most need-to-know information so the design and content don’t distract from the actions and features your patients care about. This also makes your platform more accessible on smaller screens.

What does that look like in practice? Consider the Summit Health website. Its simple navigation makes it easy for patients to find what they’re looking for, while the responsive design enables patients to engage on the go.

Healthcare UX Is a Journey, Not a Destination

At Oomph, we’ve seen firsthand how these healthcare UX best practices transformed the patient experience of our many healthcare clients. Even still, it’s important to note that UX isn’t one-size-fits-all. A national network of hospitals may need a very different digital patient experience than an owner-operated group of general practice clinics.

So how do you start building a UX that works for you and your patients? Research and testing.

UX audits, user research, and usability testing are all keys to the lock that is an effective UX strategy. By identifying what’s working and what’s not, what your patients want and what they don’t, you can put your organization on an evidence-based path to world-class UX.

Interested in exploring ways to improve UX for your own patients? We’re here to help.

THE BRIEF

THE APPROACH

The New NEEF: User-Centered Design

A Custom Site To Fuel Connection

NEEF needed a digital platform as unique as its organization, which is why Oomph ultimately delivered a suite of custom components designed to accommodate a variety of content needs.

Engaging and thoughtful design

NEEF’s new user experience is simple and streamlined. Visual cues aid in wayfinding (all Explore pages follow the same hero structure, for example), while imagery, micro-interactions (such as hover effects) and a bold color palette draw the user in. The UX also emphasizes accessibility and inclusivity; the high contrast between the font colors and the background make the website more readable for people with visual impairments, while people with different skin tones can now see themselves represented in NEEF’s new library of 100 custom icons.

Topic-based browsing

From water conservation to climate change, visitors often come to the NEEF site to learn about a specific subject. We overhauled NEEF’s existing site map to include topic-based browsing, with pages that roll resources, storytelling, and NEEF’s impact into one cohesive package. Additional links in the footer also make it easier for specific audiences to find information, such as nonprofits seeking grants or teachers looking for educational materials.

NPLD-hosted resources and event locator

Oomph refreshed existing components and added new ones to support one of NEEF’s flagship programs, National Public Lands Day (NPLD). People interested in hosting an event could use the new components to easily set one up, have their own dashboard to manage, and add their event to NEEF’s event locator. Once the event has passed, it’s automatically unlisted from the locator — but archived so hosts can duplicate and relaunch the event in future years.

THE RESULTS

THE APPROACH

THE RESULTS

Just seven weeks after project kickoff, the Catch Carbon site debuted to the public. Its launch marked a major step forward for the voluntary carbon credit market, democratizing access for consumers and setting new standards for project transparency and quality. As a member of 1% for the Planet, Oomph is personally invested in sustaining our world for generations to come – making our work with Rare especially meaningful.

In addition to bringing Rare’s bold new idea to the public quickly, we equipped the organization with a set of KPIs to measure the effectiveness of specific design choices. By understanding factors like site traffic patterns and drop-off rates, Rare can test and iterate with precision.

Climate change is an insurmountable challenge to solve alone, but together, our efforts can make a difference. The Catch Carbon marketplace brings everyday people closer to carbon reduction solutions than ever before, spurring the behavioral change that’s at the heart of Rare’s mission.

In our previous post we broadly discussed the mindset of composable business. While “composable” can be a long term company-wide strategy for the future, companies shouldn’t overlook smaller-scale opportunities that exist at every level to introduce more flexibility, longevity, and reduce costs of technology investments.

For maximum ROI, think big, then start small

Many organizations are daunted by the concept of shifting a legacy application or monolith to a microservices architecture. This is exacerbated when an application is nearing end of life.

Don’t discount the fact that a move to a microservices architecture can be done progressively over time, unlike the replatform of a monolith which is a huge investment in both time and money that may not be realized for years until the new application is ready to deploy.

A progressive approach allows organizations to:

• Move faster and allow for adjustments as needed
• Begin realizing returns on investments faster
• Reduce risk by making smaller investments and deployments
• Ease budgeting process by funding an overhaul in stages
• Improve quality by minimizing the scope of tests
• Save money on initial investment and maintenance where services are centralized
• Benefit from longevity of a component-based system

Prioritizing the approach by aligning technical architecture with business objectives

As with any application development initiative, aligning business objectives with technology decisions is essential. Unlike replatforming a monolith, however, prioritizing and planning the order of development and deployments is crucial to the success of the initiative.

Start with clearly defining your application with a requirements and feature matrix. Then evaluate each using three lenses to see priorities begin to emerge:

1. With a current state lens, evaluate each item. Is it broken? Is it costly to maintain? Is it leveraged by multiple business units or external applications?
2. Then with a future state lens, evaluate each item. Could it be significantly improved? Could it be leveraged by other business units? Could it be leveraged outside the organization (partners, etc…)? Could it be leveraged in other applications, devices, or locations?
3. Lastly, evaluate the emerging priority items with a cost and effort lense. What is the level of effort to develop the feature as a service? What is the likely duration of the effort?

Key considerations when planning a progressive approach

Planning is critical to any successful application development initiative, and architecting a microservices based architecture is no different. Be sure to consider the following key items as part of your planning exercises:

1. Remember that rearchitecting a monolith feature as a service can open the door to new opportunities and new ways of thinking. It is helpful to ask “If this feature was a stand alone service, we could __”
2. Be careful of designing services that are too big in scope. Work diligently to break down the application into the smallest possible parts, even if it is later determined that some should be grouped together
3. Keep security front of mind. Where a monolith may have allowed for a straightforward security management policy with everything under one roof, a services architecture provides the opportunity for a more customized security policy, and the need to define how separate services are allowed to communicate with each other and the outside world

In summary

A microservices architecture is an approach that can help organizations move faster, be more flexible and agile, and reduce costs on development and maintenance of software applications. By taking a progressive approach when architecting a monolith application, businesses can move quickly, reduce risk, improve quality, and reduce costs.

If you’re interested in introducing composability to your organization, we’d love to help! Contact us today to talk about your options.

“Inclusive design” may sound like vague, trendy, technical jargon. But inclusive design isn’t a trend — it’s the world catching up on the kind of digital experiences that should have been part of the web from the beginning.

Inclusive design is a crucial part of nearly every digital platform, be it website, app, or intranet.

Inclusive design as a concept and practice is broad and deep — this article barely scratches the surface, but will help you understand the mindset required. We’ll cover what it is, why it matters for your business, and some ways to assess whether your digital platform could be more inclusive.

1. What does “inclusive design” mean?
2. What are the benefits of inclusive design?
3. How are inclusive design and accessibility different?
4. How can you make your platform more inclusive?

What does “inclusive design” mean?

The Inclusive Design Research Center defines inclusive design as “design that considers the full range of human diversity with respect to ability, language, culture, gender, age and other forms of human difference.” Adding to that, Nielsen Norman calls it creating products that “understand and enable people of all backgrounds and abilities,” including economic situation, geography, race, and more.

Essentially, you’re aspiring to create interfaces that reflect how people from all walks of life interact with the world.

Inclusive design allows people to use a digital platform with ease, whatever their needs or point of view. Looking at characteristics like race, abilities, or geography helps us identify key areas where friction can occur between humans and the web.

In the end, it’s about designing for everyone.

What are the benefits of inclusive design?

Inclusive design isn’t just about recognizing and accommodating diversity; it also creates business advantages for organizations that are willing to invest in an inclusive approach. Here are a few key areas where inclusive design can give your digital platform an edge:

Grow your customer base. By understanding the best way to connect with a wider target audience, your team can create digital experiences that attract the most possible users.

Increase user engagement. Engagement goes up when platforms are welcoming and easy to use. Inclusive web design removes barriers and creates motivation for people to engage with your brand.

Spark innovation. Inclusive solutions have a history of spawning innovation that goes beyond the initial intended audience (think closed-captioning-turned-subtitles on Netflix). Sometimes, when you aim to solve a specific usability issue, you end up creating an entirely new market solution.

Motivate your team. The way a digital platform is designed affects all audiences, even employees. Designing with inclusivity in mind can also have a positive influence on your own team. Engaging employees in your efforts to build an inclusive digital platform can help create a sense of shared purpose — one many people are likely to rally around.

How are inclusive design and accessibility different?

You may have heard these terms used in similar contexts. While they overlap in meaning, they’re not the same thing.

By definition, accessibility focuses on accommodating people with varying physical and mental abilities. Accessible websites are measured by their conformance with Web Content Accessibility Guidelines, which pertain to things like auditory, cognitive, physical, and visual disabilities. Accessibility tests typically cover code-level issues that can be fixed in the source code of a site.

Inclusive design is about accommodating the entire spectrum of human diversity. It involves a variety of viewpoints, including those of people with disabilities. Inclusive solutions can involve anything from back-end coding to the way headlines are worded.

In a nutshell: An accessible site is one of the outcomes of an inclusive design, whereas inclusive design is the overall approach to creating accessibility.

Consider these examples:

• You’re filling out a form, and because you have a visual impairment, you’re using the keyboard to move through it. When you get to the end, you discover the form can’t be submitted because you left a few areas blank — even though you filled out every question asked. Turns out the keyboard had skipped past a few required fields. What a pain!
• While filling out a form, you’re asked to select your ethnicity from a list. As you read the options, you discover that yours is not listed, or that you identify with more than one. You feel like the “other,” compared to everyone else, leaving you frustrated about the task and… maybe even about the company too.

While both issues are addressed by inclusive design, the first issue relates to ability and can be fixed within the code, while the second relates to diversity and will take additional measures to address.

How Can You Make Your Platform More Inclusive?

The ethnicity example raises some interesting questions, such as:

• How do you know which ethnicities to add?
• How many do you need to account for?
• Should you just change the way the question is worded?
• Do you need to ask the question at all?

Mainly, this raises a bigger question: how do you maintain an inclusive site when there are so many important and broad variables (ability, language, culture, gender, age, etc.) — especially when that list of variables continues to grow and change?

The best way to get started is to arm yourself with knowledge and create a plan.

1. Identify the problems to solve.

Start by identifying opportunities for improvement in your current user experience (UX) by collecting quantitative and qualitative research with tools like UX audits, user interviews, user recordings, and heatmaps. Keep an eye out for areas where users seem confused, backpedal, or struggle to complete tasks. The more information you gather, the better!

2. Determine the best solutions.

Your user research will likely uncover many possible paths to change. This may include adding more categories to a list, creating an “Other” field users can type any answer into, or adding options to gather additional information.

Note: It’s common for areas that need improvement to hit on sensitive topics, things you may not fully figure out through data and research. Remember that the goal is understanding. Don’t be afraid to reach out to others for their thoughts and opinions.

3. Measure the results.

Some measures of success are easy to determine from user data in Google Analytics or changes in heatmaps and user recordings. Further data can come from users via surveys asking how your audience feels about the changes. The key is to stay continuously informed and aware of what your users are experiencing.

Note: One helpful tool for checking whether your design is, in fact, inclusive is Cards for Humanity. It offers a fun way to make sure you’re not missing anyone or anything in the spectrum of inclusivity.

Remember that the process of creating an inclusive design doesn’t end with implementation. Inclusive design is a work in progress. As a field, inclusive design is always evolving and requires continuous research to develop best practices.

We can’t predict what kind of mismatched interactions users will face in the years to come. But, with an open mind and a desire to learn and grow, we can continually adapt to meet them.

We’ve only scratched the surface of inclusive design! If you have any questions about inclusive design, we’d love to chat. Contact us anytime.