Embedded Files
This project spanned 13 weeks, during which we navigated through two key phases: design iteration and development sprints. In the first four weeks, we focused on design iteration, where we delved deeply into understanding the problem, exploring its intricacies, and ideating potential solutions. The remaining weeks were dedicated to development, where we adopted an Agile methodology, working in two-week sprints to bring our ideas to life. This structured approach allowed us to refine our concepts and iteratively build a robust and effective solution.
Phase 1: Design Iterations
Understanding the Problem and Users
As a group, we embarked on a comprehensive exploration to identify and understand the various challenges faced by different stakeholders. Through this process, we systematically narrowed down the problem and clearly defined our target group. To gain deeper insights, we developed detailed user personas, which allowed us to better empathize with and address the specific needs and pain points of our target users. These personas played a crucial role in shaping our approach, ensuring that our solutions are aligned with the real-world experiences and expectations of those we aim to serve.
Problem Statement Crafting
Refined User Personas
Storyboarding to Understand Users
Once we have finalised our problem statement and user, we embarked on storyboarding of the problem to bring the problem into visuals, making it easier to understand and communicate complex issues. By creating a series of illustrations or diagrams, we visually mapped out the user’s journey, highlighting key pain points and interactions. This approach allowed us to break down the problem into manageable segments, offering a clear and concise way to see how different aspects of the issue affect the user. Through storyboarding, we could more effectively empathize with our target audience, facilitating better decision-making and solution development.
Storyboard 1
" As a foreigner who needs to submit multiple documents for card application, I have to comb through the site to find the application checklist and I have to interpret what are the required documents mentioned in the application checklist."
How can we make the checklist for documents required easily accessible and understandable?
Storyboard 2
"As a foreigner who did not double-check my document submissions, I have to go through multiple rounds of communications with the bank operation staffs in order to complete my application properly."
How can we make the documents submission page more intuitive such that it reduces the need to manually double check my submitted documents in the event of erroneous submissions?
User Stories
Based on the problem we have identifies, we crafted specific user stories to capture the needs and goals of our users in a clear and concise manner. This approach helps us stay focused on the user’s needs throughout the development process. By breaking down the project into individual user stories, we can prioritize features, plan our sprints more effectively, and ensure that the final product aligns closely with the expectations and requirements of the users.
User Scenarios
Prototyping
During both Iteration 1 and 2, we developed Lo-Fi paper prototypes to visualize our proposed User Interface (UI) solutions. These prototypes allowed us to quickly and effectively communicate our design concepts. By sketching out the interface elements and user interactions on paper, we were able to explore different ideas and make iterative improvements based on feedback. We then presented these prototypes to our professors, gaining valuable insights that helped refine our designs before moving on to more detailed development stages.
Paper Prototype of Iteration 1 and Iteration 2
Additionally, we created a Medium-Fidelity prototype using Figma to further facilitate communication with our mentors online. This digital prototype allowed us to present a more detailed and interactive version of our design, making it easier for our mentors to understand our concepts and provide valuable feedback. Moreover, it played a crucial role in our user interviews, enabling us to gather more insightful feedback on the user interface and overall user experience, which we then used to refine and improve our design.
Figma sample page
Further Explore Our Figma Prototype: Access it here!
User Interviews and Surveys
We presented three different types of user flows in Figma, allowing users to interact with each flow and providing us with valuable feedback through interviews. After conducting a series of interviews, we determined that the most effective flow involved having the document upload step come first, followed by the application form page. This sequence not only streamlined the user experience but also addressed key concerns raised by our users. Additionally, this process gave us the opportunity to clarify and double-check whether the problems we identified were accurate or if there were any issues we had missed.
Dig Deep into our Design Iteration Journey and access our Miro Board!
Phase 2: Development Sprints
Sprint 1 : Toggle Side Bar
"As a foreigner, I want to be able to see everything that I am required to submit without having to key in any information."
In our first sprint, we implemented a toggle sidebar where users can easily access all the infromation required for their credit card application before starting their application.
Initially, the buttons on the next page were only greyed out but still clickable. However, after receiving feedback from our mentors and professors, we adjusted the design so that these buttons are now both non-clickable and greyed out to prevent any confusion. This update ensures a clearer and more user-friendly experience, guiding users through the application process without unnecessary distractions or errors.
Sprint 2 : Application Checklist and Document Upload Page
"As a foreigner, I want the application checklist to be clearly apparent when I am applying for cards, and for it to be clear and concise with visual documentation so that I am clear of what are the key documents required."
Current DBS Application Checklist
Revamped Application Checklist
For the second sprint, We revamped the application checklist page to make it more intuitive and user-friendly for all types of users. With the addition of toggle buttons and a clear separation of categories, different user profiles can easily view their required documents. Moreover, the visual documentation feature assists users, especially foreigners, in identifying and visualizing what each document should look like, ensuring they submit the correct type. This enhancement significantly improves the clarity and ease of the document submission process, making it accessible and straightforward for everyone.
Current DBS Document Upload Page
Revamped Document Upload Page
In addition to revamping the application checklist, we enhanced the document upload page to make it more customizable. Previously, all users saw the same document upload page, but in the upgraded version, the page dynamically adapts based on the user type. This means users will now see a tailored document upload page that specifically requests the documents relevant to their profile. This customization ensures that each user only submits the necessary documents, streamlining the process and reducing any potential confusion. Additionally, to prevent users from submitting an incomplete application, we disabled the “Next” button until the applicant has successfully uploaded all the required documents. This ensures that all necessary information is provided before proceeding, further enhancing the user experience.
Sprint 3 : Document Optical Character Recognition (OCR)
"As a foreigner, I want to make sure I have submitted the correct documents to avoid multiple communications with DBS"
In Sprint 3, we began working on our AI feature, implementing a document OCR (Optical Character Recognition) system to verify whether the correct documents were uploaded. Using the Vertex AI API, we integrated Gemini to assess each document and determine whether it meets the required criteria, providing a “True” or “False” response. This OCR feature effectively filters out incorrectly uploaded documents, ensuring that only valid submissions proceed, thereby streamlining the process and reducing errors.
Sprint 4 : Autofill and FAQ ChatBot
"As a foreigner applying for a credit card, filling in the required personal information can be a tedious and repetitive process. This feature aims to streamline the application process by automatically pre-filling certain fields based on uploaded documents."
In our final sprint, we implemented an autofill feature to enhance user convenience. This feature removes the tedious task of manually filling out the application form after document submission. By leveraging Document AI, we automatically extract the required information from the uploaded documents and fill in the form accordingly. To ensure accuracy and user control, we made all AI-pre-filled fields editable, allowing users to review and adjust the information if needed. This combination of automation and flexibility streamlines the application process while maintaining accuracy and user satisfaction.
On top of the autofill features, we also added an FAQ Chatbot to assist users with their questions. Leveraging Document AI and Vertex AI, the chatbot can extract relevant information and provide accurate answers to user inquiries in real time. This integration not only enhances user experience by offering instant support but also ensures that users have access to the information they need throughout the application process, making it more seamless and user-friendly.
Want to try our project? Access it here!
Page updated
Google Sites
Report abuse