Redesigning Honda Financial Services Website

In the digital landscape, we recognized that established corporations were shackled by outdated designs of the early 90s. Our team set out to re-imagine the website, ensuring the focus remained on the needs of the company's loyal, long-standing customers.

This is an industry project with a team of 4 designers specialising in UX and visual design.

Desk-MacBook-Pro-Scene-Set-vol2-min

CLIENT

Honda and Acura

TEAM

3 UX Designers and 3 Visual Designers

DURATION

6 Months

PLATFORM

Mobile and Desktop

Project Description

An online portal that manages the payment of leasing or taking a loan on a car. This service is available on their website for both, Honda and Acura. This is a re-design project of a website that had problems in the UX and Visual design.

This service offers customers various ways to pay the bills, visualize their expenditures, set payment cycles, communicate with customer services, and hold accounts for many other modes of transport provided by the company.

From tedious paper-work to seamless digital transactions

Project Concept

Converting paperwork or the mundane task of going to the bank or office to pay bills into a digital experience provides a glimpse of the future. Increasingly, services are becoming digital, allowing people to interact with them digitally.

This project involved redesigning a portal that faced various issues, from poor interaction design to accessibility concerns. The team had to carefully research and ideate to address these problems.

Objectives

  • Study the current website
  • Gather insights and pain points from users
  • Designing a new information architecture
  • Create flows for new websites
  • Outlining features from user stories
  • Creating wireframes
HondaGif1-gif

Restructuring the information from
old to new

image 28 2 Desktop – Honda Landing Page-Pre Login

Shifting to an entirely online model, both website and mobile

Solved end experiences and drop-off points for users

Designed experiences for users that guided them and provided documentation for quick decision making

Reduced steps to pay by tailoring payment options to user needs and goals

Studying 2000's website design

Honda-01

Structure

We studied the current website used for financial operations. And found out the pros and cons by conducting a heuristic evaluation and creating an existing flow.

These flows made us realize how old the experience was. Complex journeys and lack of documentation were some of the problems that plagued the users. We needed to come up with a simpler and updated design!

Opportunities

As we created a flow based on the current website, we discovered opportunities and flows that can be improved.

Various elements and page structures that can be changed to get the most of what the site has to offer.

What are the users going through?

Goal of the Study

We wanted to learn the pain points, why they use the website, and what is difficult for them. Through surveys, we got the pain points and valuable information about the users. The major questions are mentioned below, from which we based our survey.

Information Architecture

HIGH LEVEL with nav

Keeping these 3 fundamental areas at the heart of the solution

Honda gif 3
Desktop  make a payment

Users

We first made a set of goals and flows for a first time user and a returning user, as their needs will be different. We would need to design experiences that tailor specifically to their requirements.

Payment Methods

Secondly, we distinguished two different payment techniques for each user. Which produced unique flows with separate goals for each.

End Experience

By making these goals, segregating users, and tasks we were able to make flows that were easy to understand. These tackled the problems faced in the previous website and focused on solving them.

User Goals and Flows

With the previously made requirements and goals, we created flows for each scenario.

User goals
Honda-08
Honda-07

Building Wireframes

The final steps in the re-design was the come up with wireframes but before that get some feedback for the new flows and architecture of the website from the clients.

As I was the part of the UX team, we had to deliver high-fidelity wireframes to the Visual design team. These wireframes had to go through multiple rounds of feedback with the client teams. Then passed on to the UI team for the final designs.

Desktop and Mobile

We kept in mind that most of the components and features should also work in mobile too. This was the first medium we started designing and in parallel kept the mobile designs going.

We used similar components and optimized it for the mobile screens.

Honda-12
Honda-14
Honda-09
Honda-13
Honda-10

Design direction 

A collection of design components or elements that appear multiple times on a site. A pattern library documents all of these ‘patterns’ and defines how they behave and look. UI-Patterns describes these design patterns as Recurring solutions that solve common design problems.

colors
Iconography
Typography
Card Styles 2
Toasts & alerts
Toasts & alerts-1

Visual design

At the final stage coming to bringing life to the screens and the flow through designed components to both desktop and mobile.

Frame 1205
Frame 1204
Frame 1204-1
Frame 1204-2

Selected Works

Agile HCTProject type

Research PhotographyProject type

Honda RedesignUser experience

Behavioral DesignBehavior Design

WikisickUX design

Climate WorkshopProject type

Like my designs? Or want to work together? Hit me up on LinkedIn or mail.

Let's Chat

apatil54@id.iit.edu
+1 (312) 866 7105

Socials