Pep pay

Financially empowering the next gen of consumers
Team
Me (Designer)
Product design director
Product manager
Marketing team
Engineer team
Data team
Process
Stakeholder workshop
Wireframing
Usability testing
Visual design
Prototyping
Long story short
This project is a part of a new feature we were developing to allow our users to pay their peers in installments. And by allowing them to do so, we attract senders to use our service, and refer their receiver as our new users as well.
Starting point: Product goals
This project was fully researched on a feature level when I joined the project, we had a few goals to achieve through this project:
  1. Attract new users: users builds their network within the app by sending/receiving money
  2. Increase daily active users: allow users to pay their peers in installment through the app
  3. Allow cash transferred in/out of the app
Workshop - persona building
Before we started wireframing, we did a workshop with product managers, and the marketing team to get different stakeholders on the same page of user profile. After sharing research findings and exchanging perspectives with different stakeholders, we narrowed down to a primary user profile we named Charlie.
Meet User Charlie
Charlie is still in college and don’t have enough financial resources. They’re living with roommates and constantly need to split payment with their roommates, friends and families(eg. rent, restaurant tabs, mutual purchases). They want to repay in installments to ease financial difficulty, but they don’t want to complicate their relationships with friends/ families.
Charlie's goals
  1. Allow me to pay people back in installments (eg. for rent, restaurant tabs, gifts, etc.)
  2. Help me plan and manage my weekly/monthly budget.
  3. Allow my payment to be flexible when needed.

Initial ideas
After we were set on a user journey, I started brainstorming by sketching out low-fidelity mockups. While I worked on a few different flows in this project, the one I found most challenging and is the wallet page: It is where we initially want the users to pay/request their peers, and it is an entirely new page to our app.

Functionality we wanted for this page were:
  1. Ability to view and manage cash balance
  2. Ability to pay/request money Visibility to recent activities
  3. Ability to accept payment requests
Feedback from stakeholders
After we had the initial wireframes, we ran it by different stakeholders to get some more input. Here're some key feedbacks we gathered from different perspectives:
  1. Product managers were worried people wouldn't use Pay and request much if it's burried in the wallet tab
  2. It was pointed out that we need to display in app money as well as their available credit
  3. Customer success pointed out it would be nice to be able to bundle payments with P2P and orders, since they've been getting that request from users for a long time.
During the whole design phase, we had meetings with the CEO to discuss direction and progress. I was responsible for prototype and presenting research findings. We also have regular project check-ins with our engineer team, to prep them of the workload, and make sure we are on the same schedule.
Remaining challenge
After meeting with stakeholders and knowing our next steps, I made a few rounds of iteration and design critique with my team, there're still a few questions that remained:
  1. Clearly differentiate different balance: cash balance/ available credit/ in app money: What's the most important number to users?
  2. Help user to better budget for future payment within different time:
    What are the useful time frames? Bi-weekly? Every month? Calendar view where they can customize? 
  3. Communicating of incoming balance and outgoing balance
Testing
Now it's time to test usability, and address the remaining questions with user testing! It was my first time running unmoderated testing on UserTesting.com, andI was fully responsible for prototyping, planning and conducting user testing, as well as synthesizing the result for this project on a feature level. The challenge was big but also exciting.

While I worked on testing multiple flows for this feature, here I’m going to focus on the testing result for this flow related to the wallet page.
My learning objectives:
  1. How do they interpret different numbers displayed on the page
  2. Is it intuitive to navigate incoming payment versus outgoing payment
  3. Does the feature and information on the wallet page meet their expectations
Key takaways
  1. While most users find the ability to filter time periods on scheduled payments, many mentioned they would like to see breakdown of upcoming payments
  2. Some users were not sure what ‘manage balance’ would do
  3. Some users were a overwhelmed by all the numbers on the page
  4. Most users would like to add another choice of ‘bi-weekly’ to time filter because it aligns better with their pay period
Iteration
After another round of user validation, we decided available credit should be the primary information on this page, therefore I changed visual treatment to the other numbers to reduce visual noise

We also get validation on different time period people would want to budget, so I changed widget to list view, but kept the time filter. We also added a feature where they can bundle scheduled payments in 'scheduled payments' which was a highly demanded feature according to customer success team.
Final design
Impact to the team
  1. I was able to influence our business strategy from my research findings.
  2. I advocated for regular testing and iteration in this process, also increased visibility to how our findings informed our design decisions. 
  3. Contribution to building a design system based on this project. I created several components, and worked on establishing a typography hierarchy. 
  4. I successfully convinced our team to change our font family from a display font to a more accessible one. 
Future sucess
We did a total of 3 rounds of user testing, and an additional survey on existing users as well as non-existing users to validate our design decisions. By the end I could say both the team and our testers were happy with the result and excited for its launch.

While this project was not officially launched when I went back to school, we worked with our data team to set up success metrics. Here are some numbers we would like to see growing in relation to the success of this page:
  1. User growth
  2. Daily active users
  3. Cash transferred in/out of the app
  4. Usage of payment bundle feature
In the end
It was a great experience working on developing a new feature. While the challenge was big, the gain was bigger! However, there's only so much I could share about this project due to confidentiality. If you would like to learn more about me and my work, please drop me a line and I would love to chat more about my design works.
- Continue reading -
Alert drawer
|
Facility tour
|
Pep pay
|
Chores tile