PITCHBULL

Pitchbull’s goal is to create a user-centered loan platform that helps SMEs access the financing they need to grow and succeed, without the delays & expenses associated with traditional lending options.

TL;DR

I led a small team on a redesign of Pitchbull’s user onboarding and loan application flow. We dramatically simplified the user experience, focusing on improved form interactions, clarity with inline feedback & allowing for user error correction.


I learned a little Spanish, and a lot about financial regulations & managing a multi-lingual project.

THE PROBLEM

Pitchbull is a Mexican fintech company specialising in financing solutions for Small and Medium Businesses. Elements of it’s design were outdated compared to competitors and it’s user flow was disjointed and unpolished. An overhaul was required to improve user onboarding & increase loan application success rate.

We set out to create a brand-new flow that encompasses up to date usability patterns, and updated aesthetics across the loan application lifetime. A major motivation was to build trust with the user via a polished and robust user experience.


HIGH LEVEL TIMELINE

3 Month Project

My Role

UX & UI design

KEY GOALS

Improve loan application journey.

MY ROLE

I led the project and worked on all aspects of the re-design, including its research, UX design,  and UI design (based on existing brand guidelines). I was directed and assisted in the project by stakeholders from across their business team.

I gathered feedback from staff members and used this information to identify areas for improvement in the current flow, and to map out alternative solutions.


I took charge of creating wireframes to visualise the new flow and

effectively communicate our ideas to the development team. I conducted research on similar products and best current practices for web form interactions.


By adopting a user-centered approach, I aimed to ensure the platform would meet the needs of users to provide a streamlined and effective solution to help SME’s access loans quickly.

Decision Makers

CEO

CTO

Project Manager

Financial Team

Risk Management Team

Regulatory Advisors

Customer Success team

Support Team

English Language Team

¡No hablo español!

I don’t speak Spanish!

No problem.

I don't understand Mexican financial regulations.

Ningún problema!

As soon as we had reliable translations of all the website, form copy & support documentation we were ready to dive in!


Googlesheets with side by side translations and sticky notes were invaluable tools as we began to unravel the current system.



DISCOVERY & EMPATHY

Firstly we established a core team of collaborators with a balance of product knowledge and bi-lingual translation skills.

We created a cloned translated site for us to use the existing product and gain experience to help with the discover phase.

Beginner mindset: To being with we used the existing product without any guidance from the clients staff. Based of scripts with expected outcomes. This allowed us to discover positives and limitations of the current product.

Stakeholder Interviews: I held one-on-one interviews with staff members to understand their perspective on the current loan application process, its strengths and weaknesses.

Gathering user feedback: The support staff had a log of feedback from user issues, we noted these insights to prioritise features and functionalities.

Journey Mapping: I worked with staff members to map the user journey, from the initial loan application to the final approval, to identify areas for improvement and opportunities to streamline the process. This gave me an understanding of the impact of design decisions on the ‘backend’ of the system.

Legal and Regulatory Review: We reviewed the legal and regulatory requirements for loan applications, working with staff members and legal experts as needed, to ensure that the loan application process complied with all necessary regulations. These elements were of the highest priority, as specific data or documentation was required at various stages in the loan lifecycle.

Pain Point Identification: I used the insights gathered through the stakeholder interviews and journey mapping to identify the pain points in the current loan application process, and prioritise solutions to address these issues.


Mapping the flow

We began by mapping the current journey, then expanded the application form flow & logic based on new requirements and desired features.

We grouped datasets based on:

User account vs loan fields

Existing input fields

New required regulatory fields

Info accessible via user submitted documentation

DEFINING USERS AND THEIR NEEDS

While the primary focus was on the SME loan applicant journey, we also considered how to ease the internal tasks of reviewing & authorising loan applications.

Loan applicants are primarily concerned with the ease of use of the website & and speed of the loan application process. They want a platform that is user-friendly, transparent, and allows them to quickly and easily access the financing they need. They also want a clear understanding of the eligibility criteria and loan terms and conditions, as well as the ability to track the status of their application in real-time.


Staff members responsible for reviewing and authorizing loan applications have a different set of concerns. They desire structured data with minimal input errors to quickly and accurately assess loan validity. As well as the ability to easily communicate with loan applicants if additional information is required.


To ensure that both the loan applicants and staff members are satisfied with the platform, it's important to strike a balance between ease of use and functionality. A platform that meets the needs of both groups will result in a smooth and efficient loan application process that benefits everyone involved.

Loan applicants are primarily concerned with the ease of use of the website & and speed of the loan application process. They want a platform that is user-friendly, transparent, and allows them to quickly and easily access the financing they need. They also want a clear understanding of the eligibility criteria and loan terms and conditions, as well as the ability to track the status of their application in real-time.


