#designsystem

#mobile

#figma

#web

#development

QuickFi

QuickFi

QuickFi

QuickFi

QuickFi

QuickFi

QuickFi is the product of Innovation Finance, a startup in the Equipment Finance industry. This wasn't merely a simple redesign. QuickFi represents over four years of dedicated work as part of a development team focused on enhancing and expanding the application's capabilities.

QuickFi is the product of Innovation Finance, a startup in the Equipment Finance industry. This wasn't merely a simple redesign. QuickFi represents over four years of dedicated work as part of a development team focused on enhancing and expanding the application's capabilities.

QuickFi is the product of Innovation Finance, a startup in the Equipment Finance industry. This wasn't merely a simple redesign. QuickFi represents over four years of dedicated work as part of a development team focused on enhancing and expanding the application's capabilities.

QuickFi is the product of Innovation Finance, a startup in the Equipment Finance industry. This wasn't merely a simple redesign. QuickFi represents over four years of dedicated work as part of a development team focused on enhancing and expanding the application's capabilities.

QuickFi is the product of Innovation Finance, a startup in the Equipment Finance industry. This wasn't merely a simple redesign. QuickFi represents over four years of dedicated work as part of a development team focused on enhancing and expanding the application's capabilities.

QuickFi is the product of Innovation Finance, a startup in the Equipment Finance industry. This wasn't merely a simple redesign. QuickFi represents over four years of dedicated work as part of a development team focused on enhancing and expanding the application's capabilities.

Timeline

2020 - present

Role

UX Engineer

Timeline

2020 - present

Role

UX Engineer

Background

Background

QuickFi is a smartphone application enabling borrowers to independently commence and finalize equipment loans within a brief span of less than three minutes. The platform's design empowers them with absolute management of the end-to-end process, eliminating the need for continuous emailing, telephonic communication, or dine-outs with representatives. Borrowers can initiate financing at their leisure, assured of a consistent, transparent interest rate throughout the loan period via QuickFi's secured system. As a part of the software development team responsible for augmenting and broadening the app's functionalities, I not only designed solutions for both Android and iOS platforms but also spearheaded the Android development process.

Challenges

Challenges

1

User acquisition

The application witnessed a sparse user base, greatly worrying for the current business model.

1

User acquisition

The application witnessed a sparse user base, greatly worrying for the current business model.

1

User acquisition

The application witnessed a sparse user base, greatly worrying for the current business model.

1

User acquisition

The application witnessed a sparse user base, greatly worrying for the current business model.

1

User acquisition

The application witnessed a sparse user base, greatly worrying for the current business model.

2

Onboarding

QuickFi's initial goal with its application was to provide its users a seamless, self-sufficient financing journey. We achieved this goal by eliminating the need for users to contact anyone during transactions. Despite our efforts, there were some customer support calls, prompting us to do a thorough review of the onboarding process.

2

Onboarding

QuickFi's initial goal with its application was to provide its users a seamless, self-sufficient financing journey. We achieved this goal by eliminating the need for users to contact anyone during transactions. Despite our efforts, there were some customer support calls, prompting us to do a thorough review of the onboarding process.

2

Onboarding

QuickFi's initial goal with its application was to provide its users a seamless, self-sufficient financing journey. We achieved this goal by eliminating the need for users to contact anyone during transactions. Despite our efforts, there were some customer support calls, prompting us to do a thorough review of the onboarding process.

2

Onboarding

QuickFi's initial goal with its application was to provide its users a seamless, self-sufficient financing journey. We achieved this goal by eliminating the need for users to contact anyone during transactions. Despite our efforts, there were some customer support calls, prompting us to do a thorough review of the onboarding process.

2

Onboarding

QuickFi's initial goal with its application was to provide its users a seamless, self-sufficient financing journey. We achieved this goal by eliminating the need for users to contact anyone during transactions. Despite our efforts, there were some customer support calls, prompting us to do a thorough review of the onboarding process.

3

Identity Verification

I observed that the onboarding process, divided into four steps, faced significant issues during the final step: ID verification. Many users experienced difficulties completing this step, this increase the number of support calls. It also blocked the user from completing the transaction until the ID verificaiton was complete.

3

Identity Verification

I observed that the onboarding process, divided into four steps, faced significant issues during the final step: ID verification. Many users experienced difficulties completing this step, this increase the number of support calls. It also blocked the user from completing the transaction until the ID verificaiton was complete.

3

Identity Verification

I observed that the onboarding process, divided into four steps, faced significant issues during the final step: ID verification. Many users experienced difficulties completing this step, this increase the number of support calls. It also blocked the user from completing the transaction until the ID verificaiton was complete.

