cover_toyota.png

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

TCCI (Toyota Credit Canada Inc.) was looking for ways to better serve their customers so that they can manage their lease and loan services more conveniently. Initial researches and analysis were done and outlined the service blueprint.

As the lead designer in this project, my responsibility lies in

  • Identify current user issues

  • Outline user requirements

  • Provide design solutions within time and budget


Process

In the project, we applied the double diamond design process(see picture below). Initial user and business analysis had been accomplished by the business team before introducing the design to the team.

Image credit to Testingtime

Discovery

The discovery phase is about understanding the context. My desired outcomes from this stage are:

  1. Understand the current end user’s issue(s)

  2. Understand the business pursing

  3. Establish strategies for design involvement

Prior to the involvement of design, the business team together with the TCCI had accomplished high-level researches on the first 2 bullet points. From there we were able to identify the following key issues(project scope) to address:

  • The time for request processing is too long

  • Financial or personal services are not easily accessible

  • Lack of feedback to users regarding the progress on their requests

Define

In this stage, the design was expected to provide solutions for all the listed issues via the following channels based on the foundational work:

  • User personas

  • Customer Journey Map

  • Design stories/tasks

  • High-Level Site Map

Generated user personas from several user survey sessions

Generated user personas from several user survey sessions

Stakeholder Interview Analysis & Adjusted User Stories

Stakeholder Interview Analysis & Adjusted User Stories

Customer Journey Map

Whole Site Interaction

Whole Site Interaction

With frequent conversations between the product teams on both sides, we were able to clarify the listed issues, and outline design focus as follow:

  • Automate and/or self-serve some general services such as requests for documents and name changes, etc

    • There were two major issues related to long process time. One is the call center request handling workflow which will be resolved by the product. Another one is that the technology and procedure needed updating internally.

  • Clear navigation to financial services and suggest services based on account status

  • Notify customers of their request progress via email

    • Ideally, customers should be able to track their request status via the product. However, since requests were handled manually. It might be a good idea to start with a push notification system first.

As you can probably tell, at this point we realized that the product couldn’t completely resolve customers’ complaints as the real cause lies in the nature of the internal workflow. Thus, we purposed an internal employee portal to receive, create, assign and review customer requests from the product or phone calls. Though the proposal was declined due to budget, we managed to get their attention.

Internal Employee Portal

Internal Employee Portal

Internal Employee Portal

Design Iteration

There were 4 steps of a design iteration cycle for a design story:

  • Internal whiteboard session

    • Align the needs and processes on a whiteboard or via UX sketches

  • 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

  • Client sign-off

UX Sketches

Example UX Sketches

Low-fi wireframes were used for internal alignment during planning sessions. It helped all parties to be on the same page from a visual perspective.

I used high-fidelity wireframes and prototypes to communicate and test with the client for UI/UX feedback. Both round table review and offline testing were used. In this way, we were able to constantly and quickly make design improvements until reach almost satisfaction on both sides. This also made sure that we were able to move between stories as quickly as possible.

Home Page - V1

Home Page - V2

Home Page - Final

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

The design will move on to the next phase for hands-off once we received a green light on the discussed user story.

Sample Shots for Toyota

Sample Shots for Toyota

Sample Shots for Subaru

Strictly Defined Design System in Sketch

Strictly Defined Design System in Sketch

Online Style Guide in

Online Style Guide in

Hands-Off and 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. The design will stay supportive until a user story has been committed and tested.

Impacts

Though we weren’t able to build the employee portal for TCCI at that time. TCCI soon started a massive initiative with a big incentive to develop such a product and let some major consultant agencies pitch. We were able to win the opportunity due to our good work on this project.