Staff members responsible for reviewing and authorizing loan applications have a different set of concerns. They desire structured data with minimal input errors to quickly and accurately assess loan validity. As well as the ability to easily communicate with loan applicants if additional information is required.


To ensure that both the loan applicants and staff members are satisfied with the platform, it's important to strike a balance between ease of use and functionality. A platform that meets the needs of both groups will result in a smooth and efficient loan application process that benefits everyone involved.

Loan applicants are primarily concerned with the ease of use of the website & and speed of the loan application process. They want a platform that is user-friendly, transparent, and allows them to quickly and easily access the financing they need. They also want a clear understanding of the eligibility criteria and loan terms and conditions, as well as the ability to track the status of their application in real-time.


Staff members responsible for reviewing and authorizing loan applications have a different set of concerns. They desire structured data with minimal input errors to quickly and accurately assess loan validity. As well as the ability to easily communicate with loan applicants if additional information is required.


To ensure that both the loan applicants and staff members are satisfied with the platform, it's important to strike a balance between ease of use and functionality. A platform that meets the needs of both groups will result in a smooth and efficient loan application process that benefits everyone involved.

APPLICANT

The SME journey, ease of use and providing fail safes were a primary concern.


These were workshopped using data from the current site and staff awareness of current pain points.

LOANS TEAM

We considered how the internal staff could be helped and explored frequent requested support issues that arose with their current system.


This included erroneous data prevention, access to 3rd party documentation.

REGULATORS

We were working within the strict regulations layed out by the national and local authorities.

This meant that depending on the type of business an SME was applying on behalf of that the flow & required inputs would vary.

ALIGNING GOALS FOR STAKEHOLDER

User Concerns

Support Concerns

Regulatory Concerns

IDEATION

To ensure the loan application form was user-friendly and intuitive I looked for best practices & influences within and outside of the financial industry

Conducting competitor analysis: I researched over 15 competitors and their onboarding processes to identify strengths and weaknesses, and establish a benchmark for the desired user experience.

Seeking inspiration and novel solutions: I looked beyond the loan industry and considered other industries and applications that may provide inspiration and novel solutions for the SME loan application.

Researching best practices and industry standards: I stayed up-to-date with the latest trends and techniques in HTML form design and user experience by reviewing case studies, articles, and other resources.

Competitor Research

We dissected onboarding flows from with the comparable businesses. The purpose was to highlight good patterns used & to flag any patterns we should avoid.

We repeated this process for over 15 websites and created a presentation in figma where the client could.


Navigate between selected site captures

Scroll inside screenshots to view entire page.

Recreated some on age interactions where relevant in the flow (modals & sliders)

WIRES & PROTOTYPES

Based on our research we created interactive prototypes for desktop and mobile views to test our ideas with the team and get feedback for further iterations.

Early feedback: I created low fidelity prototypes which allowed us to get feedback early in the process. Based on feedback we quickly iterated and made changes including interactions & copy that helped the flow.

User-focused design: Avoiding getting into the minutiae of design details at this phase allowed the considerations to be more user-centered, and less personally opinionated.

Communicate ideas with development team: The dev lead and CTO got a chance to review and feedback on the designs. This meant that any suggestions that were unfeasible, or would involve high development cost could be flagged up and discussed with their project manager.

Researching best practices and industry standards: I stayed up-to-date with the latest trends and techniques in HTML form design and user experience by reviewing case studies, articles, and other resources.

Early feedback: I created low fidelity prototypes which allowed us to get feedback early in the process. Based on feedback we quickly iterated and made changes including interactions & copy that helped the flow.

User-focused design: Avoiding getting into the minutiae of design details at this phase allowed the considerations to be more user-centered, and less personally opinionated.

Communicate ideas with development team: The dev lead and CTO got a chance to review and feedback on the designs. This meant that any suggestions that were unfeasible, or would involve high development cost could be flagged up and discussed with their project manager.

Researching best practices and industry standards: I stayed up-to-date with the latest trends and techniques in HTML form design and user experience by reviewing case studies, articles, and other resources.

Early feedback: I created low fidelity prototypes which allowed us to get feedback early in the process. Based on feedback we quickly iterated and made changes including interactions & copy that helped the flow.

User-focused design: Avoiding getting into the minutiae of design details at this phase allowed the considerations to be more user-centered, and less personally opinionated.

Communicate ideas with development team: The dev lead and CTO got a chance to review and feedback on the designs. This meant that any suggestions that were unfeasible, or would involve high development cost could be flagged up and discussed with their project manager.

Researching best practices and industry standards: I stayed up-to-date with the latest trends and techniques in HTML form design and user experience by reviewing case studies, articles, and other resources.

