UX/UI Design
HowToMoney - Easy Money Management Web App
.png)
About the project
Many people between 25 and 65 want to have a good overview of their finances. At the same time, only a few of them are willing to spend a lot of time on it. Furthermore, many would like to make more out of their money but don't know where to start and how to find an independent consultancy.
HowToMoney is an App which helps people to manage private finances by:
- Capturing bills using scan function
- Asking independent experts for financial advises
- Analyzing and controlling own spending habits
All features shall help people to keep control and self-confidence regarding their money in an easy way.
Design Thinking at a glance
1
Analyze Problem
What For
- Creating list of possible problems, problem statement, ideas of potential solutions
- Performing competitor analysis
How
- Double Diamond Strategy
- SWOT
- Google Trends & Search
- Similarweb
Tools / Methods
2
Analyze User
How
Tools / Methods
What For
- User Survey
- User Interview
- Google Forms
- Sticky Notes
- Affinity Map
- Personas
3
Generate Ideas
What For
- Brainstorming
- Inspiration by others
- Explore a wide variety and large quantity of diverse possible solutions
- Refining Sitemap
How
- User Journey
- Task Analysis & User Flow
- Card Sorting
Tools / Methods
4
Design
- Low- to High Fidelity Wireframing
- Interactive Prototypin
What For
How
Tools / Methods
5
Test & Improve
- Testing prototype with real users, collecting feedback, improving, iterating on design again
- Using observations and feedback to update personas and user flows
- Test Plan
- Test Script
- Usability Testing
- Preference Testing
- Expert Design Feedback
- Rainbow Spread Sheet
What For
How
Tools / Methods
- Detailed properties description of all components of the prototype
- Structured organization and storage of individual assets and wireframes
- Design Language System
- Handover Hi-Fi-Wireframes
- Handover Assets
6
Prepare Hand-over
What For
How
Tools / Methods
User Interviews
- The current situation of private money management and the paint points of it
- The needs in connection with private money management
- Which possible solutions/functions are needed
- Manual and time-consuming recording of expenses
- Lack of trust in financial advisors
- Tools don't offer analysis and recommendations based on the current financial situation
- Having the exact overview without spending a lot of time
- Easy understandable, trustfully and personalized financial information
- Easy way to capture bills
- Setting personalized alerts, e.g. Spending Limits
- Tools to scan bills
- Search for financial information and recommendations of independent financial advisors,
based on the current financial situation and own preferences - Notifications when limit is reached
- Charts showing the financial situation
User Persona
Martina
- 33 years
- Unemployed & Acting Student
- Married
- 1 Daughter
- Ibiza (Spain)
- Capturing the outputs automatically
- Tool that allows me to manage my income and expenses in a fast and uncomplicated way
- Notification when I reach a spending limit
- Managing shares
- Information about “How do I rate a product correctly”
- To keep the overview via Excel was too time-consuming
- I won‘t use an App to manage my money if I have to enter everything manually, too much work
- We were taught about plenty of topics in the school but not about how to manage money and as adults we have all to mange our money ourselves
User Journey
Since I know what the problem is, I want to solve and also for whom, the time has come to find out how to solve the problem. Creating User Journey for my personas I comprehend at a high level of detail what journey different users take in their real lives to complete a specific task. This leads to possible solutions.
Scenario
In the past, Martina used to take the receipts with her after each purchase to record them at home in an Excel spreadsheet, because this was the only way she had an exact overview. But at some point, it was too time-consuming for her. She is looking for a way to record these expenses more easily.
Goals & Expectations
- Preferably automatic or at least simplified recording of expenditures
- Automatic assignment of each output to a relevant category
- Current overview of income & expenditure status
1. Journey Phase
1. Possible Solutions
- Payment by phone=> Easy saving of a digital bill
- Scanning items in the store, this data will be transmitted to the store's cash register system
2. Journey Phase
2. Possible Solutions
- Payment by phone=> Digital invoice can be automatically captured & automatic assignment to the categories
- Scanning paper invoices & automatic assignment to the categories
3. Journey Phase
3. Possible Solutions
- Payment by phone=> Easy saving of a digital bill
- Scanning items in the store, this data will be transmitted to the store's cash register system
User Flow
Task Analysis helps me to get more specific to think through key pathways, the User Flow, of my persona as she navigates through the app while trying to reach their goal. In this way I've gained detailed picture about pages to offer and activities to be conducted.
Task Analysis
Martina doesn’t want to spend a lot of time for recording of her expenses. But she would like to have an overview of her expenses. Therefor she needs a way to capture her outputs automatically.
Entry Point: Dashboard
Auccess Criteria: Saved Bill
Goal
- Paying for purchases at the supermarket checkout
- Receiving the invoice
- Open the App
- Choose “Necessities”on Dashboard
Sitemap
Based on the insights of the personas user flows I‘ve created an initial sitemap. Using Card Sorting Method I let the users decide how organizing the content make the most sense to them. This resulted in a leaner and better organized revised sitemap.
Before
After
Design
Now I have enough information and ideas to put it into a physical format for the first time. I've started with drawing paper sketches of the functionalities to get a general idea of which information will be presented and how these information is going to be structured. To get more deeper regarding the level of detail I've next created digital mid-fidelity wireframes. This is necessary so that all stakeholders can better visualize the product in terms of basic placement of UI elements.
Following flow is showing the mobile scanning function:
Usability Testing
Now the time has come to test the whole thing on real users. I've conducted moderated remote tests with 6 users asking them to accomplish several tasks and to answer a few questions regarding the usefulness, simplicity and overall satisfaction with the App. Every session took approx. 20 Minutes and was completed using Zoom and Adobe XD Prototype.
Goals
- To see if user understand the purpose of the App
- To understand if tested features help to accomplish the set goals
- To understand how useful the features are
- To observe how easy user can accomplish the activity
- To get information about general satisfaction about the App & the features
Issue 1 - Reminder filling aid
- Context: The user has to fill out information while setting up a reminder for an alert in case the user exceeds set expenses limit. In the first version of my prototype the user has to select between " Per Category" and "In Total" before filling out further information.
- Evidence: 5/6 testers didn’t understand to select “In Total” before filling in the reminder.
- Possible Solutions: Include the step of choosing a spending category into the filling list on the first position.
Before
After
Issue 2 - Scrolling down to submit
- Context: Once the user scanned a bill the App processes the bill and spits it out as a digitalized version. In the first version of my prototype the user has to scroll down to the and of the bill to be able to click on submit/ save the bill.
- Evidence: 2/6 testers didn’t understand what to do seeing the list. The most people confirmed(I’ve asked after testing) not to want to check every position of the bill and certainly not when I advertise that the scan function learns over time and automatically assigns items to the correct categories. That make sense!
- Possible Solutions: Place “Submit”-Button on top of the list.
Before
After
Expert Design Feedback
Feedback
- "Onboarding: What about adding login/create account buttons after onboarding and leave onboarding screens only with information about the functionality of the app."
- "Onboarding Button: I would consider other colors, orange on blue looks a bit irritating for me."
- "I like that the option to create an account is highlighted but I’d probably choose another color than orange. Maybe even white!?"
- "I missed the option to swipe at first glance."
- "I am not sure about the orange and the blue/green within the button, I'd check the contrast to make sure that it is accessible."
- "CTA in red makes it look like it is in error state."
- "Explanation Text could be larger."
My Action
Before
- Onboarding Text:
It seems that user oversee the swipe hint. Users like/understand it better if I add a swiping hand to it; I've tested through preference test. - Button Label Color:
Using the contrast checker tool I've found a better color(=#8F3200) for the “Create Account” than the #F85700(before). This decision was confirmed by the user through preference test.
After
Handover for Development
Creating Design Language System
Assets
High-Fidelity Wireframes & Interactive Prototype
