A person drawing interface elements using a black marker.

Better, Faster, More Inclusive: How Designing with Accessibility from the Start Can Make Your Brand’s Digital Experience Stand Out to All Users

Trying to design a great website that drives your client’s brand and delivers real marketing results often feels like threading a needle. Plus, you need to create an experience that’s truly unique and creative from a design standpoint, which only adds to a pressure-packed situation. 

With so many critical details hanging in the balance, you can’t afford to leave accessibility and performance on the back burner for any project.  Discovering a new prototype has compliance issues late in the process hurts you in the long run. Instead of preparing for launch, you’re left managing a costly and time-consuming effort to retrofit a once-promising design.

What’s most frustrating about this scenario is how easily it can be avoided. Designing with accessibility and performance as one of your top priorities is a proven way to expand your project’s audience — and prevent potential legal action. Here’s how you can approach these inextricably intertwined priorities from the very start to deliver a truly great experience for all users. 

How In-Medium Design Facilitates Better Accessibility and Performance

Testing for accessibility at the end of the design process is like an automaker launching a new model without checking it meets current safety requirements. The standards are clear and readily available. Why not take such important considerations into account much earlier?

You should evaluate your design’s success at every step of the process. Unfortunately, user interface tools like Figma and Adobe XD primarily create static and non-interactive design comps, which makes projects difficult to test. To get a clearer picture of your design and how it performs in a variety of contexts, we highly suggest adopting in-medium design processes.

Also known as low code or no code development, in-medium methodology functions like it sounds: Your designers create within the medium of the web. Instead of being limited to moving pixels around in a PDF, PNG, or a screenshot, your team is working in a browser and designing prototypes with active code.

An in-medium design approach allows you and your designers to conduct active tests on design prototypes on any platform. Your project’s component may run well on a top-of-the-line Macbook, but an in-medium design tool like Webflow also allows you to view it in action on a mobile device and check for performance degradation.

In-medium design also allows your team to better manage accessibility considerations. Though some design platforms allow for automated accessibility testing, comps that include HTML, CSS, and JavaScript can progress to live user testing.
 


Top 10 Performance and Accessibility Checkpoints to Create an Inclusive User Experience

Use this checklist to monitor common issues throughout the design process and minimize the need for a costly remediation effort further down the road.

Privacy Policy
We take your privacy seriously. We do not sell or share your data. We use it to enhance your experience with our site and to analyze the performance of our marketing efforts. To learn more, please see our full version here.
Would you like to receive Chromatic insights in your inbox? We'll occasionally send you emails about our newest content and upcoming events.

Adopting In-Medium Design Requires Managing Expectations

In-medium design allows you to gain a clearer picture of your project by allowing you to create functional prototypes. But for as much development time as these comps can save, they can’t be confused for the final product. Sometimes, in-medium design projects function so well that clients may think they’re ready to launch and get connected with Salesforce or your marketing automation platform.

In-medium design delivers instructive feedback on how well a page’s components interact and accommodate accessibility concerns. However, if your designers also begin treating the prototypes too much like a final product, your team may waste time making each site element work perfectly. Your design team must balance the components that impact site performance versus the aspects of a design that can wait for development.

By providing opportunities to actually use navigation items and other design components, in-medium design offers a clearer path toward creating more inclusive web projects. Empathizing with your users and their needs is the foundation of a successful design. Plus, your team can resolve performance or accessibility issues early from the perspective of a designer—not a developer.

In-Medium Methodology Ensures Greater Control Over Your Projects

Testing the performance and accessibility capabilities of a project built from live code has the benefit of reducing pressure on your development resources. Rather than needing to build your client’s project from scratch using a flat file, your developers start working from proven components and code.

In-medium design saves developers’ time. But it also keeps decisions about your project’s visual experience in the hands of your design team. Static comps offer a snapshot of how a project should look but they offer few insights on how components will be used. Consequently, developers often apply guesswork to ensure a design comp fits the mold for accessibility, performance, interaction, and motion.

A project created without in-medium design can lead to unhappy designers because the final products were created without their input, and consequently, they aren’t up to their standards. And, if a project fails to reach performance goals during final testing, your client will also be unhappy as delays mount to resolve potentially avoidable issues.

Designers complaining about the ways developers compromise their vision in the translation from a comp to code is almost a cliché. However, using in-medium methodology, your designers take more control over their work by working in the fold of development to create and test an interactive prototype. As a result, they have more of a say in how its problems are resolved.

Brands Should View Accessibility and Performance as Interconnected Priorities

When agencies plan inclusive digital experiences, we often fall back on the baseline standards outlined in the Web Content Accessibility Guidelines (WCAG). But accessibility hinges upon far more than a website’s content. A site’s performance is just as much of an accessibility consideration.

Unfortunately, your website’s audience will not enjoy equitable access to technology when poorly designed components lead to poor site performance. Take, for instance, users who are on a poor network, old mobile device, or assistive technology. These user groups will feel the greatest impact.

Inclusive experiences need to consider more than just physical and mental abilities: like a parent holding a child, a person walking on a sunny street, or any other external factor that impacts the experience. On a fundamental level, accessibility and performance standards should shape your final product. Otherwise, you’re building experiences that can only serve an increasingly narrow audience.

Related Posts & Presentations