Credit Integration
Hokodo business credit score integration designs: Adding value without adding clutter
Hokodo is an integration that allows Futrli Flow users to retrieve credit scores of their clients and protect themselves from unpaid invoices. My role within the project was to design an integrated credit score system and invoice protection on top of existing designs within the Futrli Flow app.
I worked as the principle UX/UI Designer alongside one PM, the CTO, one back-end developer, one front-end developer and the team from the integration partnership (Hokodo).
👉 To design features that would be compatible in style and experience with the existing platform designs
👉 To try and avoid adding clutter to an already busy series of tables
👉 To educate and prompt the user while keeping the designs clean and sleek
👉 The new designs had to appear in 4 different areas of the product while keeping consistency throughout
👉 Due to legal terms, the user has to go through 2 main steps before they can retrieve the credit scores or protect their invoices: First they have to match their own company against the database. Second they have to match their customers' company identities
👉 After both matchings are completed, the users are returned their own credit score and are given the opportunity to protect unpaid invoices by accessing the integrated service offered by Hokodo.
Before starting ideating a design solution, I wrote up user cases and stories.
Notes:
👉 User has to validate/match their customers if they want to obtain credit score and invoice protection
👉 Matching process can only be done against UK LTD’s and French companies. Non-UK companies and sole traders cannot be checked
👉 After matching has been completed, a 3-star 7-grades rating system + invoice protection will be displayed on Flow In > widgets > Customer Ranking, Unpaid Invoices, Customer Details
👉 After matching is completed, Pro user can start protecting invoices - CTA triggered in Flow, actual protecting process happening in Hokodo
👉 As user acquires new customers, these, too, will have to be matched
Use case 1 - New User:
A user who has just signed up to Flow (and is in their trial period or has gone PRO)
This user will be prompted to match all their customers so that they can obtain credit scores and invoice protection. This user will be prompted to do so from the actionfeed and Flow In.
Use case 2 - User who has matched their customers:
A user who has been using Flow and has matched their existing customers. They will have to match any new customer they acquire. This user will be prompted to do so from the actionfeed and Flow In. This user will then have access to credit score and invoice protection for every customer they have matched.
Use case 3 - An unpaid invoice is eligible for protection:
User is prompted via actionfeed and Flow In. Once user clicks on relevant CTA, they are taken to Hokodo to potentially complete protection in Hokodo.
Use case 4 - An unpaid invoice is about to become not eligible for protection:
User is prompted via actionfeed and Flow In. Once user clicks on relevant CTA, they are taken to Hokodo to potentially complete protection.
Use case 5 - An unpaid invoice is not eligible for protection because customer hasn’t been matched:
User sees an alert upon hovering a greyed out shield icon on the relevant row . This will explain why it is not eligible (in this case, prompts user to match to check eligibility).
Use case 6 - An unpaid invoice is not eligible for protection because customer has a low credit score:
User sees an alert upon hovering a greyed out shield icon on the relevant row. This will explain why it is not eligible.
Use case 7 - User who wants to initiate a claim for an invoice they have protected:
User sees an alert on hovering the relevant icon and is prompted to check policy > is taken to Hokodo.
Use case 8 - A customer hasn’t been matched:
No credit score and invoice protection can be applied. User is prompted to match customer.
Use case 9 - A customer has been matched:
Customer row now shows credit score and invoice protection icons.
Use case 10 - A customer’s credit score has changed:
Actionfeed post notifies user. Info appears in Flow In and Customer detail.
As a stakeholder, I need to ensure that a new user matches the identity of each customer before a credit score and consequently invoice protection can be displayed
As a Flow user, I need to see the value of matching the ID of all my customers
As a new Flow user, I need to not feel overwhelmed by a series of alerts prompting me to validate each customer
As a Flow user, I need the experience of matching each customer to be easy to understand and quick to execute
As a Flow user, I need to be able to input the details of a customer during matching process even if this customer is a sole trader or non-UK company
As a Flow user, I need to be notified on my actionfeed that matching is required for my customers
As a Flow user, I need to be able to see my matched customers’ credit scores from the Customer Ranking widget and in my single customer detail page in a new widget
As a Flow user, I need to be able to clearly see which invoices can and cannot be protected from my Flow In > Unpaid Invoices widget and from my single customer detail page > Unpaid Invoices
As a Flow user, I need to be able to initiate the Protect Invoice process from that specific Invoice row in the Unpaid Invoices widget in Flow In and Customer Detail
As a Flow user, I need to be notified if a matched customer’s credit score has changed
As a Flow user, I need to be notified if an invoice status has changed (statuses being: protected, eligible for protection, ineligible for protection)
As a Flow user, I need to be able to see which invoices are near cut-off time before they become ineligible
As a Flow user, I need to be notified when any new customers require matching
As a Flow user, I need to be notified when I’m highly dependent on an invoice that is eligible for protection
As a Flow user, I need to have the opportunity to never be prompted again re matching customers
Once the scope was clear, I identified the areas where the design additions were needed:
👉 The Actionfeed where posts could be used to prompt users to match their own identity or their customers
👉 Flow In, specifically in the Unpaid Invoices widget where both the credit score of the customer and whether that unpaid invoice can be protected
👉 Customer detail where I added a widget to display the customer credit score
👉 Invoices detail tab where the list of unpaid invoices shows the protection state.
I started with the designs to represent the credit score. We matched the score indicators with the language used by Hokodo to make things more consistent for the user.
1 Star is Danger
1.5 Stars is Caution
2 Stars is Acceptable
2.5 Stars is Far
3 Stars is Excellent
The choice of colour follows the shared cognitive perception of red for bad, yellow for neutral and green for good.
In addition to the stars, I designed a dial component that would give an intuitive indication of the portion against the total. The actual versus the desired.
When no credit score is available (because the customer's identity wasn't matched) the credit score is represented by grey stars and a greyed out dial.
The Invoice Protection feature can have 3 different states:
👉 Not available for Protection (for different reasons)
👉 Available for protection (not protected yet)
👉 Protected (policy is active)
I designed 3 shields to represent the 3 different states. I used a plain grey gradient for the inactive state (not available), a green gradient for the 'available for protection' state and the same green gradient with a white confirmation tick in it for a protected state.
After designing the symbols, it was time to design what the experience of matching customers and protecting the invoices would look like.
First the users need to be told they have to match their customers in order to obtain extra information. So I identified the opportunity to tell them in a post in the Actionfeed and the first time they access Flow In, more precisely on the unpaid invoices widget.
A pulsating dot attracts the user attention with an expanded tooltip that prompts them to hover on the customer name.
When hovering they see the option to verify their customer from the menu.
In the same fashion, when they hover on the greyed-out stars and shields, they see a CTA to start matching customers.
When the users start the matching process, they are presented with a pop up showing a list of the companies that are the suggested closest match. At this point they can either select one from the list or search for a different one. The moment they confirm the company, an API call is sent to Hokodo which will automatically return the credit score and activate the option to protect the invoices.
Now some of the shields will turn green and when hovered a CTA will inform what to do next for that specific invoice.
👉 There is no such thing as too many iterations
👉 Working closely with engineering teams and the rest of the product team is an empowering journey that opens your mind to many different aspects of the evolution of a product
👉 It was interesting from a UX perspective to see how the integrations with third party data sources talk to each other within the product
👉 When you think you're done with testing... test more!
"Thanks Gess Puglielli! Well done for the designs. These are super cool!"
Raphael Caruso - Hokodo Product Manager
