[Case study]
DEX FInance mobile app & responsive web
for banco azteca, Mexico & south America
user research
product strategy
sketching
wireframing
prototyping
functional documentation
Project: Product strategy and design for a money movement mobile app in Mexico.
Over the course of 10 weeks, frog worked with Banco Azteca’s Dinero Express division to help them transform from supporting its customers in brick and mortar stores to becoming the ultimate digital money movement platform in Central America.
Google play link, Apple app store link
Process: To understand the user and market context in Mexico, we started with field research as well as stakeholder interviews. We used our learnings to define what DEX needs to be and created a product strategy based on insights from the field. Defining the product, we designed key flows of the Android app creating an agnostic design system that client used for the iOS app as well. To ensure it was built right, I provided documentation of design intent and key functionality.
My role and responsibilities: I worked closely with a creative lead, visual designers, researcher and strategist. I led the interaction design track, creating all artifacts (wireframes, flows, prototypes etc.).
My Wallet, a secure and personal digital wallet with a prominent balance, clear latest transaction info and key actions.
Product strategy: Main goal for business is attracting new types of customers. For users it’s a new way to manage money, keep it secure and accessible digitally without the need for a bank account, with the ability to send/spend it as they wish.
Target market: Growing tech savvy, young user base in Mexico and Central America. Users that are more aspirational towards digital products with frequent needs for money movement. They own at least a low-level/basic smartphone.
project highlights
1. How to be flexible in the field to get the best user insights
Before the field: As we were prepping for the field, we started developing early hypothesis on pain points such as excruciatingly long lines in stores and lack of distinguished DEX brand in retail stores. We structured our research around confirming these, discovering new pain points and conducting participatory design exercises with participants.
In the field: Participants hesitated to talk about their finances, some of them did not even let pictures taken. Most people had little literacy so we could barely go through the exercises. This confirmed how people had major mistrust around institutions, finances and how literacy was going to be a problem to design around.
Decided to conduct focus groups and do antropological neighborhood tours. Which made a huge difference as participants felt secure and comfortable in the group environment and their own homes to share personal finances.
2. How to bring user insights into product design
As soon as we were in the field, some of our early hypothesis around the experience started breaking. For instance, people did not care about the excruciatingly long lines as we thought. They simply accepted it as “Just something you have to do”. They mainly cared that the money got to their families fast and secure. Some of the insights:
Major mistrust in institutions are part of everyday life and dictate how people think about money. We needed to make the product induce user trust.
Money is emotional. One participant who lived away from her kids talked about how waiting in the line and sending money made her feel happy and proud of providing for her children. We needed to consider the emotional aspects of sending and receiving money.
People desire transparency and control over their money. People didn’t know when money sent to them was ready, In remote parts of the country these people had to take 3 buses only learn money was not received. We needed to create a product with clear instructions and record of money movement.
……
On my initial sketches I explored different ways to create a wallet digitally: from a skeuomorphic concept to a brutalist/functional one. We decided to go for the most familiar, simple design with users’ balance and key action controls stacked to look like cards in a physical wallet.
Interaction model: Features three main layers of interaction.
First is the base layers, home and activity feed views.
Wallet view is the home screen. Launching the app, user immediately sees how much money they have, the last transaction that occurred and can start a key transactional flow right away.
Activity feed surfaces users’ money movement history and is only a swipe away.
Second is the app menu presented as a partial drawer.
Third is the top layer with transactional flows that occur on a modal window and land user back to the base layer. All transactional flows feature progressive forms, making sure users see all details in one screen and pursue without errors.
a few ways to make The interface respond to user needs
Building trust by providing transparency
Wallet balance and last transaction are the first things user sees, letting them know their money is safe and secure.
Activity feed holds the details, receipts and exchanges with users’ community. For instance letting user know when a loved one picks up money from a retail location.
Total control over key actions
Progressive forms guide users through the process, one step at a time.
At the last step, user sees all input before confirming the transaction.
Hand holding for first use
First time usage screens appear the first time a transactional flow is initiated, giving clarity to an unfamiliar experience, helping user feel at ease to continue.
On later phases of the engagement, we also added on the ability to keep the instructional first use screen until user dismisses it.
Reassuring the user
Upon submission of a transactional form, animations surface quick details about the action in progress. This step uses the processing and loading times in favor of the experience while reassuring the user of the progress.
Skemorphic inspired receipts right after the animation states are proof and record of the money movement.
View InVision prototype Password: MONEY1
3. documentation: How to document design for inexperienced client teams
We were only scoped to do “light” documentation for this project. I approached documentation in 3 parts:
How it’s structured: For product definition, documented design intent and key functionality. I explained purpose of each layer in architecture, while breaking each down to sections.
How it behaves: Documented key actions through 4 hero flows. This explained user actions and key functionality requirements in the context of the flow.
How it moves: An essential section for any app documentation. Defined transitions used in the system and referenced them in the flow documentation. On this product, we intentionally used basic, off the shelf Android transitions as we knew that the client had a brand new internal team. These transitions were efficient, easy to develop and sufficient enough for the initial release.
3 areas of learnings in the process
Research: How to be flexible in the field
Product design: How to bring the user insights into product strategy and design
Documentation: How to document design intent for inexperienced clients
Product In the market
Android and iOS apps have been developed by the client and are on the Mexican app stores.
Success from this product made Banco Azteco collborate with us to create the responsive web version of the app. Giving even more people access without the need of an app.