UX/UI Design

HowToMoney - Easy Money Management Web App

Mockup How To Money Mobile App

About the project

The idea for HowToMoney App was born because this topic - money management, saving, investing - is a big topic within my circle of friends. Maybe because we got old or because we've got children...or both.

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

Initial steps towards understanding the problem and your competitors
  • 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

Observing needs & goals of potential users



How

Stepping into the shoes of your users and to my product from their point of view
Asking people questions remote and in person
Processing & analyzing the research results



Tools / Methods

What For

  • User Survey
  • User Interview
  • Google Forms
  • Sticky Notes
  • Affinity Map
  • Personas
Moving beyond the obvious to explore a full range of ideas

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

Ideas to be experienced and interacted with by others
Transform your ideas into a physical format
  • Low- to High Fidelity Wireframing
  • Interactive Prototypin

What For

How

Tools / Methods

5

Test & Improve

To solve problems before they reach a product development team
  • 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

Documentation of the solution
  • 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

I've conducted interviews with 3 potential users to better understand
  • 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
Pain Points
  • 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
Needs
  • 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
Possible Functions
  • 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

To bring my users to life I've created persona, based on the insights gained in previous research. The goals and frustrations represent the needs of a larger group of HowToMoney users.
Profile Picture of User Persona

Martina

  • 33 years
  • Unemployed & Acting Student
  • Married
  • 1 Daughter
  • Ibiza (Spain)
“I don’t want to spend too much time for money management, it’s not my passion, but I want to have an overview to avoid arising of dept.”
Needs & Goals
  • 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”
Frustration
  • 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.

Profile Picture of User Persona

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

Grocery shopping
Arrow Down

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

Feeding the output into the Excel File
Arrow Down

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

View of the current money flow status
Arrow Down

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.

Profile Picture of User Persona

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

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

See All Issues In Detail

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
The information gathered will be used to enhance the App in terms of its design, features, usefulness, and ease of use. Through usability testing, five significant issues were identified, and these will be addressed in the next iteration of the prototype. Two of these issues will be discussed in detail.

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

PerCategoryBefore

After

PerCategoryAfter

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

ScrollingDownBefore

After

ScrollingDownAfter

Expert Design Feedback

Last but not least, I've asked 5 students of the UX design course to give me design feedback on my prototype. This helped me to identify further suggestions for improvement. One example follows:

Feedback

  • "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

How To Money
  • 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

How To Money
See All Design Decisions

Handover for Development

Creating Design Language System

Showing the summary of my research so far will help to understand my concept, my decisions and opportunities how can be continued with this project. Now the time has come to create further deliverables that help me communicate with different stakeholders and teams, document my work and provide artifacts for meetings and ideation sessions. By creating a design language system for HowToMoney, I've create a framework that unifies a set of reusable components, standards, and documentation. This framework enables designers, developers and other involved parties to create, recreate, modify or iterate on a product in a quick and cost efficient manner.
See Design Language System

Assets

I have exported all assets(any graphics) manually and organized them into folders in a meaningful way. I can now hand them over to the developer. Alternatively (as Adobe XD user) I could easily export/hand over all assets to developers as a design specs link. The developers can download assets and implement them into development, having so all exact and necessary information.
Logo and Name of Elmira Rehnert
© 2024 Elmira Rehnert