As a Senior Product Designer on the mobile app team, I researched, designed and tested our B2B native Android and iOS apps and web app, we went from V1 to V2 in 6 months with a positive ROI. I was responsible for the end-to-end product design strategy, for designing the interfaces and user testing.
As a Senior Product Designer on the mobile app team, I researched, designed and tested our B2B native Android and iOS apps and web app, we went from V1 to V2 in 6 months with a positive ROI. I was responsible for the end-to-end product design strategy, for designing the interfaces and user testing.
As a Senior Product Designer on the mobile app team, I researched, designed and tested our B2B native Android and iOS apps and web app, we went from V1 to V2 in 6 months with a positive ROI. I was responsible for the end-to-end product design strategy, for designing the interfaces and user testing.
£1,557.35
Net sales
11% vs Monday last week
Yesterday
Today
06:00
12:00
18:00
24:00
£75
£50
£25
+1,582.45
Sales
-25.10
Refunds
12.50
Average spend
245.00
Highest spend
Ocra stores
Summary
Transactions
Billing
Account
How might we…
How might we…
How might we…
Empower merchants by giving them better control of their cash flow and create better engagement with an updated app experience?
Empower merchants by giving them better control of their cash flow and create better engagement with an updated app experience?
Empower merchants by giving them better control of their cash flow and create better engagement with an updated app experience?
What does a better payment experience look like?
What does a better payment experience look like?
What does a better payment experience look like?
With this question in mind, I sifted through phone support logs and app store reviews to deepen my understanding about the current experience and discover ways in which the payments and reporting process could be improved, the main problems include:
Ease Of Use
Transactions have low discoverability. They need to be easy accessible and quick to find so that merchants can deal with a customer walk-in or complaint.
Information Inconsistencies
The original dashboard page was ignoring a user need of seeing individual totals of sales and refunds.
Physical Billing
Bills were still being sent via post and could therefore not be integrated easily into digital accounting tools.
Processing transactions
Processing transactions
Processing transactions
After gaining some initial insights, I decided to visit more shopkeepers and restaurant owners to deepen my understanding and experience about the situation.
Merchants check on transaction status, card sale volume, and observe their bills regularly each day.
At the close of the business day, businesses traditionally print a long receipt from the card machine, that details all their card transactions, including card issuers, and a breakdown of their totals.
I observed that this is only part of the task, card payments are not the only stream of income for the business, cash takings also need to be accounted for. We need to make it easy for users to combine their card takings with there other income streams. This could be an opportunity to provide better reporting functionality and connecting our app with third party accounting tools.
Synthesising research
Synthesising research
Synthesising research
After research, I analysed findings, and created these artifacts to help the business better understand their users goals, and how to improve the overall experience.
Navigation overview
Navigation overview
Navigation overview
The navigation bar features a dashboard screen, a transactions list, digital billing, and a profile screen for managing account info and personal settings.
Payments dashboard
Payments dashboard
Payments dashboard
Our dashboard presented analytics, I selected payment summaries and trends, which provided insights such as average spend, and busy periods. We based these choices on user research, we really wanted to improve how it did this to greater inform and empower our users.
For larger businesses with multiple locations, we had to provide dedicated features for viewing and comparing transactions. Users can select the location button to access their locations and can view them as separate or combined sources of incomes.
I knew that comparing transaction volume over time could help provide context and inform merchants into making actionable decisions - so added a powerful chart.
Finding a transaction
Finding a transaction
Finding a transaction
In the old version, the transaction list was hidden, hindering user access and navigation. I added transactions to the primary navigation. I gave users the ability to filter transactions by card issuer - it would help merchants understand their profit margins.
Export transactions for accounting
Export transactions for accounting
Export transactions for accounting
With the export feature, users can easily share there card transaction date to their accounting tool. The report could be exported with or without applied filters. This gave merchants the option to combine certain reports together and increased their ability to manage their financials.
With the export feature, users can easily share there card transaction date to their accounting tool. The report could be exported with or without applied filters. This gave merchants the option to combine certain reports together and increased their ability to manage their financials.
With the export feature, users can easily share there card transaction date to their accounting tool. The report could be exported with or without applied filters. This gave merchants the option to combine certain reports together and increased their ability to manage their financials.
User testing improvements
User testing improvements
User testing improvements
After completing rounds of usability tests which I broadcasted to my team using remote viewing rooms, TV's, cables, and a lot of coordination. I designed a System Usability Scale (SUS) for measuring usability.
Upon showing customers the first prototype of the dashboard summary screen, I quickly learned:
Merchants wanted to see how many transactions were taken not just how much was taken.
When dealing with multiple business locations, a user wants to log back in and it remain when selected.
Launch & results
Launch & results
Launch & results
Originally a merchant couldn't easily find and troubleshoot a particular transaction they had made.
We introduced summaries of sales and refunds volume on the dashboard and made the transaction list page easily accessible from the app's menu.
Users had greater filtering options - I designed full-screen filter views, because they are convenient when displaying longer sets of filters since they make for a more focused experience and allow for more screen estate.
⭐️ Monthly active native app users increased to 43.5k across both iOS and Android.
⭐️ The app received a rating of 3.9 stars on the app store, reflecting positive customer feedback and satisfaction with the improved user experience.
⭐️ Designing in-app digital billing, thus removing completely printing and postage costs of the physical bills saved the business £1 million annually.
⭐️ Monthly active native app users increased to 43.5k across both iOS and Android.
⭐️ The app received a rating of 3.9 stars on the app store, reflecting positive customer feedback and satisfaction with the improved user experience.
⭐️ Designing in-app digital billing, thus removing completely printing and postage costs of the physical bills saved the business £1 million annually.
⭐️ Monthly active native app users increased to 43.5k across both iOS and Android.
⭐️ The app received a rating of 3.9 stars on the app store, reflecting positive customer feedback and satisfaction with the improved user experience.
⭐️ Designing in-app digital billing, thus removing completely printing and postage costs of the physical bills saved the business £1 million annually.
£1,557.35
Net sales
11% vs Monday last week
Yesterday
Today
06:00
12:00
18:00
24:00
£75
£50
£25
+1,582.45
Sales
-25.10
Refunds
12.50
Average spend
245.00
Highest spend
Ocra stores
Summary
Transactions
Billing
Account
As a Senior Product Designer on the mobile app team, I researched, designed and tested our B2B native Android and iOS apps and web app, we went from V1 to V2 in 6 months with a positive ROI. I was responsible for the end-to-end product design strategy, for designing the interfaces and user testing.
£1,557.35
Net sales
11% vs Monday last week
Yesterday
Today
06:00
12:00
18:00
24:00
£75
£50
£25
+1,582.45
Sales
-25.10
Refunds
12.50
Average spend
245.00
Highest spend
Ocra stores
Summary
Transactions
Billing
Account
£1,557.35
Net sales
11% vs Monday last week
Yesterday
Today
06:00
12:00
18:00
24:00
£75
£50
£25
+1,582.45
Sales
-25.10
Refunds
12.50
Average spend
245.00
Highest spend
Ocra stores
Summary
Transactions
Billing
Account
Navigation overview
Navigation overview
The navigation bar features a dashboard screen, a transactions list, digital billing, and a profile screen for managing account info and personal settings.
Payments dashboard
Our dashboard presented analytics, I selected payment summaries and trends, which provided insights such as average spend, and busy periods. We based these choices on user research, we really wanted to improve how it did this to greater inform and empower our users.
For larger businesses with multiple locations, we had to provide dedicated features for viewing and comparing transactions. Users can select the location button to access their locations and can view them as separate or combined sources of incomes.
I knew that comparing transaction volume over time could help provide context and inform merchants into making actionable decisions - so added a powerful chart.
Finding a transaction
In the old version, the transaction list was hidden, hindering user access and navigation. I added transactions to the primary navigation. I gave users the ability to filter transactions by card issuer - it would help merchants understand their profit margins.
Export transactions for accounting
With the export feature, users can easily share there card transaction date to their accounting tool. The report could be exported with or without applied filters. This gave merchants the option to combine certain reports together and increased their ability to manage their financials.
User testing improvements
User testing improvements
After completing rounds of usability tests which I broadcasted to my team using remote viewing rooms, TV's, cables, and a lot of coordination. I designed a System Usability Scale (SUS) for measuring usability.
Upon showing customers the first prototype of the dashboard summary screen, I quickly learned:
Merchants wanted to see how many transactions were taken not just how much was taken.
When dealing with multiple business locations, a user wants to log back in and it remain when selected.
Launch & results
Originally a merchant couldn't easily find and troubleshoot a particular transaction they had made.
We introduced summaries of sales and refunds volume on the dashboard and made the transaction list page easily accessible from the app's menu.
Users had greater filtering options - I designed full-screen filter views, because they are convenient when displaying longer sets of filters since they make for a more focused experience and allow for more screen estate.
⭐️ Monthly active native app users increased to 43.5k across both iOS and Android.
⭐️ The app received a rating of 3.9 stars on the app store, reflecting positive customer feedback and satisfaction with the improved user experience.
⭐️ Designing in-app digital billing, thus removing completely printing and postage costs of the physical bills saved the business £1 million annually.
£1,557.35
Net sales
11% vs Monday last week
Yesterday
Today
06:00
12:00
18:00
24:00
£75
£50
£25
+1,582.45
Sales
-25.10
Refunds
12.50
Average spend
245.00
Highest spend
Ocra stores
Summary
Transactions
Billing
Account