MSMEs Employee Purchases
This project was completed for Nextpay under UX+ University
Designing a mobile and web app for MSMEs and their employees to easily spend, track, and reimburse expenses.
Project Duration
January 17 - 25 (2 weeks)
My Responsibilities
UX Design, Visual Design
The team
Camille Dagal, Ethan Salavador, Francis Mozo, Reinard Carranceja (ME)
Nextpay and the problem of MSMEs tracking of employee purchases
MSMEs often do not have access to useful tools to help optimize their operations. As a result, most businesses use manual and outdated means of conducting their business. Oftentimes, personal finance tools are thrown into the mix (the founder's bank accounts, credit cards, etc.), which becomes an accounting and finance nightmare.
Sometimes, employees have to purchase items on behalf of the company or are entitled to allowances, reimbursements, etc., and there is no easy or consistent way to log information or upload documents (People use google forms, airtable, manual writing, messengers, google drives, etc.).
Nextpay wants to expand their current offering to include a feature and process that allows MSMEs and their employees to easily spend, track, and reimburse expenses on both web and mobile web.
Understanding the users
To know the problem underlying the tracking of expenses of MSMEs employees we conducted 6 user interviews, 3 employees and 3 from the finance department of MSMEs.
From our interviews, we compile all of their responses and determine the from both their main pain points from side of the Requestor (Employee) and the Approver (Finance department)
---Affinity-Mapping-(The-Good--amp--Bad)_d8yoz31k.jpg)
Different problems, different solutions
We identified the pain spots between the two user types in their present process and developed solutions to address them. We designed separate platforms for our two user kinds, a mobile app for the requestor and a web app for the approvers.
Requestor (Employees)
Mobile expense tracker app
Approver (Finance Department)
Web-based expense dashboard
TL:DR Video Version
Who are the requestors?
Requestors are employees that make purchases or expenses on behalf of the business. These expenses may include but are not limited to, supplies, transportation allowances, food allowances. They can also file for reimbursements if they use their own money when making any expenses for the business.
Their pain points
These are the pain points experienced by the requestors (employees) we've interviewed.
Employees using personal funds
for company expenses
Loss of time balancing work and
admin related tasks
Approval of request and
reimbursement of funds takes a while
The plan to make their task easier
Taking into account all of the requestors' pain points. We brainstorm some potential features that might help them solve their problem. We prioritize them by doing red routes and vote on which features will have the most impact
The top voted feature by our team is the Budget Dashboard, this dashboard will be the main feature that we will focus on in our solution. Aside from the budget dashboard, we also manage to include all other features we come up with in our prototype.
---Frame-1_jx5qg7m1.jpg)
Our Solution
What we aim to solve
Knowing that MSMEs often do not have access to useful tools to help optimize their operations and there is no easy or consistent way to log information or upload documents our goal in our solution will be designing a system that aims to:
Spend money or allowances
on company expenses
Upload documents and report their expenses for reimbursement
Starting our design
We started out by laying out a site map of all the funcitionalites that we will include in our mobile app prototype.
_cjdoqziz.png)
With all the features planned out, we created user flows for each functionalities such as the buidget dashboard, virtual card, request cash, reimbursements, expenses logs and notifications.
🛈 Detailed user flow will be shown along the refined design
_2wf6gn8h.png)
Using our userflows we created low-fi prototypes and conducted usability testing from the same people we interviewed using the low fi prototype. Here are some key insights they have.
Refining the design
After getting feedbacks from our usability tests, we refined and iterate our design into our high fidelity prototype.
Below are the screens of different functionalities of out mobile prototype. alongside the detailed user flow for each functionalities.
Employee Dashboard
Digital Card
Cash request
Reimbursement
Expenses Log
Notifications
Try it yourself!
Experience our mobile solution by accessing the Figma prototype . Go full screen to see the full prototype.
APPROVERS (Finance department)
Who are the approvers?
Approvers are finance departments or the owners of MSMEs. One of their main responsibilities is to track and report expenses. This includes approving allowances, purchases, and reimbursements of their employees.
_q4q19dv6.png)
Their pain points
These are the pain points experienced by the approvers we've interviewed.
Has limited time to approve requests
Outdated request tracking system
No proper database for recording and tracking finances
The plan to make their task easier
Taking into account all of the approvers' pain points. We brainstorm some potential features that might help them solve their problem. We prioritize them by doing red routes and vote on which features will have the most impact
The top voted feature by our team is the Form templates, this form templates will be our solution with one of their problem that they have multiple physical forms that makes tracking hard for them. Aside from the form templates, we also manage to include all other features we come up with in our prototype.
---Frame-2_i90h9cdz.jpg)
Our Solution
Knowing that MSMEs often do not have access to useful tools to help optimize their operations and there is no easy or consistent way to log information or upload documents our goal in our solution will be designing a system that aims to:
Create an easier way for finance members in a company to track expenses and reimburse their employees via NextPay.
Starting our design
We started out by laying out a site map of all the funcitionalites that we will include in our web app prototype.
_pyynl9zu.png)
With all the features planned out, we created user flows for each functionalities such as the buidget dashboard, budget plan, approve or reject requests,form templates and reports
🛈 Detailed user flow will be shown along the refined design
_dc7ejbpt.png)
Using our userflows we created low-fi prototypes and conducted usability testing from the same people we interviewed using the low fi prototype. Here are some key insights they have.
Refining the design
After getting feedback from our usability tests, we refined and iterate our design into our high fidelity prototype.
Below are the screens of different functionalities of our web prototype. alongside the detailed user flow for each functionality.
Requests
Request forms
Budget plans
Budget report
Try it yourself!
Experience our web solution by accessing the Figma prototype. Go full screen to see the full prototype.
Learnings and next steps
Next Steps
Usability Evaluation with NextPay users
Conduct a usability test and gather insights from actual NextPay users
Diversify Pool of Interviewees
Gather more users that come from various industries and company sizes
Developer Checkpoint
Have developers assess the proposed features if the current prototype is feasible
Learnings and takeways
Do not go "too much" from the interview questions
Stick with the main thought of the question to get more meaningful information from them. I tend to go off the rail with the prepared interview questions that we get so much unnecessary details from. Even though we sometimes go off script we still got valuable insights from them
Sticking to the schedule is important
We have "delays" in our tasks not gonna lie. We experience overtime, working on Sundays and working until midnight just to align our schedule. But after almost 2 weeks of no sleep, we still manage to create the needed deliverables for our presentation (and surprisingly go over the expectations).
Recruiting is HARD (at least for us)
We experience delays because of the recruitment of interviewees. This pushes us days with our planned tasks for the week. I guess in the next projects I for one will be more involved in the recruitment, like using social media, my networks and not being shy about asking for interviews.
End of case study
🙌 Thank you so much! 🙌