Expenses app
UX/UI Case Study
iOS mobile app to submit work related expenses
About
An iOS mobile app designed to save & submit expenses from anywhere, offline.
Our Goal was to create a solution that allows company staff to process their expenses easily and often, from outside the office and from their personal device.
Research
Defining the problem
In this consultancy, employees need to log their expenses from a software only available from the workspace. Our existing users are mainly consultants, sales people and managers from the company.
Stakeholder interviews were conducted to understand business goals
User interviews were conducted to understand how users currently process expenses and pain points of the user journey.
I worked closely with Finance department and backend architects to understand full user journey.
-
Problems
Users can submit expenses only from an online software available at the workplace
Users require internet connection to save expenses
The software they use doesn’t accept attachments
Users need to use a third party app to scan their receipts and send via email to finance
Users cannot claim expenses during work trips, they end up losing receipts by the time they can submit expenses
Finance team need to link receipt pictures received by email with corresponding expense submitted through their online software.
Users end up not submitting their expenses or submitting them late
-
Solutions
One app that allows to save and submit expenses from outside work
Offline capability that allows users to save expenses
An app that allows you to take a picture of your receipt on the spot, or browse on camera roll
An app that allows finance team get a unified claim, with the corresponding receipt attach to the expense claim
An app that allows finance team get a unified claim, with the corresponding receipt attach to the expense claim
The app was created for internal use, our users are consultants, sales people and managers from the company.
Gathering ideas to fulfil needs
After interviewing stakeholders about the project, I also had a look at what the market offered, and discussed with other stakeholders where we are standing and where we want to stand. Between the tasks, I found useful to do a Competitors analysis: feature list
User flow diagrams
Nothing, however, came as usefuld as doing user scenarios and user flow diagrams to visualize the stucture of the app
Testing
Giving up with the right pattern
Pattern 1
Users need to select the expenses that they want to Submit.
Problems with this pattern
Too many steps, to many tappings needed
Usability tests showed users got confused with this pattern. They were looking to find a “Submit” button
Some users where expecting to have more options than just selection when pressing “Select”, options such as copying the expense, or deleting it
Users should have an option to quickly Select all expenses
In selection mode, expenses rows will not offer any other option such as copy or delete
Usability testing
Users described in user interviews in which order they input expenses. In order to do it quicker, some users mentioned they input all expenses from one category together (f.i.”Meals”) before moving to other category (f.i.”Transport”). Some others mentioned they input by project or client, before moving on to other expenses.
Pattern 2
All expenses selected by default and “Copy last expense” button
On this pattern, I understood all Expenses should be selected by default, giving the user the option to unselect a few, of just submit them all by default. I also thought a “Copy las expense” could speed up users process when inputing expenses. Once again, the iteration proved me wrong.
Problems with this pattern: 2nd Usability tests row
Users would not understand what infromation the copy button would copy
Users would assume that everything even the amount will be copied from last expense
When asked to add an expense for the same client/project with same category, some users would use the “Add” button rather than “Copy last expense”
From a visual design point of view, it looks odd
Pattern 3
The one we sticked to
Expense rows are broken down into 2 parts. All expenses selected by default. The user can unselect if they don’t wish to submit them all.
A tap on the checkbox area will unselect an expense. A tap on the expense area will open the expense details.
There will be no “Copy last expense” button.
Instead, with a swipe to right, the user can copy any expense row, and with a swipe to left, an expense can be deleted.
Expense and reports
Expense status
The diagram on the right shows the different statuses that an expense will go through in order to get reimbursed. Sometimes an expense will get returned to the user, generally when something needs to be corrected; or even declined, when the expense is not eligible for a reimbursement at all.
After submitting expenses, a report will be generated. Approvers can return and decline individual expenses of that report.
On Reports section, the customer can check active reports, pending to be reimbursed. There is a History tab for previous reports.
A filtered view of unsubmitted expenses and reports status is available on the dashboard.
Users get notified on the dashboard if there was an expense that as returned or declined.
User interface
Colour Palette
I tried to respect the palette that was provided to me, adapting it to a more suitable one for a digital product like a mobile app.
I’ve based the palette for the app on Sapphire’s primary colours, that identify the brand, choosing a blue for most textfields.
I’ve used the orange as the accent colour, to maintain the link to the brand.
Logo creation
Suggested app icon
The app icon was design with the existing logo of the company on mind.
Company logo
What the already established logo of the company looks like.
Final logo
The stakeholders suggested this wordmark for the splash screen and not the original to differentiate this product from others within the company product line.
Conclusions
Testing and iterations taught me more about users actual needs than any other phase on the project. Testing taught me what works and what doesn’t besides what I as designer believe, what other stakeholders believe, and even beside what users believe could work for them.
During the testing phase users showed a need not described or discovered before, which is the need of being able to save templates to use in the future. That was misinterpreted and instead we designed a feature to be able to copy existing expenses. However, we could empower more the users by giving them the option to store templates that they can re-use.
An OCR scanner is the feature that would have delighted users and enhance the user experience. We could not afford that technology, it was out of scope form the beginning, but kept being mentioned by users until late phases of design.