03 | Create
main features
Before diving right into our wireframes, we decided on our main features for this fused-concept design based on our users' needs and design requirements.
Our team worked with a global fintech and payments company as an industry partner who presented us with the statement "Innovate the future of online banking," wanting us to explore what’s missing from current digital banking offerings and how people might expect to interact with traditional currency and the new wave of digital currency (cryptocurrency) within one digital banking experience.
To start the design process, we wanted to identify people’s standard financial practices, behaviors, and heuristics while interacting with online banking services, how well current systems and apps support them, and use these insights to understand our users’ preferences and pain points to then design an online banking system that addresses their current needs and is a remedy to their current pain points from their online banking interactions.
We started our user research process by designing two separate surveys: a screening survey to scope out our targets users and get access to users willing to be interviewed, and a survey in collaboration with our industry partner to get more data and insight mainly on users outside our target user group since our initial background research showed that a wide variety of people use online banking. The surveys helped us determine our target user group's spending habits and views on banking, budgeting, and investing.
After wrapping up our surveys, we conducted semi-structured interviews with participants in and outside our target user group to talk one-on-one about their experience with online banking, finance, and investing. We wanted to understand how significant online banking and investment are for people in various stages of life - students, spouses, full-time employees - and financial literacy.
We analyzed our research data using qualitative coding to view all our interview data quantitatively to perform deeper analysis and discover patterns and connections amongst our participants. From our study, we determined our users' needs, pain points, and goals concerning online banking:
Based on our user characteristics and research data, we created three user personas to illustrate the primary needs of our users. User personas helped us visualize and categorize the different priorities and challenges our users deal with during various stages of their lives.
Having a complete understanding of our users' needs and characteristics by this point, we were able to establish the requirements and design implications our design solution needed to include. From these user needs and design implications, we divided them into three design requirement categories:
The solution should allow users to define, manage, and keep track of their budget to ensure users stay within their budget, avoid significant out-of-budget expenses, and pay their bills on time.
The solution should allow users to save money for specific life goals and put money aside for "rainy days."
The solution should allow users to move their money freely and seamlessly between their different accounts, keep track of all their investments in one place, and will enable them to learn more about investing.
Our group then brainstormed possible design solutions that would successfully meet the design requirements but wouldn't overwhelm users. After revisiting the design requirements, we decided to create three design ideas focused on each theme and made paper prototypes for each concept.
After the paper prototypes were completed, we conducted three user feedback sessions with participants in our target user group to determine if our concepts met our users' needs and which was well-received the most.
Piggy and Moneylingo were equally well-received the most during all feedback sessions. Users liked how they could personalize their banking experience through customizable savings accounts connected to specific goals and learn more about investments creatively and interactively. Because we felt these two concepts had similar concepts while meeting unique user needs, we decided to move forward with a design concept that was a combination of these two sketched concepts as we moved onto the next phase of our design process.
Before diving right into our wireframes, we decided on our main features for this fused-concept design based on our users' needs and design requirements.
Then, we created wireframes to show the flow logic and content of each feature in the app.
Once the wireframes for the main features were complete, we conducted two user feedback sessions with participants in our target user group to determine if the flow logics were easy to follow and straightforward while still satisfying their needs and discover any accessibility and usability issues that may have been overlooked or gone unnoticed by our team and previous feedback sessions. After testing our wireframe with users, we made a few design changes based on their feedback and created a high-fidelity prototype.
The home page lists all the savings goals users have created. Each savings goal is presented as a card with the cover image, title, a brief description of the goal, and the target amount. The goals are ordered from least to most time left to meet their goal.
The pockets page is an overview of all the money the user has saved in the app. The donut chart shows the total savings divided into the different saving methods. The colors in the chart are chosen to be perceptually distinct. The thematic investment funds are broken down into the individual funds the user invested in.
The lessons page is organized into modules containing a set of lessons. The user can resume progress from their last completed lesson at the top of the page without having to scroll through all the lessons.
Once completed, our prototype was ready for another round of evaluations to assess the overall usability of our design and interface and ensure our app is functional, easy to use, valuable to our users, and easy to be familiarized with. We conducted a heuristic evaluation for our expert participants and a moderated, in-person task-based testing for participants in our target user group. Based on the feedback from those sessions, we iterated our design to create a new and improved design.