Case Study

NextPay Learning

Designing a learning website that will help MSMEs learn and grow their business.

Client:
NextPay

Duration:

2 weeks

Scope of work:

Research, Wireframing, Prototype, Usability testing

My role:
User research & Competitve Analysis, Persona creation, Wireframes, UI Design, and Prototyping

Nextpay Overview

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

NextPay platform allows user to send invoices, collect payments, do payroll, and pay bills. 

It is the best alternative to bank accounts for small businesses and entrepreneurs in the Philippines.

We'd like to launch an educational content series that covers topics such as business loans, insurance, employee benefits, financial management, etc., with the goal of helping businesses better manage their finances."

- NextPay Client

with that,

WE ASKED OURSELVES:

  • How might MSMEs or small businesses properly learn and manage their business through NextPay?
  • How might MSMEs understand financial management to further grow their businesses?

This means helping more businesses grow and use the NextPay platform as a tool to learn and manage their business finance without all the restrictions of the current banking landscape.

HERE'S WHAT I DID AND

WHAT MY ROLE WAS:

  • User research & Competitve Analysis
  • Persona creation
  • Wireframes
  • UI Design
  • Prototyping
Process? We love process!

Discover

Ideate

Design

Test

Based on the complexity of the problem and time frame given, that was our fun process. 

Here's a closer look...

DISCOVER

Research Goals

Things we aimed for during the discovery stage:

  • To learn about the important information and tools that users need when it comes to managing their business.
  • To understand the behaviors and common pain points of MSME owners

Here's how we did the research:

Competitive Research

We wanted to see the opportunities we have hence, after identifying competitors such as Payoneer and Paymongo we conducted competitive research to evaluate competitor strengths and weaknesses then learn from them. We also considered looking at some reference websites, that helped us identify some useful features that we can consider and improve. Our team understands that from these features, we can build another.

MOST IMPORTANTLY

WE TALKED TO OUR USERS.

In order for us to get a better insight towards understanding the problem, we conducted user interviews as this will be the basis of the features that we will be adding to the website.

Our users are small-time business owners and entrepreneurs

And with their insights, we gathered our ideas and mapped out the features that we needed to consider.

Affinity Mapping
The part I like the most! 🎉
We did some affinity mapping to map out inputs given by the interviewees. This is for us to identify and filter out all gathered results and insights for us to come up with the solution.

from that, we were able to build user personas.

User Personas

Based on the interviews/workshop we set up two personas.
We referred to them throughout the entire product development process.

  • Each persona had a scenario that identified a realistic goal the user might have in learning about business
  • The information about each persona focused on its goals and frustrations with the learning process, which drastically affected our design decisions

Creating user personas helped us understand our users' motivations and needs and how these translate to online use and consumption and, ultimately, making decisions.

IDEATE

We used MosCow Prioritization for managing features and requirement that the team was able to discuss and we finalized a set of features that we will be designing and working on.

This led us to coming up with these useful key features

DESIGN

Wireframes

To transition from the ideation to design, we created Low-fidelity wireframes for us to come up with "The Big Picture" rather than elaborating on specific details. We used whimsical to create at least 4 sets of ideas and we voted which features, function, structure, and design suits the project goal best. 


It was quite tricky for us as we were overwhelmed with how useful and unique our ideas were from each other.

From Ideations we did on whimsical, we built the low fidelity wireframes on figma then conducted a usability test to iterate and further identify improvements and changes to the design that we have created.

TEST

Before launching the product, Using Maze we did a testing round in order to reveal possible usability problems. Our approach conducting usability tests on mid-fidelity wireframes, allowed us to modify the architecture of our page mid-sprint, based on the success rates of users who were given tasks to complete.

User Testing

We saw the value in surveying users through Maze (on top of usability testing) because we were able to validate which sections and pieces of content were most relevant and valuable to our users.

Maze Test Results

BRINGING TOGETHER ALL THE IDEAS AND FINDINGS, WE FINALLY CAME UP WITH

UI Design & Prototype

Based on the results of our usability testing on our mid-fidelity wireframes, the team came up with design decisions.

Here are some snapshot:

What are the next steps?

These are the further steps that we plan to do for us to move forward with this project.

Test
We plan to test our working prototype with a larger and more diverse user base.

Build
Build on our Community page to feature events, engagements and mentorship programs as well as CTAs to connect more with our users.

Revise
Revise our prototype based on the latest usability test results.