UX Design

Project Overview

A new supermarket chain is coming to Brazil. The supermarket’s core business is technology and innovation, but it is concerned with the social impact that the automation of checkouts will bring to the business. In addition, it has as one of its pillars the issue of accessibility.Based on these details, this work aims to present a final solution for making purchases, taking into account the scenario mentioned above. In other words, the project aims to propose or suggest, through a Design process, a final solution to make purchases, whether at automated teller machines, on the website, in the application, or whatever the application, solution, or platform, taking into account the client’s concern with the social impact scenario.

My Contributions

UX Consultant, Interface Designer, Experience Strategist, Researcher, Stakeholder Manager, Team Coordinator.

UX Process

First of all, for my proposal, I only had 15 days to design a solution. From contextualizing, planning research, interviewing, creating a survey, analyzing data, designing wireframe, style guide, prototype, usability testing and finally making a presentation. It was 15 long and intense days, but very productive.

1. Immersion


Imagine embarking on a new project, a blank canvas just waiting to be filled. The very first step we take is akin to a quest for understanding – who is our user? What struggles do they face? What are their needs and desires? These are not just questions; they are guiding stars, forming the constellation of our project design and development pathway.

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 ( 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.
Desk Research
The first step is aimed at understanding the context of the product and fostering empathy. To achieve this, it was necessary to analyze the available data on the internet, devise the appropriate research strategy, and create preliminary personas of the target user. During this phase, we first considered the basic accessibility rules for mobile applications:

– 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.

Competitor Analysis

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.

To gauge the level of interest among internet users regarding these companies, I referred to Google Trends. According to the data, iFood appears to be the most prominent, followed by Rappi. Cornershop and James Delivery occupy the same position in terms of user interest. Interestingly, it is unfortunate to observe that none of these platforms are fully accessible.

Define Assumptions

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:

UX Metrics

Metrics are numerical indicators collected through data analysis that serve to evaluate various aspects, ranging from customer attraction and product relevance to revenue generation.

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
During this phase, I took into account the key points and assumptions identified during the empathy stage of the problem-solving process. The interviews were designed to capture both quantitative and qualitative data.

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.

2. Ideation

Personas are documents that depict fictional individuals based on the survey results obtained from real users. As mentioned earlier, several disabled users were interviewed in this case. However, the project received only a limited number of responses from the questionnaire. It was discovered that there exists an invisible barrier between disabled and non-disabled individuals, which often makes disabled individuals hesitant to participate in research like this. This hesitation is likely fueled by the significant amount of prejudice they face in their daily lives.

Nevertheless, from this exercise, the following conclusion was reached:

Empathy Map

An empathy map is a collaborative tool that teams can utilize to develop a deeper understanding of their customers. Similar to a user persona, an empathy map can represent a specific group of users, such as a customer segment. In this case, I opted to consolidate all the personas onto a single map, incorporating the comments and perceptions of each individual profile. Each persona is identified by a specific color. For instance, Marcos Lima’s quotes and comments are represented by the color green, Helena Ferreira by red, and Eder Caminha by yellow.

User Flow

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.

3. Prototyping


Wireframes are basic sketches of product screens, typically representing website and/or application interfaces. Their purpose is to validate and structure ideas, which is why colors, fonts, icons, and images are often not included. In this exercise, several important aspects were taken into account when creating the wireframes.

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.

Hi-fi Prototype

A high-fidelity (hi-fi) prototype is an interactive representation of the product, specifically in this case, a mobile application. It closely resembles the final design in terms of both details and functionality. During this stage, not only was the prototype developed, but also the components and styles were considered. These include aspects such as color schemes, typography, icons, buttons, input fields, headers, lists, and more.

4. Design

Usability Test

The usability test was conducted on a small scale, involving only two participants. The main objective was to validate the information and interface in order to enhance the overall usability of the application and ensure a pleasant user experience. The test flow, as outlined earlier (from the Splash Screen to the Payment and Order Accepted Screen), was designed to facilitate a successful test.

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.

Style Guide

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.