Overview

I joined UGO Mobile in downtown Toronto and was assigned to work with a UX designer and an agile team of talented developers on a big project for TD Financial Group. TD was investing a lot of money for an app to be launched to million of its customers and wanted the app to be rated 4/5 stars. The app was a vehicle search and finance by TD.

11M

My design reached an estimated audience of 11 Million TD customers.

My Role

Senior Visual Designer

Team: TD Agile Team

Software: Figma, Photoshop

About the project

I hit the road running with a lot of meetings and discovering each developers ability and control over their coding practices. Got acquainted with other team members very quickly and proceeded to work with the UX designer to layout initial wireframe and sketch. My sole task was to design the interface and launching screen which had to be a fully interactive, engaging and delightful experience. The task was very tough as there was a tight time constraint through MVP1 , MVP2 and MVP3.

The Problem

The developers initially after getting the prototypes wasn't able to translate the animations and sleek movement on the screens. I had to work very closely with each one of them, understand their mastery of the code they were using, Xcode for IOS and Android Studio for Android devices. The main problem the developers were having was when the vehicles moves to the right or left when swiped by the user, the tires were not moving together. They didn't have a clue how to do that though they spent digging for a solution for a very long time. After spending quite some time analysing each developers skills, and learning the capabilities of the software they were using, I figured out a way and solution to the problem. The problem was fixed.

The Solution

The solution I came with was to generate a set of the tires rolling in one direction only and saved as png's. The vehicle body chassis would not have any tires, the coded animated tires would then be placed and included on the car chassis and grouped together providing for a smooth perfect movement when swiped left or right. The developers were delighted to have moved above these obstacles and I got a lot of appraisal from all the teams. Its difficult to explain the process but please have a look below to see the smooth swiping from left to right with the tires rolling in the right direction.

Below is a screen capture of the animated prototype I designed and presented to TD stakeholders with micro-animations and other motion design included. Using advance easing with nod controls for a smooth animation, I used Figma to deliver this high-end working prototype.

Advanced Prototyping with Micro-Animations

Vehicle Worth and Launch Screen

The wireframing phase

The initial wireframes were provided by the UX team. I assisted with the wireframes by doing many iterations, team meetings and brainstorming to refine the wireframes before jumping on the high-end prototypes. Each screens was scrutinized and went through many stakeholders before being approved as final.

High Fidelity Prototyping

Below are the steps involved in delivering the high-fidelity prototypes. All the blue arrows indicates connections and interactions with other screen flows. It's a well thought process, time consuming and intensive design work as it goes through several iterations, reviewal by the team and approval by stakeholders before being handled for final integration to the development team. The high-fidelity prototypes communicates exactly the look and feel of the product, the functionality of each components and the screen flow or process that the user will use to navigate to reach his goals. To stay on track within deadlines, there is a process in place to hand over all the assets and source code within the final prototypes to the Agile development team.

High-Fidelity Prototyping with Micro-animations

Research and Iteration Process

Below is a break-up of the swipe animation process. The car chassis were re-assembled in Photoshop, the original tires removed and then all exported within Figma for re-assembly into different components and ready for animation. The easing curves numbers for a smooth animation can be seen below.

Breakdown process for re-creating an unbranded car and using micro-animations to animate it with scroll functionality and easing velocity.

TD Financial Group specific request

All the vehicles were re-designed from scratch with various other parts in Photoshop, the vehicles shown below currently does no exist, as TD specifically asked not to be related or representing any brand. The skills acquired in mastering Photoshop was put to great use here. I merged different car bodies together and used specular lightings to get that refracting shiny lights on the vehicles and removed any resemblance to any other brand.

Front and back of all vehicles removed and reworked in Photoshop to be unrecognizable because of Brand issue. Added specular highlights and metallic paint using Photoshop.

360 degrees, left and right rotating tire added separately to each vehicle.

Parallax animated background for vehicles left and right swipes by user

Below is a very long background send to the developers for integration. Used it as a parallax effect when the user swipes the vehicles left or right.

Launch screens

Start button design after real vehicle start engines

I came up with the "Start Button" idea while driving my own car. The button resemble the electric start engine ignition button within every modern car. I added a couple of animation layers to it to make it more engaging.

Design Highlights

Through extensive design sessions and working very closely with agile developers, I manage to pull out this very sleek and engaging app for TD. There was a lot of problem with the development team but through careful listening and research we manage to join forces and used skills acquired from other projects to get the result we wanted and to jump all other obstacles along the way. It was indeed a journey and I personally got the respect of other team members by helping them and surmounting these obstacles that were preventing us from moving steps ahead.

Below is an animated vehicle worth, designed and animated in Figma.

Optimized Micro-animations for vehicle worth

Vehicle Trim & Details

Vehicle worth and specifications

Vehicle selection and specifications

Final Results

A sleek and fully working app that reached millions of TD's customers. The users could quickly and easily search for any vehicles and get a financement from TD. From mileage, colors and other specs, everything about the vehicle could be retrieved within the app. The mobile app is available for download on Apple store and Google Play and won several awards. The target was reached as its rating went up to 5 star after recently being launched.