Project Description

Expense Control Human resources SAAS

User Experience | Information Architecture | Visual Design | User Interface Design | Desktop Web App

SAAS Control expense

Overview

Human resources software to control expenses employees.

Interviewed companies expenses control process
SAAS research1
Captio homepage
captio
Concur
concur
Orblogic
orblogic

The Problem

The scope of this project was to work for a new startup that was looking to launch a software as a service (SaaS) desktop web app for companies to use internally. To research the market and to meet with employees to determine the needs of the business and then develop an MVP based upon the findings.

The challenge

To choose my SAAS topic I started interviewing a Schibsted employee (market places). He showed me several softwares that they used to manage Time-off, Performance Reviews, Benefits Management, Hiring Process and Professional Development. They were all functional and well developed.

So I decided to interview a Mobile games Company (who requested to remain anonymous) to focus on areas that were more dysfunctional and they do have several software that works fine except the employee expenses control. So I decided to explore that topic.

To do that I interviewed in depth employees from Schibsted, eDreams (travel agency), the mobile games company and Dorna Sports (media producer).

Research

Schibsted is rather large with 8,000 employees worldwide and 1,000 in Spain. eDreams has 1,800 employees, the mobile games company is quite big too with 2,000 employees and 700 in Spain. Dorna Sports is a medium sized company with 300 employees.

The expenses control system that they use is Captio for the Schibsted Spanish group, Concur for the Mobile games and Excel for both eDreams and Dorna. Those 3 systems included a printed expenses sheet approval grouped with the original ticket and then sent internally to the human resources or finance department.

Captio has an app that works great! You can capture the ticket and it detects automatically all the data and fills all the labels for you, then you create a report with all the expenses for the event or project and sends it to your supervisor for approval. The web app is not that great because you can’t capture an image, you have only the upload a file option.

Concur app allows you to take a picture of the ticket but doesn’t fill the data automatically. You need to type all the fields and then generate a report. The web app works pretty much the same, you can upload a file but not capture it. The employees at the Mobile games company then needs to print the report and group it with the tickets and send it to the HR / Finance department.

It felt like Captio and Concur were not enough data and so I looked for some other competitors like Orblogic, Bamboo HR and Rydoo. On all the systems you can personalize it with the company logo. They both have a top menu and a listing way to show all the expenses.

Information Arquitecture

Breaking down the content

We needed a system to meet the expectations of 3 scenarios: Employee, Supervisor and Admin. This is the content structure that I thought the ‘Expenses control web app’ needed to satisfy all the needs:

Employee

Capture a receipt, Upload a receipt, Mileage.

Expenses, Reports, Notifications, Profile.

Supervisor

Edit the team, Pending approval reports, Approved reports, Denied reports.

HR / admin

Company profile, Users, Teams, Roles, Expense Categories, Reject reasons, Expense approval paths, Payment methods.

I focused on the employee point of view to do the prototype as I really wanted to crack the process of capturing a receipt and to process all the data.

Persona

Jennifer Levi

persona

“As an employee I need to submit a receipt to finance department so that I get paid back”

Barcelona
34 years old
Works on a tech company

Goals

To find an easy way to send the department receipts

Save time doing all the paperwork

Frustrations

To print all the receipts and send the report to finance (that is pretty annoying)

She doesn’t want to see the HR department every time that has to fill an expenses report

Sketches and Wireframes

On the first Paper prototype I decided to create a left menu with three blocks: Employee, Team Leader & HR / Admin. They would only be shown if the user had access to it.

The options were as a Text and the search and Profile were on the top right.

paper prototype 1

On the second paper prototype I maintained the left menu and moved the three scenarios at the top.

On the dashboard I decided to add three main shortcut ways to add expenses and an Expenses status to see the employees balance.

paper prototype 2

This time I tried a new version putting the Login at the bottom left but in the end I decided to put it on the top right as this was the users expectations.

Based on the user testing I did an Expandable Left menu with Icons & Text to clarify all the sections.

On the dashboard of an approver there would be a List of expenses for approval listed by employee name, number of expenses, date of submission and total amount.

Visual Design

During the interviews, I asked what tone they wanted to convey if an HR SAAS were on their hands and all of them agreed on blue and green. So when the time came to do the Style tiles I thought the best way to englobe those colors were selecting a turquoise and a light green. The gradient was very cheerful and pleasant on the eye. A dark green was the business color for the logo and the titles. I created the Logotype with a camera objective icon to link the idea that you can capture a receipt data.

style tile 1
visual1

Testing the high fidelity with some users and with the help of my teacher I have realized that maybe the colors were too cheerful and that I could try a more business type style. This is the visual final version of the style tile:

style tile 2

As you see on this final high fidelity dashboard I added a  notification at the top letting the user know how many trial days are left.

The left menu is expanded by default and you can see the dashboard, expenses, reports and settings button.

On the dashboard you can see a welcome section with an introduction on how to add expenses and an illustration next to it.

Then the rest of the dashboard is divided in half by the adding expenses section and the expenses status with a graph of expenses showing the events and training total amount by month.

Final solution

To see the complete prototype you can access HERE