FOCUS ON BEST PRACTICES

Breaking the form into logical grouping, using form logic from our earlier map. We Used modified checkboxes with text and graphics to reduce cognitive load. We made inputs, placeholder & prompts highly accessible.
We made sure that the form could be saved and completed at a later time, and that all fields could be edited prior to offical submission.

SLICK INTERACTIVITY, BUT PROVIDE GUIDE RAILS

We made the form interactive so focus was placed on the current question and subsequent options were revealed when a choice was made. This allowed us to add some nice animated interactions, but we were cautious to include the ability for user to backtrack to different stages of the application, and to edit every previous field.

CONSIDERATION FOR BACK END

We documented all new required fields and wire-framed how this new data and documents would be integrated into the current system backend CMS.

Wireframing & Prototyping

I used Figma as the primary design tool for a number of reasons.


Allowed me to design with interactive features

Use components & state

Share live links with stakeholders

Inline feedback on the canvas with collborators

Wireframing & Prototyping

I used Figma as the primary design tool for a number of reasons.


Allowed me to design with interactive features

Use components & state

Share live links with stakeholders

Inline feedback on the canvas with collborators

Wireframing & Prototyping

I used Figma as the primary design tool for a number of reasons.


Allowed me to design with interactive features

Use components & state

Share live links with stakeholders

Inline feedback on the canvas with collborators

HIGH FIDELITY DESIGNS

When we were happy with the flow we integrated the brand guidelines and added polish to the interface.

Imported style guides: I created a new figma document using the same components but imported and applied visual identity of the company, including the brand colours, typography, and visual elements.

Make revisions: I shared the figma links and and we discussed the impact of our edits, this led changes based on feedback.

Modified interactions: I looked beyond the loan industry and considered other industries and applications that may provide inspiration and novel solutions for the SME loan application.

FIGMA AT THE CUTTING EDGE

As an advocate for Figma I used every new feature to bring together the highest fidelity designs & interactions in order to get sign off and clarify state & actions with the developers. Using components, variants, style rules, autolayout & prototype interactions we were able to bring the product to life and create complex user flows to tell our story.

High-fidelity designs

I used Figma as the primary design tool for a number of reasons.


Allowed me to design with interactive features

Use components & state

Share live links with stakeholders

Inline feedback on the canvas with collborators

High-fidelity designs

I used Figma as the primary design tool for a number of reasons.


Allowed me to design with interactive features

Use components & state

Share live links with stakeholders

Inline feedback on the canvas with collborators

High-fidelity designs

I used Figma as the primary design tool for a number of reasons.


Allowed me to design with interactive features

Use components & state

Share live links with stakeholders

Inline feedback on the canvas with collborators

TESTING & ITERATION

Prior to development we imported designs into useberry to test flows and get user feedback.

Comparative research: We created a mock-up of the existing application flow and one of our modified flow.

Useberry: Using useberry we set specific tasks for users to carry out and observed the results looking for: time to completion, success rate, erroneous click & inputs.


TESTING DISCOVERY

Finding were that completion time was 17% faster on the new design.

CHALLENGES & LESSONS

The challenges initially were overcoming the language barrier & assigning time to understand & research the industry and regulations.

Of course as the project proceeded we unearthed many problems, ideas solutions and each one of these had an impact on the scope & deliverables of the project.

IF THIS, THEN WHAT?

Here I have just focused on the application form, we also had to consider the impact on the ‘user dashboard’ where the applicant would be kept up to date about the status of their application, also the impact on the admin side.

A deeper study into the impact of changes at the start would have allowed us to ring fence various phases of the design and development. As implications were understood and added to the backlog of work it felt like scope creep rather than a second or third phase or work that was required, and factored in prior to initiating the design project.

NEXT STEPS

Due to changes in the structure of the company they focused on rebranding and have yet to implement our designs.

PERSONAL IMPACT

Despite the frustration of not getting to see my work in development (yet) I feel the project was very successful, both I and the clients learned a lot of valuable information during the discover and design process.


Our workflow of using a dual language spreadsheet helped empower everyone on their team to contribute to copy across the site. This helped improve consistency, provided better messaging and tone of voice. The process provided ownership to staff in Ireland and Mexico, bi-lingual or not, to contribute to user success.


Our research with support team and their platform helped inform decision to implement Hubspot as their CRM of choice. This allowed them to manage customer touch-points outside of the website, and a degree of flexibility as the business and its regulations changed.

Here is a demo of some of the interactions and form logic.

Here is a demo of some of the interactions and form logic.

Like what you see?

Lets chat.

Like what you see?

Lets chat.

CONTACT

©2023 by Seamus L