AyA Mobile App — Redesign Case Study
A UX/UI redesign proposal for the AyA mobile application — Costa Rica's national water and sewage utility. The project focused on reducing friction in the payment flow, improving information accessibility, and rebuilding user trust through a cleaner, more intuitive interface.
Project Context
AyA (Instituto Costarricense de Acueductos y Alcantarillados) serves millions of users across Costa Rica. Their mobile app had become a source of frustration — users struggled with a disorganized navigation structure, an unreliable payment flow, and language that felt inaccessible, especially for elderly and rural users.
This redesign proposal was developed as a personal project to practice UX research and end-to-end product design. The goal was not just to make the interface look better, but to solve real usability problems identified through user interviews and qualitative analysis.
Complex and unintuitive navigation
The main menu buried essential features — like bill payment — inside multiple nested screens. First-time users frequently gave up before completing a payment, and returning users still reported confusion on each visit.
An unreliable and slow payment process
The payment flow required too many steps and often failed mid-transaction without a clear error message. This caused users to distrust the app and prefer in-person payment — defeating the purpose of the digital service.
Inaccessible language and visual design
The app used technical water-utility jargon without explanation. Icons were inconsistent, text was small, and there was no visual hierarchy guiding users toward the actions they needed to complete. Elderly users and those in rural areas were disproportionately affected.
Usability challenges
Users described the navigation as disorienting, often resorting to trial and error to find basic features. Important functions like bill payment were buried in complex menus, leading to missed payments and service disruptions.
Information accessibility
Participants — particularly older users and those in rural areas — requested simpler language, larger text, and clearer visual cues. The app assumed a level of technical familiarity that its actual user base did not have.
Trust and transparency
Repeated payment errors and a lack of real-time feedback eroded user confidence. Users reported feeling unsure whether their payment had gone through, and had no way to verify transaction status without calling customer service.
This was the app’s original design
Design Process
For this project, we applied the Design Thinking methodology. This user-centered, iterative approach allows us to deeply understand and address user needs, validating our solutions at each stage.
Empathy
We engaged directly with users to gain authentic insights into their needs, frustrations, and preferences.
Define
We identified and clearly outlined user challenges to focus the design on resolving their specific pain points.
Ideate
We generated creative solutions tailored to address user concerns and improve their experience.
Prototype
We built early versions of our solution, testing both functionality and user interaction with the new design.
Test
We refined our design based on user feedback to maximize usability and alignment with user expectations.
Home
The home screen features a clean, simple layout with clearly organized options for bills, reports, and promotions. A personalized greeting enhances user connection and trust, making navigation straightforward and intuitive.
Online Payments
The online payment screen is designed for quick, easy use, displaying essential details like service number, name, and bill amount. This layout ensures users can confirm information quickly, enhancing security and transparency in the payment process.
Service Points
In the service points section, users can quickly locate nearby offices by selecting their province and canton. Clear information and location icons improve navigation and trust in service accessibility.
In this section you can find extra information with more details about the materials we used in this project.
Conclusions
During testing, users reported that the new interface was more intuitive, and the updated icons and color scheme made the app visually appealing. Additionally, the online payment feature was considered highly useful and a necessary improvement.
This feedback has validated our design approach and confirmed that the redesigned AyA app effectively meets user needs for accessibility, usability, and reliability.
Related Articles
Stay in touch
If you'd like to know about my work and projects, send me an email.
