top of page

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.

02-progress03 Income@2x.png
Ubank processes.pptx.jpg

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 

IMG_7772.JPG

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.

IMG_7783.JPG

Mid-fidelity review

Internal review workshops for mid-fidelity designs with the project team of developers/engineers

UbankResearch.jpg

Design validation 

Create a clickable prototypes to demonstrate to business the design solution and collate feedback. Organise and facilitate informal user concept testing with admin staff as well as formal usability testing with external customers

02-progress03 Income@2x.png

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.

01 Co design workshops
02 Co design workshops
03 Co design workshops
04 Co design workshops
05 Co design workshops
06 Co design workshops
07 Co design workshops
08 Co design workshops
09 Co design workshops
10 Co design workshops

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.

01 Ubank home loan tracker dashboard start application
02 Tracker dashboard progress
03 TrackerVarification1@2x
04 Tracker Identification Copy@2x
05 Tracker Income Upload
bottom of page