3

Identity Verification

I observed that the onboarding process, divided into four steps, faced significant issues during the final step: ID verification. Many users experienced difficulties completing this step, this increase the number of support calls. It also blocked the user from completing the transaction until the ID verificaiton was complete.

3

Identity Verification

I observed that the onboarding process, divided into four steps, faced significant issues during the final step: ID verification. Many users experienced difficulties completing this step, this increase the number of support calls. It also blocked the user from completing the transaction until the ID verificaiton was complete.

4

Information and Navigation

While users were successfully navigating through the initial stages, significant issues arose at the payment phase. Users struggled to locate essential information such as payment amounts and schedules, leading to frustration and confusion.

4

Information and Navigation

While users were successfully navigating through the initial stages, significant issues arose at the payment phase. Users struggled to locate essential information such as payment amounts and schedules, leading to frustration and confusion.

4

Information and Navigation

While users were successfully navigating through the initial stages, significant issues arose at the payment phase. Users struggled to locate essential information such as payment amounts and schedules, leading to frustration and confusion.

4

Information and Navigation

While users were successfully navigating through the initial stages, significant issues arose at the payment phase. Users struggled to locate essential information such as payment amounts and schedules, leading to frustration and confusion.

4

Information and Navigation

While users were successfully navigating through the initial stages, significant issues arose at the payment phase. Users struggled to locate essential information such as payment amounts and schedules, leading to frustration and confusion.

4

Modernization

The application's overall UI was outdated and required a modern redesign.

4

Modernization

The application's overall UI was outdated and required a modern redesign.

4

Modernization

The application's overall UI was outdated and required a modern redesign.

4

Modernization

The application's overall UI was outdated and required a modern redesign.

4

Modernization

The application's overall UI was outdated and required a modern redesign.

Solutions

Solutions

A combination of user experience (UX) and business approaches mitigated these issues appropriately. We implemented a heuristic analysis and communicated its conclusions to our stakeholders. Utilizing these insights, we charted several critical alterations necessary for QuickFi's success.

Business Strategy

The subsequent alterations in business significantly swayed the number of users, which in turn greatly influenced our initial redesign plans to the extent that we chose to begin afresh. Moreover, it catalysed the emergence of an online portal made for establishing client deals.

1

Partners

Instead of relying on users to find and use our app independently, management decided to onboard manufacturing partners and direct customers to finance through QuickFi using the Partner Portal.

1

Partners

Instead of relying on users to find and use our app independently, management decided to onboard manufacturing partners and direct customers to finance through QuickFi using the Partner Portal.

1

Partners

Instead of relying on users to find and use our app independently, management decided to onboard manufacturing partners and direct customers to finance through QuickFi using the Partner Portal.

1

Partners

Instead of relying on users to find and use our app independently, management decided to onboard manufacturing partners and direct customers to finance through QuickFi using the Partner Portal.

1

Partners

Instead of relying on users to find and use our app independently, management decided to onboard manufacturing partners and direct customers to finance through QuickFi using the Partner Portal.

2

Credit Lines

QuickFi was originally created for users to finance directly through us. However, with the inclusion of partners and their finance teams, QuickFi evolved into a platform for their use as well. Each partner wanted to extend their own line of credit to customers.

2

Credit Lines

QuickFi was originally created for users to finance directly through us. However, with the inclusion of partners and their finance teams, QuickFi evolved into a platform for their use as well. Each partner wanted to extend their own line of credit to customers.

2

Credit Lines

QuickFi was originally created for users to finance directly through us. However, with the inclusion of partners and their finance teams, QuickFi evolved into a platform for their use as well. Each partner wanted to extend their own line of credit to customers.

2

Credit Lines

QuickFi was originally created for users to finance directly through us. However, with the inclusion of partners and their finance teams, QuickFi evolved into a platform for their use as well. Each partner wanted to extend their own line of credit to customers.

2

Credit Lines

QuickFi was originally created for users to finance directly through us. However, with the inclusion of partners and their finance teams, QuickFi evolved into a platform for their use as well. Each partner wanted to extend their own line of credit to customers.

User Experience

A redesign involves updating the interface to modernize the design and ensure the user experience aligns with their expectations.

1

Eleminate Irrelavent Features

The Home screen is the most frequently accessed page in the app, serving as a key guide for users. To enhance its usability, it is crucial to remove irrelevant details. One of the componets removed was the QuickFi score. Originally intended to function like a credit score for evaluating a company's creditworthiness, it proved to be confusing and added no real value to users.

1

Eleminate Irrelavent Features

