#designsystem
#mobile
#figma
#web
#development
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.
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.
User Experience
A redesign involves updating the interface to modernize the design and ensure the user experience aligns with their expectations.
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.
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.
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.
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.
