Logo

Empowering MSMEs and their employees to track their finances efficiently.

January 2022 | This project was completed for Nextpay under UX+ University

Project Background

As students of UX+ University, we were assigned to work on a combination of web and mobile design, and conduct usability testing for NextPay, a digital business banking solution.


Timeline: 2 weeks

Scope of work: Discovery, User Research, User Testing & UI Design
Role: I took on a hybrid role switching from User Research and UI Design.

The Team: Camille Dagal, Ethan Niguel Salvador, Francis Louis Mozo, and Reinard Carranceja

What is NextPay?

NextPay is a digital banking platform for small businesses and entrepreneurs in the Philippines.

Through NextPay, businesses can collect customer payments via digital invoices, manage their company money, and pay their employees, suppliers, or bills in batches—to any bank or e-wallet. 

So what is the problem that we need to solve?

  • MSMEs (small and medium-sized enterprises) 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.

  • There is also no easy or consistent way to log information or upload documents (People use google forms, airtable, manual writing, messengers, google drives, etc.). 

Our proposed design solution

We proposed a design system or flow to help MSMEs track their finances, manage their employees' requests, and submit reimbursements all in one place without having to log information or upload documents on various systems.

See the video below for an overview of our design solutions.

Let's go through our research

How did we start?

We wanted to understand even better what the pain points were of our users. We conducted interviews with two sets of users; the employees a.k.a. "Requestors" who have requested reimbursements from their companies and the finance officers a.k.a. "Approvers" who processed employees’ reimbursement requests.

Using affinity mapping, we identified which parts of the reimbursement process needed improvement based on the findings from the interviews. This helped us determine which features we would prioritize in designing for our prototypes. 

Seeing what's out there

Although NextPay did not have a direct competitor, we looked at other products to identify which of their solutions would help our users.

What our users want

We also created two user personas and user journeys from the data we gathered and came up with the pain points and opportunities that we can design for each. 

Persona : Approver
Lynette De Guzman, 35

Pain Points

  • Has limited time 
  • Works with an outdated request tracking system
  • No proper database for recording and tracking finances 

Opportunities

  • Streamline approval process
  • Digitization to reduce documentation loss and easier transparency of finances
  • Streamlined and optimized reporting process

Persona : Requestor
Pearl San Juan 

Pain Points

  • 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

Opportunities

  • Limit out of pocket employee expenses
  • Time efficiency and productivity
  • Reduce follow-ups and disapprovals for requests that are affected by human error

Starting the design

Identifying our design goals

With the limited timeline for the project, we couldn't design everything that our users wanted and explore the possibilities of other features.

So, we used MOSCOW, a popular method of prioritization to determine which features are must-haves (non-negotiable features that are mandatory to serve its purpose), should-haves (not vital, but have significant value), could have (nice to have initiatives), and will not have (not a priority).  

Usability Testing 

Testing our design 

After choosing our must-haves, we created user flows and a sitemap and started designing our low-fidelity prototype. We then invited our users to conduct an unmoderated usability test to see if our designs were effective, easy to understand and solve their frustrations in the reimbursement process.

Refining the Design

After testing the lo-fi prototype, we went through another affinity mapping session to know which parts of the design needed polishing and which features might be confusing for our users.

See the prototypes in action

Click the images to test our prototypes

What happened next

Reflection

After testing our prototype with our users and identifying areas for improvement, we refined our design for a high-fidelity version and presented it to the client. 


We also gave recommendations and next steps for the NextPay team should they choose to pursue our idea.


With this project, there are things that we’ve learned along the way, and things that we could have done better. 

Recommendations

  1. On-boarding process
    Introduce the NextPay system to first-time users/employees

  2. Over the counter transactions
    Explore an option to receive money through OTC (over-the-counter) channels for unbanked users

  3. Accessibility
    Make the platform more inclusive for users that have disabilities, language barriers, and the less tech savvy

Next Steps

  1. Usability Evaluation with current NextPay users/clients
    Conduct a usability test and gather insights from actual NextPay users

  2. Diversify Pool of Interviewees
    Gather more users that come from various industries and company sizes

  3. Developer Checkpoint
    Have developers assess the proposed features if the current prototype is feasible

What I learned from this project

Personally, I've learned a lot about the frustrations of MSMEs that I've never thought about or experienced before. There is a lot of room for opportunity to help make their financial transactions easier. One of the big challenges that came up during the research is catering to users who are unbanked or underbanked, which would be an interesting topic to explore. 

What I would do differently

Our biggest challenge as a team was getting enough users during the recruitment process. Looking back, we could have used an incentive to attract more users to participate in our study so we could get an even more diverse set of data to work with. 

Want to know more about the NextPay project?

Send me a message

Thank you for reading!

Built with Dorik