A Much Needed Refresh

The Westlake MyAccount app is the main customer portal for active customers to make loan payments & view offers quickly & easily online.

The Problem

We saw low usage of the app and found that we were failing to upsell products or encourage retenton in a meaninful way.

The Goal

The goal of the the MyAccount mobile app redesign was to better upsell other products and increase customer retention by creating a refreshed customer journey. We hoped to make it easier for customers to make payments, see dynamic offers, and more.

Project Overview

This project was a full re-design with the intention to update the style, as well as to improve retention. To do this we had to re-imagine what our customer portal app could be. In the past, it was merely a tool to make payments faster an easier. As the company has grown, however, the app wasn't keeping up.

My Role

Visual + UX Designer

For the MyAccount app redesign, I led the Product Design, both User Experience (UX) and User Interface (UI). I received feedback and constructive criticism from the head of marketing as well as members of the customer service department. Over the length of the project, I worked closely with the Vice President of Marketing to evaluate and resolve pain-points in the browsing & discovery experience.

The Scope

A Full App Re-Design

We wanted to create an app that was more than simply an easy way to make payments, but also a hub for new offers, discounts, and deals.

The full project started with research and planning, then the design and copywriting, and finally development and re-launch. As of this writing, the project is currently in development.

The Users

Active Loan Customers

The users are current customers, who have a loan with Westlake Financial. Westlake customers include people who have taken out an auto loan with Westlake Financial, as well as customers who have taken out personal loans, and more. As Westlake expands into new customer-facing loan products, including a currently piloting credit card, the company hopes to grow the customer base as well.

Research

Research was focused on analytics collected by our IT department. We looked at:

how long users spent in the app
what pages they spent the most time on
where customers dropped off of journeys for new offers and products

What we found was that customers come to the app to make payments then immediately left. While the app has always been intended to be an easy, on-the-go method of making loan payments, we wanted to make existing tools more accessible. In addition, we wanted to provide more tools for customers to monitor and improve their financial situation.

It was important then to see how other banking and lending apps were addressing the issues we saw in our own. With members of the Marketing team, I reviewed apps for companies including Bank of America, Chase, Discover, and Lexus Financial. We took note of which parts of each app was most useful and which parts we found challenging in order to decide our next moves.

The Design Process

As both the project lead and the primary designer, I had a number of different responsibilities:

Planning & defining the scope for the project
Developing the product vision & goals
Designing the user interface & experience (customer journey building)
Wireframing & interactions (including creating animations triggered by using a slide button, opening the menu, etc.)

As both the project lead and the primary designer, I had a number of different responsibilities:

Planning & defining the scope for the project
Developing the product vision & goals
Designing the user interface & experience (customer journey building)
Wireframing & interactions (including creating animations triggered by using a slide button, opening the menu, etc.)

Tools Used:

The overall design and journey were built out in Adobe XD
Adobe Illustrator was used to design icons

At the very start, what I had was an existing app that we knew needed a redesign, but I didn't have a lot of specific guidelines as to the design direction. I knew that company leadership wanted to push other products more and I knew that the Vice President of Marketing wanted the app to be much lighter in color than the existing app.

I knew that we wanted to revamp the overall design, but there were many details that needed updating as well. The payment page didn't include an easy way to switch payment methods or set up recurring payments. The MyOffers page was never properly reformatted for mobile, so the layout for each offer was poorly formatted. There was no menu for all of the pages that already existed, let alone any pages we wanted to add.

Simply changing images and colors wasn't going to do it.

Sometimes I like to start by sketching on paper, but for this project I knew I wanted to jump right into Adobe XD. I had an idea of what I wanted to do, having reviewed so many different apps for reference and having thought a lot about the basic directions I had.

I believe that it's important to standardize the design across pages throughout as much as possible, so I take special note of details like:

spacing,
text size,
colors.

it's important to standardize the design across pages

For this project, that meant being sure that I was following the style guide I had put together previously for colors and font, but it also meant finding the most visually appealing spacing between content boxes and then making sure that I maintained that spacing throughout all app pages. The same went for the footer, the color, and details such as button shapes and styles.

From there, the design process was a back and forth with the VP of Marketing, leadership, and myself. Working out how to best layout a customer journey for pages I was less familiar with, such as the payment page, involved collaborating with departments like Customer Service. They were able to provide much-appreciated insight into customer pain points that I could solve with this redesign. Taking into account feedback I received on the design from leadership and the departments I collaborated with, I was able to come up with a new look and layout for the app.

Challenges

I was the primary planner and designer for this project, alongside my other responsibilities within the Marketing Department. Because of this, time management and careful prioritization was a major focus for me. Making sure that my work on the project was fast was one part, but it was also vital for me to stay on top of communications with other employees involved with the project. I found that open communication allowed me to make sure that other projects on my plate were prioritized properly and everyone I worked with had a realistic timeline for completion of this and other projects.

Every part of the new app needed to be approved by my manager, the company president, and Legal & Compliance before it could even be sent to the development team. It was my responsibility to stay on top of the entire approval process and make requested changes in a timely manner along the way. It was also important to me to make sure that legal requirements and requests made by leadership were incorporated into the design in a way that was both functional and attractive.

the head of IT threw a major curve ball at me

Beyond all of that, the company president and the head of IT threw a major curve ball at me during our first meeting to review the preliminary designs. Initially I had actually planned to redesign the website (mobile, then desktop) before touching the app. I felt that the website was the less functional of the two, and the head of Marketing agreed. It was the head of IT who pointed out that more customers were using the mobile app than the mobile website, leading the company president to insist that the mobile app took priority. Because of this, I had to switch gears on the design to make sure that it worked as an app, rather than as a website.

Luckily, reformatting what I had designed for the mobile site into an app wasn't too difficult. I needed to update the formatting to exclude the browser header, plus add a quick select menu to the bottom of the screen. From there, I was able to continue with what I already had.

Finally, delays caused by developer bandwidth concerns forced us to pause development, but also allowed us time to think through and test the design thoroughly.

The Result

The result was a refreshing new design that made the app visually lighter as well as easier to use. So far, internal testing has shown it to be much faster to find new offers and find information that customers often ask about. We believe that this will lead to higher click rates on other offers and an increase in offer sign ups.

Next steps: This project is currently in development, so the team will need to be available to work with IT and answer any questions. In my experience, development usually involves review sessions with our team to make sure everything functions as intended. Lastly, Legal and Compliance will need to review one more time and give a final sign off for launch.

After launch, the team will closely monitor user movement through the app, as well as Customer Service calls. We want to catch any pain points that remain or were unintentionally added into the new design, but we also want to track the success of the new design. There is no perfect project, so it is important to continually improve my designs as I learn more.