Toyota Financial Services
A platform dedicated to service excellence. Where millions of Toyota customers drive their vehicles, thanks to their flexible financing and leasing, comprehensive vehicle, payment protection plans, and well-rounded insurance offerings.
Year
2018/2019
Agency
Saatchi & Saatchi
Project Type
UI, UX, Strategy
Role
Lead Visual Designer
A new experience with simplicity
Overview
TFS approached us to redesign their logged-in experience to create simplicity for their users with a streamlined registration, simplified payment system, a new lease-end experience and
a dashboard where a user had all the details of the vehicle they needed.
The Problem
The previous interface was extremely outdated causing a lot of user frustration and drop-offs. TFS users were facing difficulty managing their accounts once created, this created difficulty during their payment process, and their lease-end experience.
The flows were complicated, not providing
users with all the features they want to make
a confident decision when making a payment on
their vehicle.Pain points that were causing users to drop off or get frustrated during the account creation experience.
The Solution
We were able to produce a simplified account creation method which resulted in a considerable drop in customer complaints once implemented.
We created a streamlined dashboard with a clear visual hierarchy to make it easier for users to get all of their vehicle payment information at
a glance as well as manage their vehicle (or vehicles) all in one place.
My Role / Responsibilities
UI, UX, Design System, Management
Enhanced Style Guide
I started with developing a style guide from
what was existing to jumpstart our design system. Working closely with Saatchi’s brand team and the existing styles from Toyota.com, I was able to enhance our components. Making them modern, fresh, and compliant. This enhanced style guide was then used across Toyotas’ platforms.
A look and feel to future-proof the brand
Wire Frames
As I was developing the style guide, I began to work with our UX team to dive into user stories to help build the architecture and interactions of the pages. After grooming user stories, we were able to begin to prioritize the elements needed for each page and what functionality needed to be available for the user.
These wireframes were meant to be simple, to map out the flow and functionality of the experience, and help catch any problems early. We worked in an agile methodology working in sprints of ux for 2 weeks, and design for 2 weeks. Making sure that we were able to adapt to any client request.
Structure and flow of possible design solutions
Using the Atomic Design methodology our team was able to begin building pages from the wires, style guide, so that we could iterate quicker with the components. We wanted complete consistency throughout the experience. Knowing we had over 10 million users coming here this experience needed to be seamless. Creating less friction for a task that many people dread doing every month. Using clear hierarchy to help guide the user through sections, typography to help highlight what was important to be read or scanned to help give the user direction. We also had to make sure we were using brand color appropriately since Toyota primary color is red. We had to take that into consideration when on our action states. Last thing we accounted for was accessibility, AA+ level of contrast, focus states, validations, notifications, and alt tagging.
