PROBLEM
The previous online banking platform used one vendor for desktop banking, and another for mobile banking. Maintaining separate vendors and platforms meant duplicate development effort and maintenance to support the same features across different channels. Additionally, the existing responsive layout’s presentation left little room in the layout for context-specific information like trends, quick payment modules, and account snapshots.
Using the vendor’s APIs, a responsive, device-agnostic solution was built to handle both desktop and devices, and be served inside a native wrapper for our iOS and Android apps. The update gave us a single code base and provided a consistent, scalable feature set for all members regardless of their channel.
SOLUTION
The migration to a single platform took 9 months of development. In process, site-and feature-specific metrics were put in place, allowing us to benchmark feature sets and provide metrics to prioritize updates and enhancements.
In parallel with the dev cycle, a long-term roadmap and enhancement strategy was mapped out, to create a plan for continuous improvement that handled technical debt as it arises, and allowed for iterative updates as the organization needed them. With a 4-year gap between the last update, and the technical update required to get the code base to a single platform, the functional roadmap needed to become proactive instead of reactive, with an eye to continuous enhancement that would maintain and encourage future usage.
PROCESS
1. Hold brief interviews with key stakeholders to understand the challenges and needs between the desktop and device platforms
2. Audit the existing platforms, and outline which patterns and experiences could remain, and where we needed adjustments
3. Research omni-channel UX patterns to determine how to convert the UI to a fluid, responsive layout, focusing on complex data sets
4. Create first round of wireframes for stakeholder review
5. Generate final wireframes that incorporate stakeholder feedback, to communicate the visual changes to the organization
6. Document the existing feature set in the desktop platform, and develop a plan to update and incrementally release the changes, to avoid overloading the call center and membership
7. Communicate and roll out feature-by-feature based on the project timeline
8. Begin doing research on national trends within generations during incremental release cycles - in how they use financial institutions and technology in general - to look for gaps in expectation, need and technology
9. Develop personas based on survey data, national trend data and internal stakeholder interviews, and draft some hypothesis about future usage patterns and banking needs in our own membership
10. Cross-reference the hypothesis against national and state data along with analysis from our own data warehouse
11. Do gap analysis and journey maps for channel gaps within the user lifecycle
12. Do journey and experience maps for key functional gaps in the site
13. Develop wireframes and high-fidelity mockups based on personas and functional gaps to put in front of focus groups
EXPERIENCE MAP: Final experience map that outlines the user's flow throughout their lifecycle, with thoughts/feelings, along with channel gaps identified at each task
BRAINSTORMING CHANNELS: Identifying challenges, opportunities and constraints for each channel with stakeholders
UX RESEARCH: Snippets of the insights from demographic and trend data analysis, used to vet hypothesis against our data warehouse
WIREFRAME: High-fidelity wireframes demonstrated the UI concepts incorporating new infographics and data indicated by the user research
FINAL LAYOUT: High-fidelity mockups were created to use for feedback with stakeholders, and for focus groups
Back to Top