Spendo

Expense management app for companies of all sizes

Overview

Spendo is an app that aims to improve the expense management experience for companies of all sizes. The project contains two parts, the mobile app used by the end-users, and the web app used by administrators to monitor their company's overall spending. This project is a personal case study.

My Role
I am the sole designer for this project.

Tools: Sketch, Miro

What I did

Defined the concept
I conceptualized the idea of building an expense management app when I first learned the pain points of companies managing their employees' spending. I identified two target audiences and set project goals to help stay on track while I was designing the app.

Designed
I handled the whole visual aspect of the project, including logo design, style guides, mobile UI, and desktop UI.

01
Define

The Problems

For this case study, I identified the following problems:

A lot of companies still use paper receipts to record their employees' spending.
No spending limits on most company-issued credit cards. Even if there are spending limits, there's no way to set spending limits customized for individual users.
No way to set customized transaction limits.
Lack of analytics and visual representation for companies to see where the money is being spent.

The Target Audiences

I designed the app with two groups of people in mind: the end-users (company employees) and admins (accounting and IT personnel).

🤔 My Thinking: I believe that the app needs to exist on both mobile and desktop clients. The end-users can utilize the mobile app's versatility and portability to record expenses anywhere at any time, and the admins can use the desktop clients as a control panel to adjust and manage spendings for each employee and team.

02
Design

Spendo: Defining the theme

Once I identified which problems I need to tackle, I began illustrating the visual representation of the app. The first step I took is to develop a theme for the Spendo brand, so I set up a style guide that allows me to have a consistent design language throughout the whole design process.

Once the theme is set, I began working on the logo design, which followed the same theme according to the style guides.

Lo-fi Wireframes

After I have the theme and logo of the app done, I started to brainstorm on mobile and desktop clients' visual framework.

🤔 My Thinking: The mobile should display information that is personalized to the end-user. Basic functions like checking your balance, review past expenses, adding new expenses, and viewing card information are essential to the mobile app experience. On the other hand, the desktop client should have the ability to display whole teams of people and their spending information all at once while keeping the whole interface relatively clean and easy to look at.

Hi-fi Wireframe

After a few minor iterations, I translated the lo-fi wireframes into hi-fi wireframes by applying the logo and the theme established by the style guides.

A Seamless Experience

Since this is an expense management app, I based the prototyping process on existing online banking apps. My main objective is to ensure a seamless experience when completing core tasks such as registering a new expense.