PenFed Credit Union
Beyond the Branch: A Mobile Redesign for the Modern Member
Overview
Redesigning and rewriting a mobile banking app is more than a technical challenge—it’s an opportunity to redefine the user experience.
For the third-largest credit union in the country, our mission was clear: modernize the app with a fresh UI, improve usability with best-in-class UX practices, and migrate to a hybrid mobile platform for efficiency and scalability.
The Challenge
The existing mobile app used outdated technology, lacked analytics, and was inconsistent with the newly rebranded marketing site.
Transitioning to a hybrid platform required rethinking how key functionalities were implemented without sacrificing performance.
Before
After
Research & Discovery
User-Centered Approach Without Existing Analytics
Without historical usage data, we had to rely on direct user feedback. We utilized multiple strategies to collect information that would ultimately help validate or change assumptions and establish a roadmap that was driven by actual user needs.
In-Branch Interviews & Surveys
Gathered qualitative insights from real users to understand pain points and feature preferences.
App Store Reviews
Analyzed feedback to pinpoint common frustrations and opportunities for improvement.
Stakeholder Collaboration
Engaged with product managers and business leaders to contextualize user feedback within strategic goals.
Technology & Security Buy-In
Early testing reassured internal stakeholders of the new approach’s efficacy and safety.
User journeys and other existing research done by the in-house team was used as reference to get a better understanding of PenFed's customers and their different interactions with banking products.
The Work
Information Architecture & Wireframing
App Map
We structured the app around an intuitive site map and information architecture. Quick sketches and wireframes explored potential flows for new features, allowing for rapid iteration and validation.
To streamline future content updates and to assist in the architecture of the Adobe Experience Manager, an app map of the existing app structure with newly planned features was created to help call out which screens would need AEM content and to have the first-ever full view of the app in its entirety to share with stakeholders.
Bill Pay whiteboard flows
Sign-in flow
Building a Scalable Design System for Consistency and Delivery
Tested multiple UI design patterns before finalizing into a pattern library
Developed a UI Kit in Sketch for rapid prototyping.
Established a Mobile Pattern Library to ensure design and development alignment.
Employed Animations in Principal to choreograph motion and enhance user interactions.
Collaboration & Agile Execution
- Created clickable prototypes in InVision to streamline stakeholder and compliance feedback.
- Linked wireframes to user stories in JIRA, ensuring clear communication and implementation.
- Facilitated regular check-ins with the COO and cross-functional teams to maintain alignment on business objectives and security concerns.
- Ran QA sessions and UI Audits to ensure final designs were built to spec.
Key Insights & Strategic Shifts
Originally, a feature for new member sign-ups was prioritized. However, research revealed that only one user in our study would have joined via the app. Instead, we shifted focus to an enhanced mobile bill pay experience to address a more immediate and widely requested need.
With the newly prioritized payments experience, multiple options were tested remotely via UserTesting.com to validate key interactions and design choices. In one case, the industry jargon used by banking insiders had always been ‘Payee’ but tests clearly indicated users understood ‘Payment Amount’ by 9:1 margin, convincing stakeholders to update the text.
The Outcome
Despite facing some technology setbacks, the new app launch was a resounding success. With a user-driven approach and a scalable hybrid framework, the credit union was well-positioned to iterate and evolve based on real-world feedback. This project underscored a critical lesson: a product that’s continuously refined through releasing, learning, and iterating is key to long-term success.
By focusing on real user needs and building a robust design system, we transformed the mobile experience—enhancing trust, usability, and overall business impact.
Increased Adoption & Engagement
User-friendly enhancements like fingerprint login and mobile bill pay led to higher retention and interaction.
Consistent Brand Identity
The new design aligned seamlessly with marketing materials, reinforcing trust and credibility.
Scalable & Maintainable Codebase
A hybrid mobile solution on the Ionic platform streamlined development and future updates.
Enhanced Usability
Insights from real users informed a design that reduced friction and improved satisfaction.
Cross-Team Alignment
Secured buy-in from the in-house product team, ensuring a unified vision and smooth execution.
Executive Sponsorship
Worked closely with the COO— the key project stakeholder— to align business goals with user needs.
Technology & Security Approval
Testing insights from the discovery phase fostered strong support from technology and security stakeholders.
Improved App Store Rating
Saw immediate improvement in app store reviews, elevating it from 3.5 to over 4 in a matter of weeks. Most recently, it is at 4.5 with thousands of reviews.
