Alliant Credit Union

Alliant Credit Union is a Chicago based credit union with a wide range of services, low fees, and competitive interest rates.

The Challenge

The Challenge

Alliant Credit Union has been a long standing client of WillowTree. We designed and developed the first iteration of their mobile app in 2013, and since then, we've maintained our relationship with them closely. They approached us with a scope and budget to provide UX improvements and a visual redesign to their banking app, which hadn't changed since 2016. I also created video tutorials and a promotional video for the mobile app for Alliant. With 120,000+ monthly active users for their native app, they’re turning their focus and resources to improve their customers’ mobile banking experience.

My Role

Product Designer

Project at WillowTree · May - Oct 2018

On the WillowTree side, I worked closely with one product manager, two developers (iOS & Android), and one QA. On the Alliant side, I worked closely with their product owner to ensure that the designs were approved by their stakeholders. I also worked with product marketing manager to develop the marketing and tutorial videos.

The Scope

Design Focuses

This nature of this project didn't require me to go through a full-fledged product design process that included initial research, persona development, etc. Rather, because of the relatively short nature of this project, and because Alliant had already defined the scope for us as far as what needed improvements based on their own internal research and internal teams, I was more heavily focused on the latter half of the design process: the hi-fidelity designs for both the iOS and Android platforms. The scope of the project included:

🛠️ General UX improvements and visual redesign

💳 Adding debit card delivery status

💸 Adding transfer history and bill pay history

👶 Providing a user onboarding experience

📞 Providing a "Phone Tree" (help center) to reduce misguided calls

🏆 Add credit card rewards and payments

Project Kickoff

Defining User Flows

The 5 Alliant stakeholders involved in this project came onsight to our offices at WillowTree for a couple of days to kick off the project. I led a session of user journey mapping based on the scope outlined. We focused primarily on the more complex flows that would define how the API was built. A few of these included Credit Card payent flows, phone tree flows, and debit card delivery status.

After defining out some of these more complex flows as a team, we felt more confident moving forward turning these into hi-fidelity solutions.

Previous Design

Existing Design Language

TI spent the first few weeks auditing the existing app’s visual design. The app was designed over 3 years ago, so there was certainly quite a bit of opportunity to improve the visual design both aesthetically and systematically.

A few things we improved included creating stronger contrast between elements by using both color and text hierarchy. Furthermore, some of the branding elements we’re hard to implement from a technical perspective, so changes were made to remove some branding to really let the functionality shine.

The Solution

Key Screens

The home screen changed quite a bit from the previous iteration. One of the biggest design focuses here was increasing the readability. 65% of ACU's members are 50 years or older, so to increase readibility we bumped up the font-size and font-weights quite significantly. We also redesigned the icons in the bottom navigtion. On the android side, material design had just begun suggesting the lower navigation bar as the optimal navigation placement, so we moved the original navigation from above the accounts to the bottom of the screen for increased reachability.

When a user taps to view specific account transactions, they're taken to a transaction history screen. We also introduced quite a few UX improvements here as well, including changing the alignment of the content within the rows for increased scanability. We also introduced a sticky header interaction pattern--as the user scrolls, the status/dates are anchored above so the user never loses track of which date they're looking at, especially if there are quite a few transactions each day.

Another UX improvement introduced was converting more users to new features by actively calling them out.

If a user accesses the Alliant app and a new feature has been released since they've last used it, it's called out as a floating element above the navigation bar.

We also used a tool called UsabilityHub to test a few different user onboarding concepts. We conducted a task analysis by asking users to walk through the onboarding, then ask them where they would tap to set up travel notifications. The interface in Test 2.1 is much more contextual, but is more easily ignored, while the interface in test 2.2 is the opposite. The first concept tested better, confirming our assumptions.

Another new feature introduced was the "phone tree". The primary goal here was reducing the volume of calls going into call centers, especially calls that needed to be rerouted to different departments. I developed 5 instructional videos for more complex features that populate the carousel above, and we enhanced the FAQs to be more robust as well. If users can't find the answer they're looking for in the FAQ, they can go through a decision tree, which provides more focused menu options at the end.

We also added the credit card payment feature into the mobile app.

Previously this was a feature only available on their website. We mapped out these flows below:

Video Creation

Marketing Video

I worked closely with their marketing team to develop a video to showcase their mobile app. I used Adobe AfterEffects and Photoshop to create the video. It was an iterative process that took about 2 months.

It can be found on their website here.

App Store Videos

In addition to the marketing video, I also created app store videos for the different screen sizes, including the iPhone X, iPhone 8, iPad, and Android. I worked around the specific guidelines provided by Apple and the Google Play store.

Video Tutorials

Finally, I created a series of video tutorials that helps demonstrate how to use a few of the features throughout the app. Below are a few of the ones I created.

And just for fun, I created a pull-down-to-refresh animation that highlights the Chicago skyline, since that's where their office is based.

The Outcome

4.7 stars

3.3k ratings

Since the new updates, the Alliant app has received stellar reviews on both the App Store and the Google Play Store. Here are a few reviews from excited customers:

Closing Thoughts

Closing Thoughts

I loved working with my team on this project. Because we've had such a long relationship with Alliant, they certainly gave us quite a bit of flexibility as far as design direction goes. Our team worked autonomously, and I think this project was really successful. More projects should be like this one was!