ATB, a co-creation story
I was curious to see how co-creation methodologies could be used to provide mechanisms for improving product development and democratizing the process.
Results & impact
As Senior Product Designer, I guided and supported a cross-functional team, aligning development, product, research, and user needs, to deliver new product features for a complicated payment system — within a two-month timeframe. The successful launch was immediately evident, with over 1000 impressions in the first three days of release, showcasing strong user comprehension and quick adoption. This result eliminated the need for further iterations.
Client: ATB
Time Frame: 2 months
Duration : July 2024
Role: Senior Designer
Current product processes & pain points
Most major feature releases are typically drawn-out lasting 1–2 quarters involving design and an extensive discovery period. Usually, products under development undergo refinement and multiple modifications which result in a stripped-down version. Long timelines and these modifications cause compromised releases of products that often don’t meet client needs, and expectations or become outdated.
The co-creation advocacy strategy
Co-creation was not widely known at ATB. My first step was to research and gather documentation that supported co-creation as a methodology for a new product release.
To introduce co-creation at ATB, I compiled supporting documentation and partnered with a researcher for advocacy.
In addition to that we shared a co-creation proposal outlining the concept and its benefits, integrating it into ATB's vocabulary.
Co-Creation internal presentation slides
Wire Transfers: High-risk transfers
It was a known issue that the business solutions team was receiving a high volume of calls from customers regarding wire transfers. Key drivers of high call volume revealed a lack of information for users:
how fees are calculated;
unknown estimated settlement times of a transfer;
currency conversion;
correct beneficiary information
The product owner who was responsible for wire transfer saw an opportunity to introduce a UI-based solution to mitigate some of these call drivers. A pilot project was brought to business leaders which was funded and roadmapped.
After conversations with the product and research team, we felt this was an opportunity to introduce co-creation as part of the pilot.
A team was formalized which represented a tripod of product, research, and design. We started by studying different co-creation techniques, practices, and applications.
ATB Admin User Group and Co-creation
Our team sought to have a co-creation user panel that we could have an ongoing and meaningful relationship with. A survey was sent out to ATB users to get more information about card management and we asked, “Would you be interested in being part of a panel of clients for future research on ATB Business?” 178 Admin Users responded Yes.
Changing direction
We reached out to 5 participants from the panel and were surprised that all decided to opt-out. The participants were unable to commit to the timeframe and intensity being asked of them. A meeting was arranged to discuss our options and next steps.
An opportunity arises
The search for the RITE method
We discussed utilizing usertesting.com to get participants involved in the co-creation process. Our team was challenged to realize that users weren’t ATB customers and that we would rely on a platform. Committing 5 participants in this way became rather easy as participants could commit to our 5-week timeline and had already built behaviors around testing.
After discussion, it was decided that the Rapid Iterative Testing and Evaluation (RITE) was the best method for achieving our goals of intensity of research and design iterations.
Understanding wire transfers
Wire transfers are frequently used for international transactions,
It's a digital transfer, not a physical exchange of cash or cheques.
It involves the direct transfer of funds between financial institutions.
While not instantaneous, wire transfers are generally faster than other methods like cheques.
Once a wire transfer is sent, it's very difficult to reverse.
Wire transfers can be used for both domestic (within Canada) and international transactions.
Initiating Usability Testing
Session 1:
A walk-through the current experience, sketches, and early prototype.
Session 2: New banner that introduced new iconography and lifestyle imagery and removed baked-in text making the website more accessible. As part of this phase, the removal of the grey background helped to reduce the gridlock pattern.
Phase 3: Constructing and launching new components and enhancements.
Session 1:
The first session was a series of moderated interviews that walked participants through the current experience. Participants were asked to do a wire transfer with the necessary information and were asked what that information meant to them. Participants were observed to get insight into missed information and their decisions along the process. It was revealed to the team that participants seemed over-confident and often made procedural mistakes that would later cause them problems in achieving a successful wire transfer.
Our team became aware that the experience was not intuitive and was missing information (ie. the difference between creditor vs. beneficiary) as well as where to get help (many participants unsuccessfully Googled banking information details).
We took this information away as a team and came up with a series of sketches and ideated to provide the information that was lacking.
Session 2
After one week, the participants were called back to view early prototypes. Participants were walked through on-screen and off-screen interventions. They seemed delighted and invested because of the quick turnaround. Users gravitated to the info box and Encylopedia which provided more information for wire transfers. We had expected people to dislike embellishments with imagery or color, but instead, users gravitated towards designs that were more playful and image-focused.
Further refinement of the info box and pull-out drawer
Info boxes were standardized to be more in line with business banking and ATB. The Encyclopedia pull-out drawer was refined to include imagery and soften the experience from the feedback from our users. Aesthetics from ATB.com was included and accordions to show/hide information.
Refined Encyclopedia Drawer
Two different compositions of the info boxes
Session 3: Participants viewing refinements
Having honed in on two main features, we wanted to knock out assumptions about the Encyclopedia drawer component. Users were presented with multiple versions of the component. An unmoderated test allowed us to find patterns form from a large pool of participants.
Unmoderated testing
Design and Refinement with Developers
It only took one week for developer-ready files to be created. This was a marked difference from previous feature design work (usually 1–2 months). Rapid user-testing, higher fidelity prototyping, and a collaborative design process allowed for the quick turnaround of product development.
FInal design for The Drawer
FInal design for the info box
Shifting designs
Following the user-testing period, executive decisions were made by our team for the final designs. Some of these decisions were in contrast with user testing feedback. However, our team had a 30,000-foot view of the whole payment rail. For example, decisions included being strategic with imagery.
Trends toward success
The new feature resonated immediately, generating almost 1,000 impressions within the first three days, a clear indication that it effectively addressed a crucial user requirement.
Things to come
The future of embedded learning could be incorporated into AI concepts which is another feature we are looking to establish. This is just an assumption though and as our case study shows, co-creation is a valuable methodology for challenging our thought processes and ways of working.
AI offering contextual information
AI Contextual Bar