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).

Overview

TCCI was looking to modernize its 15 years old application for lease and loan management. The application is used for managing customer contracts. It plays a crucial role in customer representatives’ day-to-day workflow. The scope of this project is to have a UI refresh without backend changes. Additional requests such as having the application able to work on tablets were also included.

process

The double diamond design approach was used for this project. As the project was to focus on UI redesign, I focused on understanding the usage and workflow during the research and define stage.

During the initial contact with the TCCI product team, I started to see the following challenges:

• Compromises might have to make due to the request of no backend changes

• No formal documentation of all the business cases that the application handles which made it difficult to estimate the volume of the workload

• Lack of resources and constrained by time

  • As a fairly small project, we only have 2 active members on the team and I was working actively as a project manager

Discovery & Define

Because of the above challenges, I decided to focus on the following items for research in the discovery and define phase:

• Estimate the overall workload and identify all use cases

  • In this project, we can treat each screen as a user story for design

  • With the lack of documentation, to estimate the overall workload, I deep-dived into the source files and cross-referenced the application in the testing environment to verify if there were any hidden screens with developers and the PO on the client-side. This turned out to be a valuable exercise as we found out that not all of the source files were used and presented as screens to the users. Some of them were used to process business logic or patches to deal with exceptions and some of them did have UI but were only active under specific conditions. All findings were later acknowledged and documented for QA.

• Understand the business process for each use case

  • Engaged in frequent conversation with the client BA to make sure all user/business flows were documented towards a screen/user story

• Explore the potential of improving the UX by UI

  • Identify the gap between the service and the old UI on a screen-by-screen basis and see if there is any improvement that we could do.

  • I decided to work at the client’s site as much as possible during the project, not only I could observe their day-to-day work and provide design fits to the real scenario, but also allowed me to test and gather feedback conveniently.

By the end of the discovery and define phase, we were able to successfully identify 31 user stories with detailed documentation on the user flow.

Design Iteration

As I did for other projects, I usually do a 3-point check-in between the design, the development, and the business. There are four steps for the iteration:

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

  • Validate the technical feasibility of the purposed design and make sure that no back-end related changes are required

  • Verify all use cases and businesses pursuing

• Causel user review and testing

  • As I was working on the client site, I was able to conduct casual reviews and feedback sessions with representatives on the go as needed.

• Stakeholder review

  • Present the solution to the client for a roundtable critique

  • Gather additional feedback via offline prototype

• Client sign-off

We use high-fidelity wireframes and prototypes to communicate with the client since it was a UI refresh project and we were on a tight deadline. This also made sure that we were able to move between stories as quickly as possible.

One of the challenges was to have one design system that works with both Toyota & Lexus financial services. I chose to have a white-label design system, to ensure have key attributes that highlight the brand signature(i.e. highlight colors, shape, and typography) but leave the layout and pattern consistent across brands.

As I was working at the client’s site and was able to get close contact with the end-users who were constantly referring to specific data(TCCI Reference #) from most of the customer requests. At that time, users were not able to fetch the data directly. A proposition was made from design to have such data directly accessible on the home page so that users can search and fetch the data a bit more quickly.

Hands-Off & Support

Once we received a green light on a user story, I prepared the 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.

With the help of the spreadsheet, we were able to create test cases easily. The testing has two phases, internal testing, and external testing. The internal testing relied on me and the BA on the client-side to make sure all visual and functionality requirements were met. The external testing happens after pushing to live and have real users (i.e. sales reps) tested for feedback.

Thanks to the internal testing, the external session went really well with very little negative feedback. The application is now actively used by our client in every branch across Canada with positive feedback in user experience and business vision.

impacts

We launched the project around the end of 2018 and now it has been widely used by all Toyota and Lexus dealers and branches internally across Canada.

Example Wireframes