The Digital Finance Sandbox
Year: 2020 - 2022
Role: Project Manager, Researcher, Designer
Research Type: Exploratory research
*Note: Due to confidentiality, I’ve simplified some processes and details on this page. For additional details, please contact liz.kang@rotman.utoronto.ca
Background and goals:
The high-level objective of this project is to create a simulated online banking website to track and analyze user behaviour in digital banking environments. Specifically, the project team was interested in understanding user behaviour in online credit card acquisition processes - how different design interventions on the website would affect users’ credit card choices. Some key research questions:
1) How does the emphasis on either reward maximization or cost minimization on the various pages on the website influence the user’s credit card selection?
2) How does the timing of displaying credit card information disclosure statements influence the user’s credit card selection?
A screenshot of the simulated online banking website for testing
Research Process:
1. Market research
We looked at the websites of the Big 5 Canadian banks to identify some common elements, design and flow. It turned out (in 2020) that most of the banks use pretty similar information architecture and design, especially the banks’ homepage and pages associated with credit cards.
My role: Instructed research assistants to conduct market research and report findings via a presentation
2. Low-Fidelity Wireframe
Based on the insights and findings from the market research, we created a low fidelity wireframe to 1) understand the basic structure and flow of a typical banking website - especially to visualize the user journey of the credit card acquisition process, and 2) have a better sense of where we could possibly place potential behavioural interventions.
My role: Instructed the research assistants on how to create a low-fidelity wireframe via Balsamiq and supervised their work
3. High-Fidelity Interactive Prototype
Based on the wireframe, we built a high-fidelity interactive prototype of the website using a web platform and custom coding. It served two purposes: 1) we used it to communicate with different tech service providers and engineers to identify the feasibility and scalability of data collection and storage before implementing the actual product, and 2) we used it for a demo to show our research partners what we’d been working on and gauge their interest on potential collaboration.
My role: Created the high fidelity interactive prototype (visit the prototype below) using a web platform and custom coding (HTML, CSS, Javascript). Communicated with multiple data collection software service providers and engineers and gauged the feasibility of software integration.
Website Prototype (Screenshot)
4. Website Implementation and Testing
We created different versions of the website (e.g. reward maximization vs cost minimization) and developed algorithms to randomly assign different conditions to participants. We also built the backend such that we can record and store all clickstream data - KPIs include everything that users clicked on and when, all webpages that were visited and for how long, which credit card was chosen, and which boxes were ticked, what credit cards were compared, etc.
We successfully launched the simulated website and data collection is now complete.
My role: Co-programmed the front-end interface of the website using HTML, CSS, and Javascript. Throughout the implementation process, I managed the communication between the engineer and academic researcher on what we want vs what we can do.