Ally Financial: Redesigning the Website for a Tech-Savvy Audience
Unsolicited redesign of Ally Financial’s website by Jeff Shibasaki
Part 1: The Challenge
Background
Ally Financial has existed since 1919 when the company was known as GMAC (General Motors Acceptance Corporation). Today, Ally is a Detroit bank holding company that provides several online financial services –– banking, investing, home loans and auto financing.
With these four online-only services, Ally Financial needs to be marketed in a way that’s compelling and easy to understand.
Problem
Even though Ally offers several top-rated online banking features, effectively communicating that message is critical to reaching their audience.
Unlike other online banks that target tech enthusiasts and millennials with screens from their mobile apps and minimalistic designs, Ally appears to be targeting the wrong market –– car enthusiasts. Ally likely targets this market because they're the largest car financing company in the U.S. by volume. However, I assume that they should be targeting tech-savvy audiences since Ally offers online-only financial services and tech-savvy audiences love that kind of solution.
This assumption led me to begin investigating if there was more to learn from their website, the competition and representative users.
Scope
I only focused on redesigning Ally's homepage for this case study, but all tasks that led to inner pages were considered and documented in the sitemap.
Roles
User research
Information architecture
Copywriting
Content strategy
Visual design
Tools
Paper
Markers
Miro
Pages
Sketch
CSS Peeper
Sip
WhatFont
Copyright
All photos included in my design are copyrights of Ally Financial.
Part 2: The Process
I conducted a one-week design sprint based on the design thinking methodology that includes five stages –– empathize, define, ideate, prototype and test. However, since I was unable to validate my solution through testing and revisions, the process is incomplete.
Step 1: Empathize
First, I audited Ally’s website to understand what they’re doing right, wrong and not doing. I learned that Ally doesn’t use keywords effectively, improperly uses multiple H1 header tags and has a poor information architecture that might be associated with its low site performance on Google’s PageSpeed.
Next, I conducted a competitive analysis of online-only banks to understand the competition. I learned that Ally does a poor job of outlining services and benefits. While competitors show people and screens of their apps, Ally virtually does neither.
Competitors also appear to be targeting tech enthusiasts and millennials while Ally appears to be targeting car enthusiasts. Targeting the wrong audience may even explain why Ally doesn't rank higher in the Finance category on the App Store even though they offer more financial services than other online banks and have existed for over 100 years.
App Store Ranking (as of 10/05/20)
Since I didn't have access to representative users, I used the following resources for qualitative data:
For the App Store and Google Play, I only collected reviews for the Ally Mobile app since this is their main app and Ally Bank’s free interest checking and savings accounts are gateway solutions to additional financial services.
To filter reviews, I didn’t use any that weren’t from 2020 and didn’t use 1-star and 5-star reviews. I believe the most constructive feedback can be found between the haters and the superfans.
Even though the majority of reviews were from app stores, this data would help me understand user pain points since most of this data could also be applied to the website.
Step 2: Define
To simulate a real-world, design thinking activity, I created an experience map in Miro. This map is similar to an affinity diagram, but highlights the order of actions and pain points experienced along the way.
First, I pulled the notable details from the website audit, competitive analyses and user research. Then, I added that data to the experience map as yellow sticky notes with the first part of the process on the left, followed by each subsequent step.
Next, I grouped the data (yellow stickies) into themes (blue stickies) and grouped those themes into tasks (green stickies).
After that, I used dot-voting by sticking dots on the biggest pain points. Since I was the only person voting on this solo project, I used two dots for issues that I considered important and three dots for issues I considered urgent. Stickies that had similar pain points were combined.
Finally, I tallied the dots to find the biggest pain points. These would become the foundation for the user-centered design strategy.
The design strategy began with the stickies that had the most pain points (i.e. the dots). Then, I inverted those pain points to create a list of goals to work toward, but I also made sure that these had a business perspective to balance user needs with business needs.
To create the metrics, I first determined what success looked like for each goal. Then, I worked out how I could measure that success in terms of user efficiency (i.e. time to complete), increased effectiveness (i.e. reduction in errors) or increased customer satisfaction (i.e. happiness with the system).
Throughout the rest of this project, I'd refer to the design strategy to ensure my solution addressed user goals.
When I created the experience map, I had a set of stickies left over that described user attributes instead of observations about specific tasks. So, I added those stickies to a persona board in Miro.
When I found clusters with similar attributes, I grouped them into themes (blue stickies). When I found patterns in the data, I gave the stickies corresponding colors and names. In the end, I found three characters that represented key users. I called them Ted Techie, Mary Millennial and Harry Hesitant.
By addressing the needs of these representative characters, I could deliver a streamlined solution that has a consistent, targeted message. First, I needed to create their assumption personas.
Since I didn’t have a large amount of user data to base my design decisions around, I used my persona board to create assumption personas (i.e. proto-personas) in Pages. I created the primary persona (i.e. the most strategic) named Ted Techie as well as the secondary persona named Mary Millennial and the tertiary persona named Harry Hesitant.
When using multiple personas, I believe it's best to design for the primary persona, but accommodate the secondary and tertiary personas. This way, I can satisfy the primary persona, but also delight the secondary and tertiary personas.
If this were a real project, I’d use the assumption personas as working models, verify the personas as more data is collected during testing, and, if necessary, make refinements over time as I learned more about the users’ needs.
Step 3: Ideate
To address several pain points, I decided early on to rebrand the name of some of Ally’s services. This would unify all of their services under a similar naming convention that makes it easy for users to understand how Ally can be their all-in-one financial solution –– for banking, investing, home loans, personal loans and auto financing.
Since one of the project goals was to help users feel confident Ally is the right choice, I decided to list awards that Ally has received from popular publications in the hero section and use testimonials in between each service. This would also help me achieve another user goal –– create a logical flow and clear information architecture.
Step 4: Prototype
By the time I moved to software, I’d locked the architecture. Still, designing the sitemap in Sketch helped me organize all my sketches and notes into an easy-to-read artifact. In particular, this helped me visualize user tasks by knowing where users would go after clicking primary or secondary calls to action.
I created the low-fidelity wireframe in Sketch. Inspired by the naming convention of services like Apple Pay, Apple Card, Google Pay, Venmo Debit Card, etc., I decided to use Ally’s logo to brand each service because it would also satisfy the desires of the primary persona.
Also, I originally wanted to use icons to illustrate sub-services under each primary Ally service. Ultimately, I decided it was too many images and opted for rounded rectangles instead.
Before I moved onto the high-fidelity design, I wanted to create a style guide that would aid me during the design process and, if necessary, provide me with an artifact that I could refer to later. Since Ally doesn’t have a style guide that I could find online, I needed to create one myself.
I used Sip to inspect Ally Financial’s color codes. Since Ally doesn’t appear to have a well-defined and consistent color pallet, I made several adjustments to the brand colors to create a memorable and consistent marketing story that would appeal to the primary persona –– Ted Techie.
I used WhatFont to inspect Ally's typefaces. While they use Boing-Bold and Lato, I decided to only use Lato since it has a Black font that could easily substitute for Boing-Bold. Using one less typeface would also improve the website's performance.
Part 3: The Solution
For the high-fidelity design, I searched Ally Financial’s website for images and used CSS Peeper to download them. When I couldn’t find an image of a service or feature (e.g. Buckets, Apple Pay), I took screenshots from my personal Ally account.
Finding the right image and copy for the hero section took a while to get right. I knew I needed to showcase the Buckets feature because that was one of the goals, but I also needed a fitting value proposition. When I remembered the primary persona, "believes online banks should be a sea change from traditional banks" –– it struck me. 'Expect more from your bank.'
To complete this project and ensure the goals were achieved, I’d first need to validate the assumption personas that I created with quantitative and qualitative data. If that data didn’t confirm my assumptions, I’d have to redefine the personas. However, if that data did confirm my assumptions, I’d conduct user-testing, redefine or refine the problem, brainstorm new ideas, create new prototypes and conduct user testing.
Final Thoughts
I set out to investigate redesigning Ally Financial’s website because I thought they were targeting the wrong audience –– car enthusiasts. Not only was I able to find rich data from website reviews, App Store reviews and Google Play reviews that appear to validate my assumption, but some of that social proof even became part of the final design.
Now, comparing my concept with Ally’s current website, I see two strikingly different designs. This makes me wonder what data Ally’s using to inform their design decisions.
