Designing for Accessibility: A Case Study in Digital Product Development

1 month ago
Designing for Accessibility: A Case Study in Digital Product Development Image

Boulder CO—Good Nutrition Inc. & InspiringApps Partnership Creates an Accessible Meal-Planning App

Meal-planning apps present unique accessibility challenges for users with disabilities. Ensuring apps are designed with accessibility in mind is not only the ethical and legal responsibility of brands—it also makes good business sense.

“Accessibility has a clear ROI. With accessible apps, you attract a larger user base.” 
—CLARA BEAR, IOS ENGINEER, INSPIRINGAPPS

The Good Nutrition Ideas app, My Meals, My Way, stands out in the saturated market of food and calorie tracking by focusing on enabling users to become their own nutritionists. Applying a science-backed, fun “plug and play” approach, it offers personalized meal planning for individual health management.

A person stands in a grocery store aisle, looking at their smartphone while holding it with both hands. Shelves stocked with various products are visible in the background.

Client Background

The client, Good Nutrition Ideas, is a nonprofit organization committed to promoting healthy lifestyles. Their mission is to empower people with disabilities and older adults with nutritional support needs. The mobile app My Meals, My Way was created in collaboration with InspiringApps to aid in this mission, streamlining meal planning and responding directly to diverse and complex dietary needs.

Project Goals & Challenges

The primary objective of this project was to create a digital platform that makes meal planning accessible to everyone, including users with disabilities. Embracing WCAG, W3C, and Apple Accessibility for Developers, the team followed a strict and comprehensive list of standards, which included the POUR principles:

  • Perceivable: Information is presented in multiple ways (for example, text descriptions for images, captions, good color contrast).
  • Operable: Users can navigate and interact with the app using various methods (e.g., clear structure, descriptive links, and keyboard accessibility).
  • Understandable: The app’s interface and content are easy to comprehend (in other words, clear instructions, consistent design, and plain language).
  • Robust: It is compatible with various assistive technologies and user needs (e.g., descriptive metadata and accessibility testing).

A key challenge involved structuring the founders’ extensive knowledge of food types and meal portions into a back-end data system that could be translated into a clear and accessible UI for users with assistive technologies.

Design & Development Process

The InspiringApps team—comprised of development, design, and project management professionals—worked hand-in-hand with Good Nutrition Ideas to bring the My Meals, My Way app to life. The success of our development process was driven by weekly check-ins with the client from start to completion, with design and development teams working closely together. The team used wireframes early on and conducted regular accessibility audits of the codebase and user interface, using cutting-edge Apple tools to ensure a comprehensive, efficient, and repeatable testing process.

The app’s development was characterized by its iterative nature, allowing for ongoing improvements. Key questions were addressed throughout, such as the design and development approach stressing a user-focused methodology and regular pivot points to integrate feedback, including accessibility feedback.

A three-panel graphic detailing

Inclusive Design Features

The app development and design were driven by a commitment to both accessibility and user feedback. Inclusive features include:

  • Custom Profiles: Users can create profiles unique to their dietary and eating needs, which adds a sense of personalization.
  • Animated Tutorial Videos: Embedded videos guide users through using parts of the app. They include AI-generated voiceovers and captions for added accessibility.
  • Dynamic Type: Compatible fonts and scalable UI elements give users the ability to set preferred reading sizes.
  • Text Descriptions & Captions: All images include text descriptions for users with visual impairments, while closed captions and transcripts accompany video content.
  • High Color Contrast: Additional tones have been added for higher color contrast, in case a user has that accessibility setting turned on their native phone.
  • Operable Navigation: The app features a clear structure with headings and descriptive links and is fully navigable via keyboard inputs.
  • Intuitive User Experience: The app is crafted to be understandable, with clear directions, consistent design, and plain language throughout the platform.

“The content presented in the app is highly dependent on the user’s unique profile and needs, and there are clear actions that are suggested based on the time of day. I also implemented animated tutorials that guide the user on how to use certain parts of the app. So the storytelling piece is brought into that as well.”
—BECCA COLLINS, UI/UX DESIGNER, INSPIRINGAPPS

