Please note that some artifacts and sensitive information will be post-processed or excluded for confidentiality issues. All rights reserved to the publisher and designed institution(s) with no distribution.


OVERVIEW

Our client is a federally regulated Schedule 1 Bank headquartered in Toronto which provides non-prime and near-prime mortgages to borrowers who cannot obtain a mortgage through traditional channels. The project was built on the work with the product team previously which I was the lead designer to deliver design concepts. We were agreed to continue the work based on the discovery back then.


Process

We applied the double diamond design process(see picture below) for this project with alternations due to the constraints on time and unclear product vision from the client-side. The followings are some challenges we were facing at the time:

  • Scope and requirements gathered from the previous phase didn’t provide too much help

  • The client has no internal discussion around what they want to achieve which made it challenging for design to elicit valuable requirements

  • No clear documentation on business procedure

  • I was asked to wrap up the design in 2 weeks

Image credit to Testingtime

As we realized that we had troubles in eliciting feedback from the client as well as receiving different requirements to the agreed scope, I decided to combine research and design together at the same time compared to adopting a traditional design flow.

Discovery & Define

Though insufficient, I still chose to use the findings from the previous phase as important reference material. To better understand the current user issue, I conducted a few phone interview sessions and created relevant personas from current Haventree bank customers and customer service representatives. With such data, our BA and I were able to identify user stories on a high level.

User Persona - A

User Persona - A

User Persona - B

User Persona - B

Iteration and Hands-Off

As we were experiencing troubles getting inputs from the client as well as the short time for design, I decided to take the lead and let the design drive the conversation. Researches on similar services from competitors were done for each user story. Low-fi wireframes and prototypes were created for quick iteration. With such an approach, we were able to elicit requirements and the correct user flows that fitted the client’s business process. The drawback of this approach was the increasing time spent on updating wireframes and prototypes.

There were 3 steps for a design iteration:

  • Internal whiteboard session

    • Align the needs and processes on a whiteboard

  • Internal check-in session prior to presenting to the client

    • Validate the technical feasibility of the purposed design

    • Verify all use cases and businesses pursuing

  • Stakeholder review

    • Present the solution to the client for a roundtable critique

    • Gather additional feedback via offline prototype if possible

  • Final sign-off

Lo-fi wireframe for iteration

Lo-fi wireframe for iteration

Lo-fi wireframe for iteration

Once we received a green light on a user story, I prepared relevant high-fidelity wireframes and export them to Zeplin along with the most updated design system and all the necessary graphics to ensure a smooth transition between design and development. The wireframe inventory will not cover the user flow. Developers could reference the clickable prototype for such information. The design will stay supportive until a user story has been committed and tested.

Scaleable Design System, ensure changes can be done quickly

Scaleable Design System, ensure changes can be done quickly

Wireframes in different views

Wireframes in different views

Remaining issues

Constrained by the time, I wasn’t able to verify all the user stories with the client. In order to support the team after my discharge, I mocked up possible wireframes for all remaining user stories for the team so that they can continue.

Impacts

We held a very healthy relationship with our clients and helped them build an employee portal for request handling via Salesforce due to the good work we’ve done for them. Personally, I started to be appointed to major projects as the lead designer after this.

Example Wireframes