Our team was assembled to redesign the online banking experience for this high-profile online-only bank.
The Task
This was a once-in-a-decade opportunity for Ally to redesign their consumer online banking experience. The look and feel had was dated and the site was not responsive to the growing diversity of devices that consumers were using to access the site and app. The final product needed to have a contemporary feel, be easy to use for new and existing customers, and be "future-friendly" – providing maximum flexibility for future technological and aesthetic shifts.
The Team
Our cross-functional team included members for usability, content strategy, interaction design, and visual design. Though we each had specific titles, we worked in a very interdisciplinary way. We also had a development liaison who worked with us on technical feasibility and to create the dev strategy. My official role was UX Visual/Interaction Designer, though we all contributed significantly to research, ideation, and documentation activities.
Discovery
To begin, we conducted a large competitive analysis and took inventory of what functionality and pages needed to be accounted for in the current experience. We led a series of stakeholder interviews to learn about the individual parts of the site and how they fit into the overall ecosystem.
We worked with a recently developed set of personas to narrow our focus on who we were serving. These characters also functioned as a common point of reference in conversations outside of the design team.
Research-based personas were used to align on who we were serving and what their biggest pain points and opportunities were
I conducted an extensive visual survey of "competitors" both in financial service and far beyond
Establishing a Direction for Interaction and Visual Design
We started the visual component of the design process by focusing on the dashboard screen. Through a series of collaborative brainstorming and design work sessions, we arrived at three different low-fi wireframes and multiple visual directions.
After several iterations on early concepts, we arrived at 3 wireframes to test
I assembled "style tiles" to express possible visual directions
Reimagining an Interaction System
I developed an interaction framework concurrently with the visual styles. We needed a clear and flexible system to guide interaction design for all the other applications that would eventually be affected.
As we worked through many iterations to determine the overall look and feel of the site, we constantly challenged each other to go "too far." Though high usability was an essential directive for the project, we knew that regularly abandoning conventional patterns would help us check assumptions and find new vectors of inquiry.
An early visual concept for a new dashboard
Constant Vetting
The team constantly tested new designs using in-person moderated user testing in Ally's on-site, state-of-the-art usability lab... as well as other less formal means like drive-by testing with paper prototypes and simple printouts.
I created paper prototypes for rapid user testing
Executive Buy-in: Design Strategy Doc
We also produced an extensive design strategy presentation to document our process – citing sources, precedents, and guiding principles. Taking the time to communicate the process clearly was really helpful in fostering continued sponsorship and buy-in from senior management.
We created an extensive design strategy deck to maintain the confidence of executive leaders
Maintaining Broader Buy-in
Since we were changing so much at once, we knew a lot of people throughout the company would be apprehensive. We proactively sought input from people across all departments and maintained an open-door policy - despite aggressive deadlines. Visitors were encouraged to participate in a quick "blind self-portrait" exercise and the results were posted on the door. It helped people feel they were part of the change and not being challenged by it.
We invited visitors to the project room to create blind self-portraits as a way of fostering inclusion
Launch
Once designs for the desktop site were finalized and approved, other design teams began updating existing digital products and creating new ones according to the new guidelines. The Ally online banking mobile app was first to launch with the new design. Then the desktop site went live followed by new tablet apps.
Final Dashboard
Old Dashboard