Rigorous Accessibility Testing

To ensure the app’s accessibility for all users, the team employed a comprehensive testing approach that combined automated tools, accessibility audits, user feedback, and quality assurance (QA) across multiple platforms and teams.

A woman and a man with Down syndrome wearing aprons stand together in a kitchen, smiling and looking at a tray with various bread items. The man holds a knife, ready to cut the bread.

Results & Impact

Empowering users to take control of their dietary needs, My Meals, My Way concentrates on nurturing self-sufficiency in nutrition and fostering support systems by enabling users to effortlessly share their dietary plans with caregivers, enhancing compliance and enjoyment of meals. Currently available for iOS and iPad devices, My Meals, My Way extends its reach with a free month trial, encouraging users to experience comprehensive support for healthy living first-hand.

“Working with the InspiringApps team of designers and developers was an excellent first app experience for us. They were already familiar with accessibility issues in apps and app development, and they continued to learn and deliver on this app directed at people with disabilities. We anticipate working with them again, which is the best recommendation there is!”
—GOOD NUTRITION, INC.

The app’s development was partly supported by a notable grant from the National Institute on Disability, Independent Living, and Rehabilitation Research (NIDILRR), underscoring its commitment to accessibility and empowerment for individuals with disabilities.

Get the App

Improve your health and quality of life by simplifying healthy, balanced eating with My Meals, My Way. Download My Meals, My Way here, on the App Store.

Your app is our mission.

Are you a startup or non-profit organization interested in building exceptional digital projects? IA Commits offers an option to have your project completed onshore at a reduced price. Create a prototype to gather feedback from users about your next big idea. Improve the communities in which we work and live. Pair our talent with your mission.
Recent Posts

Digital Product Design

How To Use Color To Improve Usability

Color is the most impactful creative element when it comes to visual design, and experienced designers know that they can use color to improve usability of digital products. Since users intuit much of the visual experience, effective color implementation can not only set the tone emotionally, but also helpfully guide interactions with the product. In our previous post, The Importance of Color in Design, we looked at the basics of color theory. Initial color decisions made up front can set the overall feeling and influence users within seconds of engaging with the product. In this post, we will build upon our knowledge of color theory, and look at some specific ways to use color to improve usability of the interface and positively impact user experience. Use Color To Draw Attention to Key Content Color can be used to clearly communicate and establish the hierarchy of the information presented. By giving prominence to the most important elements, you can lead the user to interact intuitively with the information in a desired order, even after just a quick scan. Introducing high-contrast colors to a product’s design can help signify key content or elements that are important, and draw the user’s eye to that information. High-contrast refers to the difference or range of bright and dark tones between two colors, with the greatest example being white and black. Colors that are across from each other on the color wheel, known as complementary colors, are high in contrast. Analogous colors, such as red and orange, will tend to have a much smaller, more limited range of tones, or low-contrast. Low-contrast colors can sometimes look muddled, and can certainly be more difficult for users to read. Indeed, readability is a vital component of the user experience, so its important to use text with a high-contrast against its background. This very simple example shows the difference between high and low contrast colors. While the low contrast “TEXT” is still readable, the eye is first drawn to the high contrast presentation. Use Color To Improve Accessibility Good design always seeks to create products that can be used by as many people as possible, including those with disability. Accessible design specifically considers users with physical limitations, and results in products that can be enjoyed independently by those users. In the area of color, designers of digital products can expect that they will have some users with common color-blindness or another color vision deficiency. Accessibility practices would have designers implement high-contrast color decisions, as discussed above. But additionally, designers can pair color with visual clues like shapes and fills, using both together to improve usability. In the example below, the icons on the left do not follow accessibility guidelines, because the icons all have the same level of contrast, which is problematic for those who cannot see color difference. The examples on the right show alternate ways in which this UI could be more accessible. In the top example, the biker icon has a higher contrast to show it is selected. The additional examples below have additional UI elements that help denote the difference of selection. Sites like Colorable and Contrast Ratio allow designers to quickly test a range of color pairings for contrast accessibility. Additionally, sites like Vischeck, Colorblind Web Page Filter, and Coblis can show designers how users with different types of color blindness will see a design. Use Color To Influence Decisions Related to contrast, color vibrance is another way that color can impact usability and positively aid users. Bright colors tend draw the user’s attention, and will typically be used on the UI elements most users will want to select, while colors with less vibrance can be used to signal a less common reaction. The example below is a commonly implemented UI/UX pattern. The vibrant purple button stands out more than the color-less gray button. Further, it conveys a “clickable” feeling, while the gray button denotes an almost disabled state. Designers can create intuitive experiences for their users by anticipating their desired actions and making those elements clear with effective vibrance. Of course, making design decisions like this need to be done with care. As we discussed in our post on Dark UX Design, similar choices could be made to trick users into doing something they might not want to do, but which benefit the business in question. Use Color To Improve Usability In summary, color is a powerful asset in the designer’s toolbox, and designers should thoughtfully use color to impact usability. Color sets an emotional tone and guides the user’s eyes as s/he interacts with a digital product. Rightly used, it can make a product more accessible to all users, enabling them to intuitively interact and easily benefit from the product’s features. We’d love to put our expertise in color and design to work for you. Contact us if you have an app idea that you’d like to explore.

