Neomarket
UX/UI Design
NeoMarket: Ease of Purchase
To revolutionize the supermarket shopping experience by creating an accessible, user-friendly solution that addresses both technological innovation and social impact concerns.
In this intensive 15-day UX project, I focused on developing an innovative shopping solution for NeoMarket, a new supermarket chain in Brazil.
Through thorough market analysis, customer interviews, and strategic collaboration, I identified key accessibility needs and technological opportunities. By leveraging augmented reality and advanced technologies, I created a seamless and intuitive shopping experience.
The result was a comprehensive, user-centered solution that not only enhanced the shopping experience but also addressed the social impact of automation, making shopping more accessible and inclusive for all users.
Client
None
Role
Senior UX/UI Designer
duration
15 days (2020)
location
Brazil (Remote)
Skills
User Research, Data Analysis and Synthesis, Prototyping and Testing, Strategic Planning and Execution.
Challenge
A new supermarket chain is coming to Brazil. The supermarket's core business is technology and innovation, but it is concerned about the social impact that the automation of checkouts will bring to the business. Additionally, one of its pillars is accessibility.
Based on these details, this work aims to present a final solution for making purchases, considering the mentioned scenario. In other words, the project aims to propose or suggest, through a Design process, a final solution to facilitate purchases—whether at automated teller machines, on the website, in the application, or any other platform—taking into account the client's concern with the social impact scenario.
Proposal
UX Process
First of all, I only had 15 days to design a solution by contextualizing, planning research, interviewing, creating a survey, analyzing data, designing wireframes, style guides, prototypes, usability testing, and finally making a presentation. It was 15 long and intense days but very productive.
My strategy was to consider the following aspects:
- Idealize a digital product, a mobile application, taking into account accessibility aspects.
- Create a simple and intuitive way to shop in a supermarket online without leaving home.
- Implement augmented reality to view the price of products so the user does not need to look for a barcode reader in the supermarket.
- Allow users to add the values of the chosen products through a calculator with augmented reality.
- Enable users to prepare a shopping list (by voice, if desired) and save it for when they go to the supermarket in person, or for online shopping later, check their saved items, choose the supermarket, and shop.
- Implement cameras and sensors to eliminate checkout lines. When the shopping cart passes through these cameras and sensors, a system will automatically add the values and display them on a monitor for quick payment.
Methodology
01. Immersion
Context
As a fundamental part of every project, the first step was to understand who the user of this product is, what their pains and complaints are, what concepts will guide the project, and how the project will develop. These were some of the questions considered at the beginning of this project.
Accessibility involves a wide range of disabilities, including:
- Visual
- Hearing
- Physical
- Speech
- Cognitive
- Language
- Learning
- Neurological
There are guidelines, known as Web Content Accessibility Guidelines (WCAG), which ensure access to all. They consist of 78 criteria that guarantee digital content for everyone, accessible on various devices, including computers, cell phones, and televisions.
WCAG is organized by the W3C (World Wide Web Consortium), the leading internet standardization organization globally. For each guideline, testable success criteria are provided to allow WCAG 2.0 to be used where requirements and compliance testing are needed. Three levels of compliance are defined: A (lowest), AA, and AAA (highest).
Real Cases
Testing the position of a person with cognitive impairment, for example, can show that they may not leave the screen if they do not have a clock-keeping time. People with epilepsy or autism can experience seizures depending on the colors used on the screen. The screen cannot be small for those who have difficulty seeing. Leaving only the option to call available is not good for those who are hearing impaired. These are some observed cases.
Currently, the market offers some solutions that help in the development of digital products, such as:
- Contrast-Ratio, which helps to see if the colors have an interesting contrast for the screens.
- Color Contrast Check, a tool that lets you specify foreground and background colors to determine if they provide enough contrast.
- Funkify (https://www.funkify.org/), a tool that offers cognition, dyslexia, motor, and vision simulators.
Desk Research
The first step is understanding the product context and fostering empathy. This required analyzing available data on the internet, devising the appropriate research strategy, and creating preliminary personas of the target user. We considered the basic accessibility rules for mobile applications:
- Reflect on how the application could be used by someone with special needs.
- Ensure clickable areas are at least 48x48 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.
- 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) mandating digital accessibility, more than 14 million active portals in the country have structural issues that hinder navigation. Companies that overlook accessibility might be losing potential customers, as 45.6 million Brazilians have some type of disability, representing 24% of the population.
In the field of supermarket retail, there is an interesting initiative by Skol, which developed a shopping cart prototype to help people with visual impairments. Additionally, the project "Acesso para Todos" (https://www.acessoparatodos.com.br/quemsomos.php) aims to create a more human, creative, innovative, and inclusive web. Its mission is to develop visually attractive, functional, and accessible web environments for all audiences.
Competitor Analysis
Several potential similar products were considered, including Cornershop, Rappi, and James. Although iFood primarily revolves around food delivery, it has been actively developing features to cater to the supermarket sector. According to Google Trends, iFood appears to be the most prominent, followed by Rappi, with Cornershop and James Delivery occupying the same position in user interest. Unfortunately, none of these platforms are fully accessible.
Define Assumptions
This exercise seeks to start the project with three fundamental questions:
- What is already known about it? (Certainties)
- What are the possibilities or what do you think you know? (Assumptions)
- What questions can be asked? (Doubts)
This tool serves as a starting point, enhancing the process and streamlining decision-making.
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.
For this project, some metrics considered were:
- Performance metrics: Conversion Rate; Purchases by Period; Average ticket; Acquisition Cost (CAC); Lifetime Value (LTV).
- Baseline metrics: Abandon Rate; Top Keywords (SEO); Recommendation Effectiveness Rate.
- Behavior metrics: Internal search and Search Terms; Flow Analysis with Google Analytics.
Interview with Users
02. Ideation
Personas
Personas are documents that depict fictional individuals based on the survey results obtained from real users. Several disabled users were interviewed, but the project received a limited number of responses from the questionnaire.
Empathy Map
An empathy map is a collaborative tool that the team can use to gain deeper insight into their customers. Similar to a user persona, an empathy map can represent a group of users, such as a segment of customers. Here, I chose to place all my personas on the same map, incorporating every comment and perception of each profile drawn. Each color identifies a persona. For example, green represents Marcos Limas' quotes and comments, red for Helena Ferreira, and yellow for Eder Caminha.
User Flow
For the user flow, the flow of the ideal scenario (Happy Day) was considered. This included interactions from the Splash Screen (Brand Animation), progressing through Login and Password, Onboarding, Welcome, Store Search, Chosen Store, Chosen Products, Products Added to Cart, Order Completed, and Payment.
During the prototyping phase, additional flows were designed beyond those presented initially. These included Access to the Accessibility Bar, Search with Reader, and Access to Settings.
To better understand the flow, access the link below, browse each card, and click the expand button to display more information.
03. Prototyping
Wireframe
Are simple sketches of product screens, typically representing website and/or application interfaces. Their focus is to validate and structure ideas, so colors, fonts, icons, and images are often omitted. For this exercise, several important aspects were considered in creating wireframes: firstly, the flow imagined from the insights collected during the research, and secondly, the accessibility rules previously presented.
It's important to note that as you progress from drawing a flow to creating wireframes and then high-fidelity prototypes, the understanding of the project expands significantly. In the wireframe stage, the design prioritized the information on the screen, ensuring simplicity and clarity to make it accessible and understandable for people with disabilities. This approach also maintained the functionality envisioned at the beginning of the product ideation.
Hi-fi Prototype
A high-fidelity prototype is an interactive representation of the product, based in this case on a mobile application. This prototype closely resembles the final design in terms of details and functionality. At this stage, in addition to developing the prototype, careful consideration was given to the components and styles including color, typography, icons, buttons, inputs, headers, lists, and more.
04. Design
Usbaility Test
This step was carried out on a very limited scale, involving just two people. The aim was to validate the information and interface to improve the overall usability of the application and provide a pleasant user experience. The test flow, as presented earlier (from the Splash Screen to the Payment and Order Accepted Screen), was designed to ensure the test's success.
A brief script was devised, following these guidelines:
- Introduction: Explanation and contextualization of the test, followed by presenting the consent form.
- Brief interview: Asking questions to the participant.
- Performance of activities: Carrying out activities described in the script.
The parameters evaluated were:
- Activities: Brief descriptions of each task.
- Success: 0 = Not completed; 1 = Completed with difficulty or help; 2 = Completed easily.
- Completion time: Document the time in minutes after recording.
- Number of errors: Document the number of errors the participant made after recording.
- Observations: Note why the user was successful or not.
- Inconsistencies: Identify wrong paths, confusing page layouts, navigation issues, terminology problems, information issues, adaptation problems, layout issues, aesthetic problems, and textual problems.
Style Guide
To proceed with the high-fidelity prototype, I defined a style guide to ensure the development team maintained a consistent design pattern during implementation.
Conclusions
The final stage involved passing the ideas to the development team so they could code the final product. This collaborative process required extensive communication between teams. With this handoff, the project reached its conclusion.
Reflecting on the project, if I had more time, I would focus on enhancing research and testing strategies. Investing additional time in these areas would undoubtedly increase the project's success with its users. It's crucial to emphasize the importance of tactical research (understanding how users actually use the product) and post-launch research (using analytics, A/B testing, and frequent feedback collection).
From a personal perspective, the most valuable aspect of this project was not just the results but the opportunity to develop empathy for such a relevant issue today. Creating an affectionate connection with people with disabilities and understanding their traumas, pain, fears, and frustrations was both exciting and engaging. This was, without a doubt, the best experience I gained in these fifteen days.
Other Projects
Magalu Cloud
Leading a multifaceted team to design, develop, and launch foundational cloud services and a corporate website, setting new standards in the Brazilian tech sector.
Global Personal Care Cosmetics Group
A 15-month UX overhaul for a global cosmetic leader, focusing on user-centered solutions, aligning stakeholders, and addressing key pain points for a seamless digital experience.
Lenovo
A 24-month UX initiative to transform Lenovo’s diagnostic tool, addressing global usability challenges, integrating new technologies, and ensuring a user-centric, culturally sensitive design.
