The testing results confirmed the benefits of the Modular Design approach in streamlining the application flow. Also, the customer service team shared an interesting observation. They noted that users responded positively to the inclusion of more vibrant colours and visually engaging elements in the app. This feedback indicated that incorporating playful and cartoonish elements could help reduce the perceived seriousness of the money-lending business.
Recognising the value of insights from the customer service team, I sought their input and feedback on my design approach. Their firsthand experience and interaction with our target users provided unique perspectives and valuable insights that were crucial in shaping the UX. By incorporating their feedback, I was able to bridge the gap between design and customer needs, ultimately resulting in a more effective and user-centric solution.
Sketching out Wireframes for testing
User Testing
Leveraging the diagram, I combined it with my own understanding of our target users and created a User Journey Mapping from a UX point of view.
It not only provides a logical depiction of how data is handled in various scenarios, allowing us to map out the flow with clarity, but also identifies opportunities for improvement. It helps us identify bottlenecks, gaps in information, or confusing interactions that can be optimised to improve the overall user experience.
With a clear understanding of the persona, I delved into decoding the user journey through our extensive loan application process. To begin, I closely examined the backend workflow crafted by our Tech Lead (@Anna Ovcharova). This comprehensive diagram elucidates the specific data required at each stage of the flow, essentially functioning as a Decision Tree Diagram.
Mapping out a User Journey
User Journey Mapping
What's even better? My collaboration with the development team led to the discovery that certain steps could be streamlined and enhanced through the use of OCR (Optical Character Recognition) technology. Users no longer had to manually input all their information piece by piece. Instead, they could simply take a photo of the required document, and the system would automatically extract the necessary data, reducing the need for manual data entry.
By adopting the principles of "Modular Design", I introduced a revamped user flow that divided the application process into manageable, bite-sized steps. Each step or module represents a distinct milestone, allowing users to progress through the application at their own pace. With this approach, users have the flexibility to pause and resume their progress seamlessly, enhancing their overall experience.
*Modular Design in UX refers to a design approach that breaks down a system or interfaces into smaller, independent modules or components. The goal of modular design is to promote reusability, scalability, and consistency in the design process.
I visualised the existing application process, which was complex and involved multiple steps. It required users to provide various types of personal documents that they often did not have readily available. Very few users could get through in one sitting.
Having gained a thorough understanding of our target users and their journey through our service, the challenge at hand was to simplify the lengthy process. Simultaneously, I needed to ensure that the design remained scalable and flexible enough, UX-wise, to accommodate the dynamic nature of our company's business model.
Optimising with the "Modular Design" concept
Design Concept
TOOLS
Figma, Amplitude
DURATION
9 Months
MY ROLE
UX Design, UI Design,
User Research
Grantit Financial - Mobile App UX/UI Design
Grantit Financial is a fintech firm that solely relies on its mobile app. With intelligent in-house credit modelling, Grantit aims to offer personal finance solutions to people with low financial literacy.
APPLE STORE RATING
4.8/5
DOWNLOADS
100,000+
Over the course of nine months, I worked closely with the company's CEO and our head developer, taking on a versatile role and achieving three accomplishments:
-
I designed the customer-facing mobile app from the ground up. From the ideation to the final release, it was fulfilling to see the app achieve a 4.8/5 app store rating;
-
I conducted extensive user research, which served as a strong foundation for the rapid expansion of our business and the continuous improvement of our app;
-
In collaboration with our UI designer, I played a key role in creating a comprehensive design system and Component Library. This helped establish consistency throughout the entire design process.
A 10-second summary in case you're in a hurry
To enhance efficiency, Jean and I developed a comprehensive Component Library as an integral part of our design system. We meticulously gathered and standardised all reusable visual elements to align seamlessly with our branding. This included buttons, forms, cards, illustrations, and input fields, all designed with scalability and predefined specifications. By doing so, we ensured consistent and streamlined design development for future projects.
Building a Component Library
Design System
The Problem: As a rapidly growing FinTech start-up, the firm faced the challenge of designing an app that could scale effectively to accommodate its rapid growth.
Design Brief - The Challenge
Problem Statement
See other projects
Shoot me a message on LinkedIn or Email me at info@hello-chen.com
Q: How does a Use Persona help?
To gain a comprehensive understanding of the app's intended users, I spent a week sitting with our customer service team, closely observing their interactions with our customers. This immersion allowed me to identify their pain points and challenges. By empathising with their experiences, I was able to maintain a user-centred approach throughout the design process.
It's important to start a UX project by understanding the target users' needs, behaviours, goals, and preferences. After several meetings with our customer service team and marketing team, I created Oliver Szeto, a 25-year-old looking for financial advice and quick cash loans.
UX Persona for accurate targeting
UX Research
Adding Engaging Illustrations
As our users expressed their desire for more engaging visuals in the app, I recognised the opportunity to break away from traditional banking imagery. Incorporating illustrations could not only enhance the UX but also contribute to building a unique brand personality. Collaborating with our visual designer (@Jean Huang), we embarked on creating a captivating visual identity that aligns with our values and resonates with our audience.
OCR Technology
The loan application process involved collecting a significant amount of personal information for identity verification. To guide users through this process, we implemented user-friendly features in the UX that assisted them in uploading the correct documents. Additionally, we integrated OCR (Optical Character Recognition) technology to automate the extraction of relevant data from the documents. This streamlined the process, reducing manual effort and minimising the potential for errors.
Modular Design
I prototyped the entire app with a modular approach, where functions and features were developed as independent modules. This not only visually distinguishes different functionalities for users, but also allows for a flexible UX. It enables the development team to easily introduce new features or retire old ones without the need to modify the entire layout. Each module can be manipulated individually, ensuring efficient and scalable design updates.
To deliver a seamless user experience for both Android and Apple users, we implemented our final product using React Native. This allowed us to leverage the advantages of cross-platform development. In terms of responsiveness, I employed grid systems that automatically adapted to various screen sizes. Additionally, to optimize readability, I paid close attention to typography, carefully selecting appropriate font sizes and line heights in both English and Chinese versions of the app.