3 years ago

Digital Product Development

App Accessibility: Valuable for All Apps

App accessibility refers to the concept of building an app in such a way that it is usable by people with the widest possible range of abilities, including those who are living with disabilities. While the ADA’s Web Content Accessibility Guidelines (WCAG) doesn’t have a separate rulebook for mobile apps, it’s still the gold standard for making them accessible. Even from a pragmatic perspective, one billion people, or 15% of the world’s population, experience some form of disability, so overlooking app accessibility reduces your potential user base significantly. What makes an app accessible? The first step in making an app accessible for everyone is creating a clean, intuitive design that users of different abilities can easily navigate. If your interface isn’t easy for people who have no impairments to use, it will be even more of a struggle for people who do.  But we must also consciously design for different types of disabilities. There are various potential impairments to consider, and each will impact how users interact with an app differently. Your user profiles should consider this. Visual For example, visual impairments, ranging from color blindness to low visual acuity and blindness, affect how users perceive an app’s color scheme, font size, and contrast settings, making it difficult to see what the app is displaying. The ability to change the display settings or navigate the app using text-to-speech technology will enable visually impaired users who would not otherwise be able to interact with the app. Hearing Hearing-impaired users need alternatives to audio-only features. Features such as video subtitles, increased volume, and the ability to mute ambient sound help hearing-impaired users interact with an app. Movement Movement impairments may increase the difficulty users experience when interacting with small touch targets. Increasing the touch target size allows tolerance for error and reduces frustration for many users. Alternately, instead of battling the touch screen, some users choose to navigate the app using voice commands. Such users benefit from explicit labeling conventions for user inputs and an intuitive layout to easily command their way through the app. In addition to the design features, clear instructions users can read, watch, or listen to will broaden an app’s reach and allow users to engage in a way that is most useful for them. What does accessibility look like in practice? App accessibility in practice is about including everyone. Advancements in technology are rapidly enabling even more inclusive design. Many apps are being built with features that make them usable by everyone, regardless of ability. This is equally as important as creating specialized apps for people with disabilities. “From mobile banking to staying connected, there are so many essential things you simply can’t do without a phone these days. As designers, we are responsible for ensuring our apps are fully accessible so no one is excluded from these critical aspects of daily life.” —BECCA COLLINS, UI/UX DESIGNER, INSPIRINGAPPS Example: Empath We improved visual accessibility for users of the Empath app, an app built to enable people to share their feelings in a safe environment. Empath features a feed where users post and read updates about how others are doing. The initial build of the app was not dynamic, and all users were forced to read the smaller fonts typically displayed. To broaden app accessibility, we implemented Apple’s Dynamic Type in critical parts of the app. Dynamic Type allows users to indicate their preferred reading size (within a range). Apps that support Dynamic Type then adjust to the preferred reading size automatically. This feature benefits people with disabilities and those who require larger print as they age. Adding Dynamic Type was not simply a developer effort but also a design one—our designers had to consider ways other elements on the screen would dynamically change so that the app looked beautiful and functioned well, regardless of what size type was employed. Example: My Meals My Way Good Nutrition Ideas collaborated with InspiringApps to develop the My Meals My Way mobile app, which simplifies meal planning for individuals with disabilities and older adults. Users can create unique profiles, build meals based on their needs, and share both meals and shopping lists with caregivers. The app strongly emphasizes accessibility in several ways, including: Profile building based on the user’s dietary and eating needs Ensuring high color contrast Providing text descriptions and captions for images Embedded app tutorial videos with voiceover and captions Accessibility labeling of interactive elements to support Voice Control navigation Dynamic Type compatible fonts and scalable UI elements that give users the ability to set preferred reading sizes Offering an intuitive user experience with clear directions and consistent design throughout the platform Building an inclusive experience was our goal. Accessibility audits, user feedback, and best practices guided every decision in content, design, and development. What resources exist to develop accessible apps? Making your app accessible doesn’t have to be expensive or time-consuming. Here are some free resources to streamline the process and ensure you reach the widest possible audience. POUR Principles The Web Content Accessibility Guidelines (WCAG) are an international set of guidelines developed by the World Wide Web Consortium (W3C), the web’s governing body. These guidelines, which form the basis of most web accessibility laws worldwide, are based on the “POUR” principles: Perceivable, Operable, Understandable, and Robust. The POUR principles make it easy to remember the guidelines for creating an accessible app: Perceivable: Information should be presented in multiple ways, such as providing text descriptions for images, using captions, and ensuring good color contrast. Operable: Users should have the ability to navigate and interact with the app using various methods. Think clear structure, descriptive links, and keyboard accessibility. Understandable: The app’s interface and content should be easy to comprehend. In other words, provide clear instructions, consistent design, and plain language. Robust: The app must support various assistive technologies and user needs by including descriptive metadata and conducting accessibility testing. The Web Accessibility Initiative (WAI) provides extensive information on accessibility best practices and guidelines, including a free course on making digital technology accessible and detailed documentation on mobile accessibility mapping. Apple & Google Accessibility Standards Both iOS and Android also offer complete accessibility guidelines, as well as several phone-based features for mobile developers to employ. Some highlights: Apple’s VoiceOver. Developers can integrate VoiceOver in an app to change how the system interprets taps and swipes, augmenting usability for the visually impaired. The Accessibility Inspector for iOS runs through the app to find common accessibility issues and provides a live preview of all accessibility elements within the app. Google’s TalkBack is a built-in screen reader for Android devices. When TalkBack is on, users can interact with their devices without seeing the screen. Switch Access from Google lets motor-impaired users interact with Android devices using a switch (like an external keyboard or buttons) instead of the touch screen. Beyond what we’ve mentioned, there is a whole world of features that can make your app truly inclusive. The good news is that new tools are constantly emerging to empower even more users. Accessibility Benefits Everyone The benefits of accessibility extend far beyond those with disabilities. Consider these everyday situations: Busy morning commute? Voice commands let users navigate hands-free. In a noisy environment? Subtitles ensure users don’t miss a beat. Is sunshine making your screen glare? Increased font size offers a comfortable reading experience. The truth is that features designed for accessibility make your app more user-friendly for everyone. This translates to a wider audience, a better user experience, and a more successful app. The more people who can easily access, navigate, and engage with an app, the more successful it will be. Ready to make your app accessible? We’re here to help! Contact us to discuss how to easily integrate accessibility features into your app.

7 years ago

Blog Categories
App Marketing
Business & Strategy
Client Projects
Culture & Innovation
Digital Product Design
Digital Product Development
Digital Products
Events
InspiringApps News
Mobile Industry
Technology
Webinars