Overview
MiBolsillo (MyPocket in Spanish) is a financial app designed for SMEs in Latin America aiming to introduce them to the banking system in countries where informality is the norm. To do this, MiBolsillo educates users on how to best use their money and save towards specific goals which help them grow their businesses.
I led the development of the user interface and most of the user experience. The latter was brainstormed and designed collaboratively in conjunction with a small team distributed in 5 different countries, by sharing our feedback on a weekly basis as we developed the app in an agile way. Part of the team had already worked on a scaled down version of the app in Brazil, so some of our assumptions were based on data and feedback gathered from that experience.
In this case study, the first half will focus on the user experience and the second half is dedicated to the user interface.
Software
Adobe XD – InVision – Zeplin – Adobe Photoshop – Google Slides
The Problem
More than 83% (over 6 million) of SMEs in Peru are informal. This means, they are not registered with the government, don't pay taxes and, most of them, don't trade through a bank. This creates a problem for the economy, the workers and the scalability of these companies.
Due to a lack of education, and because a great deal of these businesses are family operated, the people who manage them usually overlap business related expenses with personal ones, and the income generated is considered personal too. This creates a lack of information and data related to the business, which in turn, reduces the ability for the company to grow.
The financial market offers products that allow customers to have an overview of their money, save or offer them access to financial services (banks), but not all together and they can get complicated to use. More importantly, these apps are created for markets in Europe or the US and therefore, are not tailor made to satisfy the needs of MiBolsillo’s target end user.
User Persona
We called our user persona Cynthia Carmona. Cynthia is a 30 year old lady, who owns a modest restaurant in the city of Lima. She, her mum and brother take turns managing the business. Cynthia has an irregular pattern of credit payments, and she also can't demonstrate her income. She used to have a bank account, however, she only knows one product: the loan, that was offered to her through a financial entity. Currently she gets loans from informal lenders (not registered either) because they offer fast financing. Cynthia doesn't like big banks because she hates bureaucracy, so when she needs a product, she prefers the smaller ones as they request for less documentation.
Cynthia wants her brother to have a good education so she wants to save money to pay for his studies, and she wants her business to grow to achieve this goal, but doesn’t know how to achieve this.
Our user persona owns an Android phone and she knows some financial apps, but hasn't used them because they don’t offer more than a simple overview of expenses.
Cynthia needs a way to manage her business’s finances in one place as she saves money to achieve her goals. She needs a product that helps her understand the ins and outs of her finances, while giving her direct access to financial services.
Conceiving MiBolsillo
While laying out the workflow of MiBolsillo, we identified four main features we thought could help Cynthia achieve her goals:
1. Financial overview
2. Access to financial services
3. Save money
4. Better understanding of financials
MiBolsillo original low fidelity prototypes and core functionality flow.
These three main aspects will become MiBolsillo’s main navigation as they are the core features of the app. When Cynthia opens the app, she will have easy access to the three main things she wants to accomplish while using the product without digging too much into it.
Financial Overview
To give Cynthia an overview of her finances, we created a dashboard, which at the same time will function as the home for MiBolsillo. She needs a way to quickly see how much money she has left in her account, where her spending has gone to, and more importantly, how much she has saved to achieve her goals.
Dashboard screen, the first state shows the progress on the main goal and an overview of what money is currently available to use. Scrolling down reveals details about income and expenses, plus upcoming bills.
Access to financial services
MiBolsillo’s main offering is having an easy way to access services from banks. We laid out the most popular services people get from financial institutions, so that when Cynthia wants to access them, she can apply through MiBolsillo and we’ll do the hard work for her, saving her the time and effort of too much bureaucracy. This way she is also able to have all her financial products in one place and keep track of them as MiBolsillo reminds her when she needs to make payments or any other action that may be required.
Financial services main screen. Products shown: 1. loan, 2. credit card, 3. bank account, 4. credit card machine, 5. savings account, 6. insurance.
User journey for getting a loan through MiBolsillo.
Save money
The third core feature of MiBolsillo is giving Cynthia the ability to save so she can pay towards her brother’s University. Cynthia has the option to add one main goal and two secondary goals. From our research, we know that people save more successfully when they do it towards one goal at a time, so, MiBolsillo prioritises Cynthia’s main goal and throughout the app she will be reminded how much she’s saved so far and how much is left. This means, we will be in a position to tell her if she’s spending too much on entertainment, for instance, if we see her monthly budget is overshadowing what she wants to save in any given month.
Goals screen with overview of main goal, indicating the history of how much has been saved.
Understand economics
MiBolsillo’s mission is to educate people on having healthy finances and grow their businesses. Understanding economics is deeply engrained in the app’s core functions and every feature is intended to offer Cynthia and all our users a way to clearly see the state of their finances, learn what they can do better and apply that knowledge towards their goals.
For example, we will let Cynthia know if she’s getting closer to the end of the month with a balance that won’t let her achieve her main goal by continuously analysing what her spending pattern is and identifying what other expenses she needs to pay every month; we can then teach her what to do in order to achieve her goal. This way, MiBolsillo functions as a financial advisor and, while it’s not a feature Cynthia can see, she will get benefit from it every time she uses the app.
We designed a built-in game with the same purpose in mind. The multiple-question game will test Cynthia’s knowledge and she will get rewarded with points that she will be able to redeem with our partners, allowing her to save more money to achieve her goals.
The game can be accessed via the dashboard or by push notification enticing the user to play and earn rewards.
Other features
The core features will be used by Cynthia on a daily basis, she needs them to accomplish her goals. However, there are other features we built into the product to make her get there faster, easier and more enjoyable.
Consultation
During our user interviews, we found out people wanted to have a way to see how buying an unexpected purchase would affect their goals and their overall financials. So this feature allows them to do exactly that. Users can enter the amount they want to buy and MiBolsillo will tell them if it’s ok to do it or if they should wait until they are in a position where they will not negatively impact their goals.
Consultation allows users to check how an unexpected purchase would affect their goals.
Financial Health
This is similar to a credit score in other countries. But in Peru things work a little but differently, so we built right in the app a way for people to know what their financial score is based on their behaviour using the MiBolsillo app. We know when users pay bills, receive income and spend money, so we can show them how these habits affect the way scoring agencies see them – while teaching them how to improve their score if needed.
The financial health feature lets users see how they're doing financially and advices them on how to increase their score.
Expenses, Payments and Income
Users have also a way to add expenses, recurrent payments and income; either by linking their bank accounts or cards to the app or by doing it manually. MiBolsillo reminds them on upcoming payments and overdue ones that need to be processed. All this data helps us know the user better and customise our advice on a user-by-user basis.
Users are able to add their total sales/income, set up recurrent payments and because the app connects to their bank accounts, we can show them an overview of their expenses.
User interface
The target audience for MiBolsillo are people who aren’t necessarily tech savvy. They use Android phones as their daily driver phone, so they need a product that feels familiar and easy to use so they accomplish their goals faster.
I used Material Design’s basic guidelines as a foundation to build on and tweaked some elements to bring it back to MiBolsillo’s brand look and feel. For instance, I used pill-shaped buttons as opposed to rounded-corned ones and increased the radius of all dialogs and cards throughout the app; the idea was to make MiBolsillo feel more friendly, approachable and fun to use.
Colour palette
We had an assumption of what colours we were using on the app. We thought green and grey would appeal to users as they are associated with money and that the green would make the app feel lighter. However, after we had the first interviews and tested our initial prototypes, we found out that those colours weren’t resonating with the audience.
So, after some trial and error, I landed on blue and fuchsia. The fuchsia is one of the colours of MiBolsillo’s logo and I used it because it represents ‘pop culture’ in Peru. The colour brings people together as is the main colour used for one of the most popular music genres in the country, and of our target audience too. I also found that blue was more identifiable as a colour for finance and it also distills trust and strength, which represents the brand very well.
MiBolsillo's main brand colour palette.
The colour palette is based on Peruvian popular culture "chicha", which is known for bright high contrast colours.
Character styles
MiBolsillo didn’t have a brand identity before we started development of the app, so in order to achieve the familiarity explained above and to leave room for iterating the font in the future, I used Roboto, Android’s system font.
I based the type system around 16px with increments of roughly 1.3x, but I added some half stops to aid to the density of the content in the app. The app needed more flexibility in order to show numbers, graphs and data without overwhelming users.
Icons
The app’s icons are a mix of custom made and stock icons. My research showed that many local competitors (including banks) were using dollar-sign icons to represent money, finance, etc. Since we wanted users to feel identified culturally to the app, I designed our icons to show the local currency: the sol (S/); and throughout the app no icon bears the dollar sign unless it’s referring to that currency.
Grid and layout
MiBolsillo was designed on a 4-based grid and a 4 column layout. Again, the density of the app’s content needed a way to breath and I found the 4-based system gave me more freedom to do so without making elements too big or too small.
Elevation
Figuratively speaking, I designed the shadows by raising the height of Material Design’s imaginary light by a few pixels, this way shadows look more prominent and stronger, adding more personality to the design and helping me better separate objects from each other, especially when working with white over white.
Interactions
Remember we wanted to keep the app as familiar as possible not to overwhelm users? I also didn’t want to confuse them by adding a learning curve to the usability of the app – understanding that money is already a tough subject for some people is key, it wouldn’t have been a good idea to overcomplicate the design by adding complex animations that could potentially frustrate users leading them to leave and delete the app. So the animations we do have are natural, intuitive and to some extent, shy, leaving them almost unnoticed.
Hand-off to developers
It was important to me that developers knew the specs of the app to the pixel. So we worked with Zeplin to share all that data with them. It was a good exercise, the app offers almost all tools to make work seamless and our weekly online meetings helped iron out any inconsistencies we found.
Conclusions
Creating MiBolsillo was a fun and very much informative experience. Having had our users in mind throughout the entire development process, the team and I have created a great tool for Cynthia and all of our users to accomplish their goals and grow their businesses. MiBolsillo stands for educating people on finances to better understand their money and learn how to grow their businesses.
Our research, including interviews, validation workshops and tests, helped us understand what our users were looking for. I think we have designed a tool that adds value to their lives and that our users enjoy using – we think MiBolsillo will definitely change the way people in Peru think about money.
MiBolsillo is currently on Beta testing on the Play Store and very soon will be available for the wider market to use.
Tank you for reading! – if you're looking for a UI/UX designer for your next project, feel free to get in touch so we can discuss how we can together build a great product for your users.