FNB Dynamic App

First National Bank needed a better way for customers to apply and aquire credit cards.

Service

Research, User Experience, Responsive Web Design

Client

First National Bank

Project Summary

First National Bank provides credit cards to its customers. They also offer credit card services to their business partners (such as retail stores) that want to offer credit cards, but don’t have the infrastructure to service them directly. 

We worked with First National Bank to build new software for credit card applications and approvals. The software would include a responsive web app for credit card applications, customizable options for partner brands and an admin portal for managing new partners and promotions.

My Role

I worked directly with a balanced agile software team and multiple stakeholder groups. As lead product designer, I was responsible for strategy, research, UX, UI, IxD, and visual design.

The Problem

The current "Dynamic App" was designed to provide First National Bank and its Partners with a way for customers to apply and acquire credit cards. Today it requires long timelines for new promotions with a heavy administrative cost and reliance on IT. It does not allow for the customization partners want nor experimentation desired by the business to easily measure important KPIs. 

How might we improve Dynamic App so that our customers (and business) are more successful based on application submission rates, speed to market and automated decision rate.

Discovery and Framing

Through a divergent and convergent thinking approach we set out to uncover the problem space, ideate on potential solutions and narrow in on an outcome based roadmap.

Discovery and Framing Process Diagram

Stakeholder interview insights

After mapping out the product stakeholders from both business and IT organizations, we interviewed stakeholders and synthesized our research findings to insights gained.

Stakeholder Map

“Speed to market is critical to respond to changing demands from partners.”

Increase Administrative Efficiency

Goals

  • Create a self-service business process that limits errors and doesn’t rely on IT
  • Give partners the branding flexibility/customization they need
  • Ensure accuracy of data coming into the backend
  • Ensure we handle all current functionality, do not disrupt current partners

Success Metrics

  • Reduce time to set up to less than X days
  • 0 fields are duplicated elsewhere in setup
  • No IT needed to configure (fully self-service)

“Improving the experience isn’t just look and feel, it’s how we manage the data, and respond to customer feedback.”

Improve Customer Experience

Goals

  • Create a better user experience to keep customers from dropping out
  • Create the right experience for each individual channel
  • Make it easy for customers to give us the “right” info. (prefill, input validation etc.
  • Ensure data is not lost and is provided in the right form to each department (commercial etc.)
  • Make it clear where the customer is in the application process

Success Metrics

  • Increase submission rate by 5%

“Moving to a set of standards will be the biggest challenge.”

Replace Dynamic App and Dev Tool with modern solutions 

Goals

  • Limit scope and deliver incremental value
  • Allow easy integration with 3rd party applications
  • Allow flexibility, and experimentation (AB testing)

Success Metrics

  • Old versions are fully deprecated, 
  • New apps are modern, including: CI/CD, PCF, Progressing reference architecture

Top problems

We used a Now and Later method to prioritize which problems to start solutioning for.

Now and Later problem prioritization

Initial Priorities

  • Create a self-service business process that does not depend on IT
  • Create a better user experience to keep customers from dropping out
  • Make it easy for customers to give us the “right” info
  • Give Partners the branding flexibility/customization they need

Solution Generation

I ran multiple workshops with the balanced team to generate solution ideas to our top problems. We sketched low fidelity solutions to design problems which helps the team brainstorm multiple options quickly.

Balanced Team Workshops

Solution Ideation Sketches and Affinity Map

In working through the current process, we concluded the functionality of the ‘Admin Tool’ to enable a self-serve business process, needed to be driven by the application itself. 

We discussed initial concepts including:

  • Better Data validation
  • User feedback/help
  • Language/Messaging
  • Pre-fill/Auto Populate
  • Accessibility
  • Progress Indicator

Outcome Based Roadmap

We worked closely with project stakeholders to align on on outcome based roadmap focused on the near term with measurable metrics to track progress. We’d continue to adjust as we move forward.

Stakeholder alignment session

Outcome based Roadmap

Epic prioritization

We broke the roadmap down further into epics or high level themes of feature groupings. We brainstormed them in groups; then we dot voted on which we should start with. We prioritized the epics further using an Impact/Value versus complexity 2x2.

Epic Prioritization

Rather than trying to tackle everything at once it was important to prioritize 1) High Value/ Lower Complexity and 2) High Value / Higher Complexity. This is where we’d start in order to produce working software that we can de-risk our assumptions.

2x2 quadrant explanations

Initial releases would be non-prod but would build lean logical, end to end functionality. Our iterative approach would allow a rollout to production whenever the business was ready.

The Result

We piloted the first release with a small group of partner organizations and tracked critical KPIs to measure success.

Dynamic App Metrics

The first iteration of our new Dynamic app included a fully responsive layout, a don’t make me think step through process, and customizable options for branding and promotions. 

User experience improvements to data fields and form validations increased accuracy of customer data and improved submission rates and approval percentages. 

Our lean product strategy, human centered design, and extreme programming approach allowed First National Bank to roll out an MVP to customers quickly and continue to add valuable features to attract and retain partners and customers.

Mobile Screens

Responsive Screens