Figma mockup

Iterative design is an important industry practice for designing UIUX products. However, many small businesses and startups need access to possible feedback and critics of their user interfaces.

In this project, we decide to take on an iterative design process for a small start-up company Pivo and create an iOS app user interface catering to its users and banking services.

The Startup - Pivo

With the high economic growth in Africa, workers in the freight carrier industry enjoy its benefit while suffering from the long turnaround time for payment, which leads to severe cash flow problems. Pivo proposes a solution to this problem by designing a platform that allows freight carriers to collect, make and track payments in one place. The application now focuses on serving truck drivers and owners and provides bank account, debit card, and digital invoicing tools so they can better manage their finance.

I. Ideation



After finishing the drafting and discussing our solutions, we combined our idea and made the following wireframe, which includes four pages of the interface.

II. Hi-Fi Mockup

To gain more feedback for our proposed framework, we built a hi-fi mockup based on our low-fi prototype, presented our mockup to other fellow UIUX designers in a studio, and got the following critics.

Home Page

Invoices Page

Insights Page

We made some refinements to our mockup incorporating the feedbacks. Below is our final version.

III. User Testing

After editing the Hi-Fi prototype, we used to conduct online user testing. Three users were asked to complete a series of tasks in our app given the following instructions.

Test Instructions

The prototype you’ll be testing is a smart-banking app for those who receive multiple one-time payments from different sources. The app helps users track all their invoices in one place and get insights into their income.

Assume you are a truck driver who delivers goods for multiple companies and gets paid for each order you complete.

  1. Track Invoices

    The turnover period of transactions can be quite long. You have completed multiple orders as a truck driver, but some of your payments are long overdue.

    1. Try to contact (find the contact button) the company that has an overdue payment in October.
    2. Filter out all the overdue invoices
  2. Gain Financial Insights

    After receiving the payment, you are curious about the changes in your financial situation throughout the year. Luckily, our app provides data analytics that tracks such changes. Head to the app and find the following insights:

    1. Find the month from January to June with the lowest income.
    2. Find out which company paid you the most in May.


While the users are reacting to the interface and performing the task, their reactions and responses are recorded in a video and we summarized them in the following table.

Task \ User
alexo 52, Male (Australia)
veronaskylark 33, Female (U.S.)
EducatorPossible 33, Male (U.S.)
Try to contact (find the contact button for) the company that has an overdue payment in October.
Ease 3/5 4/5 4/5
Completion No Yes Yes
  • Both user 1 and user 3 struggled to find the Invoice tab due to Figma display issue, where only part of the phone screen was displayed.
  • User 2 struggled to find the Invoice tab that was blocked by a UserTesting popup.
Potential solutions
  • Do more extensive trial runs before publishing the user test.
  • Add instructions to ensure the user can see the entire interface before the test begins.
A2. Filter out all the overdue invoices. Ease 5/5 5/5 5/5
Completion Yes Yes Yes
  • [Unexpected] User 2 manually spotted all overdue invoices instead of using the filter.
Potential solutions
  • Make filter options more explicit: e.g. use “Filter: All”.
B1. Find the month from January to June with the lowest income. Ease 5/5 5/5 5/5
Completion Yes Yes Yes
Difficulties N/A
Potential solutions N/A
B2. Find out which company paid you the most in May. Ease 5/5 3/5 3/5
Completion Yes No (not sure if completed) No (not sure if completed)
  • All users were unsure whether “last month” in the Insights tab refers to the month currently highlighted or the previous month.
  • All users attempted to click on June to find the least-paying company “last month,” i.e., May.
  • [Unexpected] User 3 entered the Invoice tab rather than Insights to try to manually find the least-paying company.
Potential solutions
  • Change “last month” to the highlighted month.
  • Provide clearer instruction in future user testing (e.g., “Using Insights tab, find…”)