
LINH MCDERMOTT
UBank home loan tracker
One of projects I've been involved in was designing the innovative Home Loan Tracker. This tool was conceived to provide customers with real-time updates on their mortgage application progress, ensuring they always know where they stand in the process.
UBank, is dedicated to making the home buying journey as smooth and stress-free as possible. Recognizing the complexities and anxieties often associated with applying for a mortgage, we embarked on a mission to transform this experience for our customers.
Understanding Customer Pain Points
The journey began with in-depth research to understand the pain points and frustrations customers face when applying for a mortgage. Through interviews, surveys, and user journey mapping, we uncovered a common theme: the lack of transparency and communication during the loan approval process left customers feeling anxious and uninformed.
Crafting a Seamless Experience
Armed with these insights, our design team set out to create a solution that would address these challenges head-on. The Home Loan Tracker was designed to be an intuitive, user-friendly tool that provides step-by-step updates on the status of a mortgage application. Customers can see which documents have been received, which are still pending, and get an estimated timeline for each stage of the approval process.
Case study
A case study of the UX end-to-end process for UBank home loans including user testing from inception to high fidelity design.
Case study PDF
A case study of the UX end-to-end process for UBank home loans including user testing from Inception to high fidelity design
Design Workshops
Collaborative Design Process
The design process was highly collaborative, involving close work with stakeholders from various departments, including customer service, IT, and compliance. I created service design maps to visualize the entire end-to-end journey and ensure every touchpoint was accounted for. I facilitated a series of discovery workshops to define the problem and other discovery workshops to sketch possible solutions.
Hi-fidelity designs, QA and HTML/CSS implementation
This stage was all about precision and attention to detail, transforming initial concepts into a polished, user-ready interface. Ensuring a smooth transition from design to development was paramount. I worked closely with the development team, providing detailed design specifications and guidelines to maintain design integrity during the implementation phase. Beyond delivering the designs, I played an active role in assisting developers with the implementation of components in HTML and CSS.
Iteravtive design workshops
The initial workshop for problem identification and co-designing solutions is a pivotal moment in the project journey. This workshop brings together the project team and stakeholders to collaboratively define the problem space and brainstorm innovative solutions. By fostering an open and inclusive environment, we encourage diverse perspectives and ideas, ensuring a comprehensive understanding of the challenges at hand.
During this workshop, we engage in various activities such as problem framing, ideation sessions, and user journey mapping. We leverage techniques like brainstorming, affinity mapping, and scenario building to explore potential solutions. The collaborative nature of the workshop allows us to align on project goals, set clear objectives, and establish a shared vision for the desired outcomes.
Stakeholders' insights are invaluable as they bring firsthand knowledge of the business context and user needs. By involving them early in the process, we ensure that the solutions we co-design are both feasible and impactful. This initial workshop sets the foundation for a user-centered design approach, guiding the subsequent phases of the project with a clear, well-defined problem statement and a roadmap for developing effective, user-friendly solutions.
![]() | ![]() | ![]() |
---|---|---|
![]() | ![]() | ![]() |
![]() | ![]() | ![]() |
![]() |
High fidelity designs, QA and implementation
Refining and Bringing Designs to Life
The journey of creating the Home Loan Tracker at UBank didn’t stop at mid-fidelity designs. The next critical phase involved refining these designs into high-fidelity interactive prototypes. This stage was all about precision and attention to detail, transforming initial concepts into a polished, user-ready interface.
Collaborating in an Agile/SCUM Environment
Working as part of an agile/SCUM delivery team, the process was dynamic and iterative. Collaboration was key. Regular reviews with the technology and engineering teams ensured that every design element was evaluated for technical feasibility and buildability. This collaborative approach was crucial in identifying potential technical challenges early on, allowing us to adjust designs before they reached the development stage.
Creating Pixel-Perfect Designs
With feedback and insights from the engineering team, I meticulously refined the designs, ensuring they were pixel-perfect and ready for development. High-fidelity prototypes were crafted to provide a clear and detailed representation of the final product. These prototypes were not just visually appealing but also interactive, allowing stakeholders to experience the design’s functionality firsthand.
Handing Off to Developers
Once the high-fidelity prototypes were perfected, it was time to hand them off to the developers. But my role didn’t end there. Ensuring a smooth transition from design to development was paramount. I worked closely with the development team, providing detailed design specifications and guidelines to maintain design integrity during the implementation phase.
Supporting Implementation in HTML/CSS
Beyond delivering the designs, I played an active role in assisting developers with the implementation of components in HTML and CSS. This hands-on support involved troubleshooting, refining code, and ensuring that the final product matched the high-fidelity prototypes down to the last detail. By bridging the gap between design and development, we were able to create a seamless and consistent user experience.
Final designs
Bringing the Vision to Reality
This meticulous process of refining designs and collaborating closely with the development team culminated in the successful realization of the Home Loan Tracker. The result was a robust, user-friendly tool that transformed how customers interacted with their mortgage applications, providing clarity, transparency, and peace of mind.
Every step, from mid-fidelity designs to the final implementation, was a testament to the power of collaborative and iterative design. By working closely with technology and engineering teams and supporting the development process, we ensured that the Home Loan Tracker was not only technically sound but also a true reflection of our vision to enhance the customer experience at UBank.
![]() | ![]() | ![]() |
---|---|---|
![]() | ![]() |