Finance Pal

company

Personal Project

Project type

UX/UI Design Case Study

project description

A highly customisable solution for freelancers and small business owners, who would like to keep track of business performance and invoice needs.

Finance Pal black shirt mockup
Finance Pal Tote bag mockup
Finance Pal coffee cup mockups

Product overview

The product

A highly customisable solution for freelancers and small business owners, who would like to keep track of business performance and invoice needs.

The problem

Tasks such as billing and recording time spent on products can be tedious and time-consuming. Business owners need a system that streamlines the recording of business performance and enhances efficiency in creating, archiving, and searching invoices.

The goal

Building an invoice management solution that works seamlessly across mobile, tablet, and desktop can replace outdated systems that fail to streamline the process of recording completed work. The platform will be designed to remain simple and intuitive, enabling users to easily extract data in a clear and digestible format.

Mobile phone dashboard mockup of Finance Pal and desktop of timer page

My role

This project was an individual student endeavour. Following the design stages of the UX product lifecycle has enhanced my planning and research skills.

Responsibilities

  • Planning and conducting user research
  • Defining the problem of potential users
  • Creating personas, user journeys, user flows
  • Wire-framing
  • Visual design and prototyping
Competitor audit image of research for Finance Pal website

User Research Summary

To better understand different user types, I conducted foundational user interviews with a set of targeted questions. The goal was to identify the frustrations and requirements of employees and freelance creatives. Qualitative research was chosen as it was the most effective method for a small research group.

Persona image of Andre for Finance Pal case studyPersona image of Jane for Finance Pal case studyPersona image of Nick for Finance Pal case studyPersona image of Lauren for Finance Pal case studyUser journey map imageSite map for Finance Pal website

wireframes

After conducting initial user interviews, I began developing low-fidelity wireframes after getting a grasp of user requirements and challenges. During this process I also kept in mind that the website was only for small to medium businesses, so functionality shouldn’t be too complex for users.

Hand drawn wireframes of mobile website pages Hand drawn wireframes of mobile website pages Hand drawn wireframes of mobile website pages

Digital wireframes

After initially creating wireframes I began the process of adding more detail and consideration to user flow and requirements.

Digital wireframe image of log in, dashboard,  and reportsDigital wireframe page of create invoice, all invoices, and send invoiceDigital wireframe page of timer and settings

Usability Study Findings

Iterations were made from the usability studies. Changes were applied to the dashboard, menu labelling and more descriptive headlines to provide more clarity to sections throughout site.  

round 1 findings

1. Breaking down information into quarters for dashboard is a clear way to indicate what time of the year data is from.

2. Confusion with list of links on mobile slide out menu and relevance of functions.

3. Adding an activity log section on dashboard could be a good way to keep users informed about recent activity.

4. Invoice sent page needs more information. So when multiple invoices are sent throughout the day, they easier for users to identify.

Before & after

Iterations to the designs have been made from insights gathered from usability studies. I applied design changes to the navigation simplifying the information and grouping together the links logical order.

Before and after design for mobile dashboard designBefore and after design for slide mobile menu

UI Elements & Components

UI elements and components for Finance Pal website

Mockups Screen Variations

Login screen mockups mobile and desktopDashboard mockup mobile and desktopReport mockup desktop and mobileFilter date menu mock desktop and mobile

High-Fidelity Prototype

When conducting design research during the phase of the competitor audit, I noticed that existing invoicing platforms used blues as part of their branding. So, I decided with using purple as the main branding and accent colour for the reason being, purple represents wealth, wisdom, and can provide a modern look to design work when incorporated with darker colours.

Accessibility considerations

1. UI components were checked using WCAG that colours meet AA Compliance.

2. Easy to read typeface has been selected with a clean and simple design in different weights. The type hierarchy scale system allows the user to decipher different sections.

3. Labels under icons for screen readers and to allow users to easily understand navigation bar links.

Takeaways

what i learned

During the process of designing Finance Pal, I thought the usability studies were successful in influencing iterations in the different stages of the user flow. The feedback from the studies helped simplify information shown and removing ambiguity. This project has given me more of an understanding of the importance of clear headlines not just visual designs in developing work as a UX designer.

Back To Work