A Moderator on Mint's help forums confirming that Mint is currently targeting personal finance. (Source: Sage couple).
Luis Uribe
UX Designer
EZii: Envisioning a
multiple user finance app
Case Study - January 2020
Design Process
My Role: UX Researcher & UI/UX Designer
Duration: 2 Weeks
Team or solo project?: Personal solo project
Tools & Devices: Figma & Photoshop
Context
EZii (a play on the word “easy”), is a proposed fictional finance app that would give households with multiple streams of income an easy way to track expenses and budget together. Some of the apps' features were inspired by Intuit's Mint, which is also a personal finance app that shares similarities with EZii (more on that later). The name EZii was chosen as it's meant to represent the app's ease of use. This was a design challenge I set up for myself to create a new idea in the span of 2 weeks.
The Problem
There aren't any dedicated multiple user money tracking apps (as of January 2020). So, a possible solution is to make a multiple user finance tracking app that is user-friendly and intuitive enough to keep users engaged. The app must have all the essential features that popular personal finance apps like Intuit's Mint have to stand out as a great product.
Step 1: Research
Competitive Analysis
I began my research by first diving on the web to see the offerings from our current market. 'Mint' (by Intuit Inc.), is the closest thing there is to EZii. However, to use Mint for two or more people, the users have to do many workarounds. That being said, with workarounds, using Mint like EZii is somewhat doable (workaround link: http://sagecouple.com/should-couples-use-mint-com-to-manage-joint-finances/ ). But, what do I mean by somewhat? Well, the app was designed to be used by one person, so even with the workarounds, confusion might arise as certain transactions might be duplicated (if two users share a Mint account and both put a joint account card on their accounts, the transaction will show up twice), etc. An app like Ezii for two or more people wanting to share their finances would solve this problem by giving a more dedicated approach.
Observing this, we can see that the idea has potential.
Survey
Learning from the research I did, a short survey towards my target demographic (anyone who uses finance apps) was created. It asks users questions about their preferred features on these apps and most importantly if they would be willing to give an app like EZii a chance. On the right, you'll see that 93.8% of the users would try a multiple user finance app if the experience was easy (n = 16). The survey was posted on my personal social media accounts.
Transactions and monthly income seem to be needed by the finance app userbase (I personally agree myself!).
Survey (cont.)
To the right, you can see my desired features question from the same survey. Below, you'll see the answers (in corresponding order) that are shown on the right:
- Transactions
Monthly income (from work, investments, etc.)
Upcoming bills
Budget tools
Spending trends (charts that divide what you spend in categories)
Categories for different types of purchases
Adding accounts like investments, loans, etc.
Alert/notification settings (like, "alert me when I'm close to reaching/or surpass my budget")
Having the ability to sign-up with a Google and/or Facebook account
Calculator WITHIN the app (to save a bit more time) NOTE: I decided to scrap the calculator within the app idea to give more focus to the other features
Taking consideration from my research and survey, I decided to allow users to log in with more than one account for EZii.
Personas
Moving along, I decided to create two persona cards based on the survey I created and the research I found. I referred to these personas (especially the first persona card; in fact, you'll see me use their names for my final UI mockup) throughout the entire design process. Doing these personas really helped me empathize with the design and understand users' needs and goals.
The app would allow multiple users to use it at once, and by multiple, I mean more than two as I kept other potential user scenarios in mind.
Personas (cont.)
What the personas taught me
- Users want easy and painless apps to work with (hence the Google and Facebook log-in options and the need to be able to search their transactions)
- They want a practical and simple UI
- Many features that allow users to study and track their financial status
Customer Journey Map
Before starting on my actual UI design process, I still wanted to do one more exercise to help guide my design decisions. And to do so, I decided to do a customer journey map.
What I discovered from this:
- I personally know couples who would benefit from this and when I told them about this solo project, they all said that they would love for it to become reality. In fact, those conversations inspired this customer journey map. (I talked to three couples)
- Speaking from a marketing standpoint, the app has good potential to make good money as it's the first of its kind. (That being said, I didn't touch the business side of things and won't again on this case study as that would take this project into a different direction)
- The app's purpose is so unique that it could truly reinforce relationships as an indirect influence
Step 2: Design
Sketches
Sketching is beneficial as it allows one to iterate many designs that could each inspire new improvements over the last giving you confidence over your design decisions. With this project, I decided to use a sketchbook to work out some design solutions. While the drawings are pretty crude, they served as a foundation for my final UI. I also took lots of notes during the sketching process to help me set design decisions. I did many iterations on the home screen (I always do at least 10) before deciding on this one to the right which inspired more designs below.
Sketches (cont.)
A few more sketches showing my brainstorming.
Final UI and Design Decisions
Home screen
Final UI Design
Once I looked at my research, personas, customer journey map, sketches, and notes, I decided to move on to the final design solution. While moving so qu I decided to design a simple but practical looking UI that does what it needs to.
A few things to keep in mind:
I kept a dark theme as the default option but there is a light theme available (shown below)
I used a 4-column grid overlay to guide my design in Figma
The design is clearly intended for iOS phones, but I kept it somewhat ambiguous to be able to go back on it in the future for android devices as well (the aforementioned explains why I used the 'Roboto' font instead of 'SF')
Final UI Design - Sign-up Page
*In this section, I'll present all my pages and explain some design decisions regarding the aforementioned.
Design Decisions:
- Clearly iOS themed, I decided to do a quick and easy sign-up page that includes the option to make an account through a Facebook or Google account
- At the bottom, a sign-in hyperlink for existing users exists to take them to a log-in page
Final UI Design - Home page
- Two blue buttons placed near the top show 'Home' (which is the main page you're seeing now) and the other one shows 'account info', I personally thought that most people would appreciate a simple way to access their accounts and profile (profile page will be shown in a bit)
- The 'Upcoming Bills' section is purposefully placed there to indicate to the user that there is more content on the screen if they scroll down
- The bottom navbar works akin to CSS' '#id' selector. In other words, when you click on say, 'budgets', the screen will immediately take you to budgets down below (instantly ideally, no scrolling animation)
- Color labels next to transactions indicate who the transaction is from
Final UI Design - Home page/Spending Trends (scrolled)
The navbar is designed to disappear when you scroll down, but appear when you scroll up
The status bar goes from clear to dark when you scroll down as well to keep it from interfering with the content on-screen (in a real application, the status background would go black as apple intends; I made it a bit lighter to let the notch come through for aesthetic purposes)
Purple color labels (a mix of red and blue; the member's color indicators; a mix of the members' color labels would be the color indicator for something that involves both of them) indicate things that take in-account both member's financial accounts
Final UI Design - Account Info
- Here, you can access the accounts or profile of a member by clicking on one of those buttons
Final UI Design - Account Info (Log-in)
- While newer iPhones don't have biometric confirmation, there are rumors that the feature will return in 2020 models and is still available in a lot of android phones and older iPhones. In other words, the biometric feature would be present in applicable phones
- A typical password log-in would be present in all phones
Final UI Design - Account Info (Logged-in)
- Here, a user would be able to change their user photo, color indicator, and bio info
Final UI Design - $ Flow
When a user clicks on a label at the bottom of a category's box or the box itself, the user would be presented with a page similar to this. In other words, more in-depth info would be presented with the chance to go even more in-depth (hence the 'See...' buttons)
Final UI Design - Settings
- Side slide menu was chosen in case a user accidentally clicks on it and wants to go back to their page immediately
- When you click on one of these icons, a further menu would be presented
- 'View Settings' would allow users to change the order of categories in the home screen
Final UI Design - Light theme
- Through settings, a user could apply this theme if they prefer
Conclusion
What I learned from this project
I learned that a great product doesn't have to be a completely new idea. It can simply be an improvement or modification of an existing one like I did here with EZii which in turn was inspired by Mint and other personal finance apps.
I also learned that personas and customer journey maps help designers empathize with the userbase more and can help guide the design process.
And finally, a simple design can work just as well as a fancy one.
I will say that one thing I could've done better is adding a few more screens to showcase my intended user experience a bit more (like a tutorial mockup page, etc.). My UI/UX design skills have also improved since making EZii, so I'd also redesign the aesthetics and more importantly, user experience more. For example, on my Spending page, there aren't any percentage or other quantitative measures on the chart indicating amounts or values which could confuse some users. Another UI aspect I'd redesign is that I would also highlight an icon at the bottom navigation bar (in a different color) if that page were open such as in my "Final UI Design - $ Flow" page.
This project improved my design thinking and taught me the importance of user feedback and iterating. Unfortunately, the only user testing for Ezii I could do was to show a few friends and family some designs. As I've taken more classes and have read up more on UX, I realize that doing more user testing is always better than not doing it as it can eliminate many assumptions. In short, I could've delved a little deeper into research than I did and have taken this project as a lesson for myself; don't rush things.
This was a fun project that taught me the lesson of patience and I hope that a real multiple user finance app happens sooner than later!