The Home screen is the most frequently accessed page in the app, serving as a key guide for users. To enhance its usability, it is crucial to remove irrelevant details. One of the componets removed was the QuickFi score. Originally intended to function like a credit score for evaluating a company's creditworthiness, it proved to be confusing and added no real value to users.

1

Eleminate Irrelavent Features

The Home screen is the most frequently accessed page in the app, serving as a key guide for users. To enhance its usability, it is crucial to remove irrelevant details. One of the componets removed was the QuickFi score. Originally intended to function like a credit score for evaluating a company's creditworthiness, it proved to be confusing and added no real value to users.

1

Eleminate Irrelavent Features

The Home screen is the most frequently accessed page in the app, serving as a key guide for users. To enhance its usability, it is crucial to remove irrelevant details. One of the componets removed was the QuickFi score. Originally intended to function like a credit score for evaluating a company's creditworthiness, it proved to be confusing and added no real value to users.

1

Eleminate Irrelavent Features

The Home screen is the most frequently accessed page in the app, serving as a key guide for users. To enhance its usability, it is crucial to remove irrelevant details. One of the componets removed was the QuickFi score. Originally intended to function like a credit score for evaluating a company's creditworthiness, it proved to be confusing and added no real value to users.

2

Modernization and Removing Inconsistencies

During the development process, notable inconsistencies emerged in the user interface (UI) elements across the iOS, Android, and Web platforms. These discrepancies were not only present between the different platforms but also across various screens within the app itself. To address this issue and ensure a cohesive and consistent design experience throughout the application, I took the initiative to create a comprehensive component library using Figma.

2

Modernization and Removing Inconsistencies

During the development process, notable inconsistencies emerged in the user interface (UI) elements across the iOS, Android, and Web platforms. These discrepancies were not only present between the different platforms but also across various screens within the app itself. To address this issue and ensure a cohesive and consistent design experience throughout the application, I took the initiative to create a comprehensive component library using Figma.

2

Modernization and Removing Inconsistencies

During the development process, notable inconsistencies emerged in the user interface (UI) elements across the iOS, Android, and Web platforms. These discrepancies were not only present between the different platforms but also across various screens within the app itself. To address this issue and ensure a cohesive and consistent design experience throughout the application, I took the initiative to create a comprehensive component library using Figma.

2

Modernization and Removing Inconsistencies

During the development process, notable inconsistencies emerged in the user interface (UI) elements across the iOS, Android, and Web platforms. These discrepancies were not only present between the different platforms but also across various screens within the app itself. To address this issue and ensure a cohesive and consistent design experience throughout the application, I took the initiative to create a comprehensive component library using Figma.

2

Modernization and Removing Inconsistencies

During the development process, notable inconsistencies emerged in the user interface (UI) elements across the iOS, Android, and Web platforms. These discrepancies were not only present between the different platforms but also across various screens within the app itself. To address this issue and ensure a cohesive and consistent design experience throughout the application, I took the initiative to create a comprehensive component library using Figma.

The component library I was creating in Figma served as a single source of truth for the app's design system. It provided a clear reference for how each UI element should look and behave, ensuring that designers and developers across different teams and platforms could easily adhere to the established design guidelines.

Within the component library, I meticulously documented and organized the various UI components, specifying their visual properties, interactions, and usage guidelines. This approach not only facilitated a cohesive design language but also streamlined the development process by reducing the need for redundant work and minimizing the risk of introducing new inconsistencies.

3

Task Urgency

One of the most important aspects of design is managing interruptions. These interruptions can be urgent, help progress a current task, or provide information the user cares about. Although the app's code was optimized for reuse, it led to a situation where all notifications, wewere delivered as a series of interruptions. This either completely blocked the user from accomplishing their task or, at the very least, disrupted their thought process.

3

Task Urgency

One of the most important aspects of design is managing interruptions. These interruptions can be urgent, help progress a current task, or provide information the user cares about. Although the app's code was optimized for reuse, it led to a situation where all notifications, wewere delivered as a series of interruptions. This either completely blocked the user from accomplishing their task or, at the very least, disrupted their thought process.

3

Task Urgency

One of the most important aspects of design is managing interruptions. These interruptions can be urgent, help progress a current task, or provide information the user cares about. Although the app's code was optimized for reuse, it led to a situation where all notifications, wewere delivered as a series of interruptions. This either completely blocked the user from accomplishing their task or, at the very least, disrupted their thought process.

3

Task Urgency

One of the most important aspects of design is managing interruptions. These interruptions can be urgent, help progress a current task, or provide information the user cares about. Although the app's code was optimized for reuse, it led to a situation where all notifications, wewere delivered as a series of interruptions. This either completely blocked the user from accomplishing their task or, at the very least, disrupted their thought process.

3

