Designing for Differing Abilities
By: Alex Walker
Tags: UX Design, Web Design, Case Study, Accessibility

Inclusive, accessible design is good design.

As designers, our principal focus is creation. From the start of each project, we sit down with an understanding of our layout and a rationale for doing things a certain way. While crucial to building an application, this focus can leave us metaphorically blind to other people’s perceptions and needs. As we design, it’s easy to get caught up in the experience of creating and become less focused on the needs of every user.

A clear and satisfying user interface is one that communicates clearly and doesn’t exclude those that have different accessibility needs. The design world has made a lot of strides in working to make the web more accessible for those with a disability. But there is still a long way to go.

A recent study surveyed a million pages from 730 unique top-level domains for errors in their accessibility landmarks. They reported an average of 59.6 errors per home page, that “users with disabilities would expect to encounter software detectable errors on 1 in every 13 elements with which they engage,” and “97.8% of home pages had software detectable WCAG 2.0 Level AA non-compliance” For a more detailed summary, check out This Week in Accessibility: What we can learn from the “WebAIM Million”

The technical side of accessibility is important: Meeting ARIA landmarks, semantic header layout, and WebAIM compatibility should be the minimum website standard. A design should go beyond the technical, which makes the information accessible, and encompass a flexible experience curated to the user.

Experience design in a project should cater to both physical and mental disabilities. With machine learning, voice controls, and VR on the horizon, finding new ways to curate content to the needs of the user will become more flexible in the future. As new technology arrives, implementing inclusivity should be a part of a designer’s focus.

Design focused on inclusivity is good design. And designing for the most disadvantaged users can elevate the design experience for everyone. Clarity as a tenet of design from the ground up is one of the best ways to improve accessibility and, by extension, usability for everyone.

Now I Can is a nonprofit organization that helps children with cerebral palsy develop motor skills and massively improve their quality of life. I was working on a website redesign for them while in two relevant UVU classes: Interaction Design and Intercultural Communication, two courses that led me to think deeper about the role of accessibility in design and how it should be an integral part of the plan and implementation for every project I take on.

From the beginning, I knew the project would need to cater to, at the very least, users with motor disabilities. For a user with cerebral palsy, accessing the site would have challenges. And before the redesign, the Now I Can site had some serious usability issues.

As I first explored the existing design, the site’s oversized navigation buttons caught my eye, as they could maybe have some potential for aiding those with motor dysfunction. I went to check its accessibility ratings on https://wave.webaim.org/

Not so good.

This WAVE rating shows how accessible the site would be for someone using a screen reader or other accessibility device. Sip/puff switches and screenreaders, two common devices for accessibility, navigate based on the H1 attributes of a page. So making sure the H1 attributes are semantically laid out is important to improving the experience. Now I Can’s website had issues with this type of access overall. The navigation bar had far too many dropdown menus, which isn’t great for any user’s experience. And it was especially tedious when I attempted to perform basic operations using a screenreader.

Now I Can’s site accessibility was the focus as I started concept modeling. I put together a chart (below) to sort it all out. The main focus of the site was therapy. And the major functions the site should perform are building trust with clients and sponsors and allowing for volunteers to apply for service easily. And of course, the site has to be accessible for people with motor disabilities. On the left of the chart, I also listed certain technical tasks I wanted to be included in the course of the redesign.

With these main concepts in mind, I went to meet with Tracey, my client at Now I Can, who was excited to have me on the project. We talked over the main points of focus I had put together. We also discussed the website navigation and what we could cut from the site redesign. I’d also be putting together some print projects for her on the side, and giving Now I Can a soft logo redesign and style guides.

Now that I knew what could be cut, I put together a site map for how the user would navigate through the site. I decided to eliminate the drop-down menu mess by sorting the navigation into four simple categories: therapy, volunteering, stories, and contacts,.

With this foundation, I sketched out some rough wireframes on grid paper.

I then began to make a digital wireframe. I wanted to keep buttons big for easier access by anybody with a motor disability, a main part of the existing site that I think worked in concept. I exported a rough version to Invision, a prototyping tool to check how the site would behave on mobile.

As I moved closer to doing surface comps, I assembled the elements and fonts that I’d be using. For the logo, I fixed the stream of stars and the spacing of the letters to make it look cleaner and more symmetrical. As they also only had jpeg and png versions of their logo, I traced it and made it a scalable vector.

I wanted to do a full redesign but as the logo is featured prominently on the physical building and signage, a soft redesign fixing some of the issues of their current branding was the best option for now.

As for fonts, I chose Averia Sans for its informal handmade feel, with a solid structure for headers and the hero image. It paired well with Roboto and Roboto Slab. I used Lato for the system text, as it is highly readable. I made the buttons in the sample assets quite big to again allow those with motor disabilities to have an easier time navigating.

After brainstorming all of the components, I started wireframing the site. My main goal was to simplify the site while retaining necessary functions.

When putting together the wireframes I made sure to have a header-content layout, to make implementing accessibility features easier and more semantic. I also cut the amount of pages on the site in order to streamline a user’s path to the content they were looking for.

At this point I put together a limited function prototype with Invision for the mobile experience to check how intuitive the site was to use. It’s still available here : https://invis.io/WVQSQVD9GZK#/349929081_Landing_Page

After receiving feedback on the structure from the client and my UVU professor, I moved onto making surface comps, implementing the visual style from the wireframes.

After two rounds of revisions on the Now I Can Website, I put together a high fidelity prototype to show my client, also providing her with the style guide and an offer to assemble the site later on.

The high fidelity mobile prototype can be found here : https://projects.invisionapp.com/share/QARN7607XTF#/screens/359236131

What I learned from exploring the possibilities for a more accessible site for Now I Can Design opened my eyes to creating a better experience for online users with a variety of abilities and needs. I found that planning for access for those with disabilities in the conceptual phase can lead to a more streamlined experience for everyone. And, in the end, semantic layout is important for everyone interacting with a design. As designers wireframe the future of design, we should make it available to everyone.

Alexander Walker is a student in the Digital Media program at Utah Valley University, Orem Utah, studying Interaction & Design. The following article relates to my Final Project in the DGM 1230 Course and representative of the skills learned.