Now, let’s delve into a central pillar of our design ethos – accessibility. Imagine a kaleidoscope, each color representing a different form of disability: visual, hearing, physical, speech, cognitive, language, learning, and neurological. Each color, unique and vital, paints a fuller picture of the diverse user experiences we need to consider.
To ensure that our digital canvas is inclusive to all these colors, we turn to a painter’s guide – the Web Content Accessibility Guidelines (WCAG). It defines 78 criteria to ensure digital inclusivity across devices, be it computers, smartphones, or even television sets.
WCAG is a creation of the World Wide Web Consortium (W3C), a globally recognized authority dedicated to creating standards for a more inclusive internet. This guide is also versatile, providing testable success criteria, which are useful for compliance testing in design specifications, procurement, regulations, and contractual agreements. It even accounts for varying requirements by offering three levels of compliance: A (lowest), AA, and AAA (highest).
To better illustrate this, let’s look at some real-world cases. Imagine a user with cognitive impairment – without a visible clock on the screen, they might lose track of time and become disoriented. Or consider those with epilepsy or autism, who could experience seizures due to certain on-screen color combinations. A small screen can be a struggle for users with visual impairments, while a call-only option could exclude those with hearing impairments. These are just some of the myriad scenarios we bear in mind when crafting user experiences.
Fortunately, the market provides several tools to aid in our quest for digital inclusivity. Contrast-Ratio, for example, assesses color contrast for screen readability. Color Contrast Check tests whether a chosen foreground and background color offer enough contrast for users with color vision deficiency or for viewing on a black and white screen. Funkify (https://www.funkify.org/) offers a suite of simulators to mimic cognition, dyslexia, motor, and vision impairments, helping us to step into the shoes of our diverse user base.
Ultimately, our goal is to create digital products that everyone can enjoy and use with ease. By placing empathy at the heart of our design philosophy, we can make the digital world a more inclusive and accessible place for all.
– Reflect on how the application could be used by someone with special needs. Take into consideration aspects such as absence of sound or color, the application being used with a high contrast mode activated, or with the screen maximized or zoomed-in. Think about usage with a screen-reader (a software application that converts text into synthesized speech, enabling the user to listen to rather than read the internet content), voice controls only, or a combination of the various conditions mentioned above.
– Ensure clickable areas are at least 48×48 pixels.
– Keep the application readable even with large text.
– Use a sufficient contrast ratio between the background color and the text color.
– Avoid relying solely on color to convey information.- Implement standard interface controls.
– Always pair audio notifications with visual cues.
– Allow the application’s appearance to be changed by system accessibility settings.
According to Revista Galileu, fewer than 1% of Brazilian websites are accessible to people with disabilities. Despite the existence of a law (Brazilian Inclusion Law – LBI) that mandates digital accessibility, more than 14 million active portals in the country have structural issues that hinder navigation. Interestingly, companies that overlook accessibility might be losing potential customers. As per the IBGE, 45.6 million Brazilians have some type of disability, representing 24% of the population.
As we developed a system overnight for the Health Department of the state of Ceará, we were simultaneously developing other interfaces related to the maintenance of the School and the Unified Health System. These interfaces were designed for Telehealth, where doctors were consulted via video conference to meet the demands of the Unified Health System through telemedicine.
I have considered several potential similar products that operate within the digital grocery shopping solution space. Specifically, these include Cornershop, Rappi, and James. I also analyzed iFood, although its primary function revolves around food delivery rather than specifically targeting the supermarket sector. It is worth noting that iFood has been actively developing features to cater to this demand.
This exercise (CAD) aims to initiate the project by addressing three fundamental questions:
– “What is already known about it?” (Certainties)
– “What are the possibilities or what do you believe you know?” (Assumptions)
– “What questions can be raised?” (Doubts)
This tool serves as a starting point, facilitating the process and expediting decision-making. The outcome of this exercise is depicted in the image provided below:
These metrics provide context and insight into the progress towards project goals or even the overall business objectives. By analyzing the numbers, it becomes possible to determine the current status and the path to follow for further improvement. In essence, metrics offer a means to measure the outcomes of strategies in quantifiable terms, revealing what has been effective, what hasn’t, and what can be enhanced. They can assess everything from customer attraction and product relevance to the company’s profitability.
For this project, the following metrics have been considered:
– Performance Metrics: These metrics are directly related to the business and are crucial for assessing the viability and profitability of the product. They include metrics such as conversion rate, purchases by period, average ticket, acquisition cost (CAC), and lifetime value (LTV).
– Baseline Metrics: These metrics serve as a benchmark and allow for comparison with data from previous periods. They provide visibility into any deviations from previous or expected behaviors (particularly useful for products without reference metrics). Baseline metrics may include metrics like visits, engagement, sessions, dwell time, and bounce rate. Other examples could be the abandon rate, top keywords for SEO, and recommendation effectiveness rate.
– Behavior Metrics: These metrics focus on understanding user interactions with the interface and how they utilize the product. They can measure navigation patterns, user interactions, and the effectiveness of different flows and components. Examples of behavior metrics include internal search and search terms analysis, as well as flow analysis using tools like Google Analytics.
Interview with Users
Three individuals with disabilities were interviewed, consisting of two individuals with hearing impairments and one with mobility challenges. However, a significant portion of the insights were derived from online sources, particularly YouTube, which provided a wealth of information (videos) for gaining a better understanding of these disabilities.
Nevertheless, from this exercise, the following conclusion was reached:
When designing the user flow, we considered the ideal scenario, referred to as “Happy Day.” This flow encompasses the following interactions: starting from the Splash Screen (Brand Animation), moving through Login and Password, Onboarding, Welcome, Store Search, Selecting a Store, Choosing Products, Adding Products to the Cart, Completing the Order, and making the Payment.
Additionally, during the prototyping phase, we explored other flows, including Access to the Accessibility bar, Search with Reader functionality, and Access to Settings.
To gain a better understanding of the user flow, please access the link provided below. You can navigate through each card and click the expand button to view more detailed information.
Firstly, the flow was imagined based on the insights gathered during the research phase. Secondly, accessibility rules, which have already been presented, played a crucial role in the wireframe creation process.
It is worth noting that as you progress from wireframes to high-fidelity prototypes, the understanding of the design expands. In the wireframe stage, the focus was on presenting information on the screen in a clear and accessible manner, prioritizing simplicity. The wireframes aimed to ensure that the design would be accessible and easily understandable for individuals with disabilities, aligning with the initial product ideation regarding functionality.
If you have any further texts or questions, please feel free to share them with me.
A concise script was prepared, which included the following guidelines:
1. Introduction: An explanation and contextualization of the test, along with the presentation of the consent form.
2. Brief Interview: A period dedicated to asking questions and gathering insights from the participant.
3. Task Performance: Participants were assigned activities described in the script and asked to complete them.
The following parameters were evaluated:
– Activities: A brief description of each task.
– Success: Scored as 0 = Not completed, 1 = Completed with difficulty or assistance, 2 = Completed easily.
– Completion Time: The time taken to complete each task, recorded in minutes.
– Number of Errors: The number of errors made by the participant, documented after recording.
– Observations: Noting why the user was successful or faced difficulties.
– Inconsistencies: Identifying issues such as incorrect paths, confusing page layouts, navigation problems, terminology concerns, information problems, adaptation issues, layout concerns, aesthetic problems, and textual problems.
In order to ensure consistency and a unified design pattern during the implementation of the high-fidelity prototype, a style guide was created. This guide serves as a reference for the development team, providing them with clear guidelines for maintaining a cohesive visual style throughout the product.
The style guide includes specifications for various design elements, such as:
– Color Palette: Defining the primary and secondary colors to be used in the interface.
– Typography: Identifying the fonts, font sizes, and font weights for headings, body text, and other textual elements.Icons: Determining the set of icons to be used and their corresponding styles.
– Buttons: Describing the design and behavior of buttons, including different states like hover and pressed.
– Inputs: Defining the visual appearance and behavior of input fields and form elements.
– Headers: Outlining the structure and styling of headers and navigation elements.
– Lists: Specifying the layout and formatting of lists and item elements.
Note: By establishing a comprehensive style guide, the development team can ensure that the design implementation remains consistent and aligned with the desired visual identity of the product.
This stage marks the transition of ideas to the development team for the coding and implementation of the final product. It is a collaborative process that relies heavily on effective communication between teams. With this, the project comes to a conclusion.
If there were additional time available, an area that would benefit from further improvement is the allocation of more time towards research and testing strategies. By investing more time in these areas, the project could potentially achieve even greater success when it reaches the hands of its users. This entails emphasizing the importance of conducting tactical research to understand how users interact with the product, as well as investing in post-launch research through the use of analytics, A/B testing, and soliciting feedback from users.
In terms of personal growth and learning, what I found most captivating about this project was not just the results presented here, but primarily the opportunity to develop empathy towards a topic that holds great significance in today’s world. Building an understanding of the struggles, pains, fears, and frustrations faced by people with disabilities was incredibly meaningful and engaging. Undoubtedly, this has been the most rewarding experience for me during these fifteen days.