Task Urgency

One of the most important aspects of design is managing interruptions. These interruptions can be urgent, help progress a current task, or provide information the user cares about. Although the app's code was optimized for reuse, it led to a situation where all notifications, wewere delivered as a series of interruptions. This either completely blocked the user from accomplishing their task or, at the very least, disrupted their thought process.

In order to address this challenge, we polished our approach related to delivering notifications. Alerts got structured based on their severity and pertinence to the user's current activity. Immediate alerts like ID confirmation or unfinished setup surfaced as overlays. These provided a chance to delay the task, however, it would reappear in the next session, and remained vital for initiating transactions. Conversely, non-emergency notifications were shown in a less intrusive style: a task list on the main page. This strategy allowed the user to survey all transactions demanding their attention, without deviating their focus from the current task. We succeeded in consolidating seven pop-ups into a single list which uniquely improved the cumulative user experience of the app.

4

Navigation

The app's user journey was far from perfect, to put it mildly. Unnecessary and obsolete selections were present in the navigation. For example, the Invoices selections and the New Invoices feature both led the user to practically identical pages, with the slight variation of displaying a dropdown list when the add button was tapped.

4

Navigation

The app's user journey was far from perfect, to put it mildly. Unnecessary and obsolete selections were present in the navigation. For example, the Invoices selections and the New Invoices feature both led the user to practically identical pages, with the slight variation of displaying a dropdown list when the add button was tapped.

4

Navigation

The app's user journey was far from perfect, to put it mildly. Unnecessary and obsolete selections were present in the navigation. For example, the Invoices selections and the New Invoices feature both led the user to practically identical pages, with the slight variation of displaying a dropdown list when the add button was tapped.

4

Navigation

The app's user journey was far from perfect, to put it mildly. Unnecessary and obsolete selections were present in the navigation. For example, the Invoices selections and the New Invoices feature both led the user to practically identical pages, with the slight variation of displaying a dropdown list when the add button was tapped.

4

Navigation

The app's user journey was far from perfect, to put it mildly. Unnecessary and obsolete selections were present in the navigation. For example, the Invoices selections and the New Invoices feature both led the user to practically identical pages, with the slight variation of displaying a dropdown list when the add button was tapped.

Furthermore, a significant issue repeatedly encountered by our customers was finding information related to payments, timelines, and reaching the agreement after concluding the deal. Many issues were addressed with the implementation of several changes to the navigation panel.

Original

Payment Issues and Navigation Bar Update

In the first update of the navigation bar, the billing section was moved from the reporting tab to its own section. This change aimed to address payment issues.

Document Upload Process

QuickFi required users to provide additional fiscal details during financing. Users could upload a PDF or a snapshot of the requested documents. However, users were only prompted to upload documents at login, with no alternate access method within the app. This limited prompt visibility was a significant drawback.

Version 2 Navigation Bar Changes

In Version 2, the Billing and Documents sections were merged into a "More" section. This was not optimal, as users struggled to locate the billing section.

New Invoice Button and Navigation Bar Revamp

The "New Invoice" button lost its value after QuickFi onboarded partners and dealerships. Most users accessed the app to complete pre-setup deals with invoices already uploaded. I suggested a revamped layout to streamline the navigation bar aesthetics and functionality.

By moving the "New Invoice" button to a Floating Action Button (FAB) on the Invoices page, users retained the ability to upload invoices for standalone transactions. This change freed up space on the navigation bar to accommodate both billing and document sections individually.

Final Adjustments and Integration

Ultimately, the document segment was incorporated into Billing through a thorough overhaul. This modification integrated a third-party system for efficient creation of invoices, improving the Billing page's overall functionality. To signify a document request, a badge was added to the Billing tab.

Tools

Tools

Figma

Android Studio

Github

Salesforce

Conclusion

During the span of the project, there were multiple instances that necessitated me to re-check and reassess the devised user interfaces I was engaged with and had implemented in the application, sometimes within mere 24 hours after being launched, due to insufficient user interaction, code efficacy, or just to line up with the firm's preferred user pathway.

Although this wasn't unforeseen, it was always more desirable to predict these alterations prior to beginning the developmental task. I noticed that sharing the draft of anticipated design modifications not only with the development squad but also with the Operations significantly helped diminish the volume of redesigns and redevelopment. This was instrumental in eliminating superfluous components and streamline the design for a superior UX.

Built in Framer · Made by Manu Suresh · ©2024

Built in Framer · Made by Manu Suresh · ©2024

Built in Framer · Made by Manu Suresh · ©2024

Built in Framer · Made by Manu Suresh · ©2024

Built in Framer · Made by Manu Suresh · ©2024