Finance for Teens
SCOPE
Mobile app
ROLE
UX Designer
DURATION
06/23 - 07/23
Overview
BizWiz is a mobile application based in both iOS and Android platforms that proposes to educate teenagers within the age range of 13 – 19 about finance, budgeting, and savings goals in an entertaining, informative, and user-friendly manner.
Objective
Using a user-centered design sprint approach, conduct research as a team to identify key components of a finance app for teens, and incorporate those findings into BizWiz, making sure that the end result is educational, accessible, and fun to use.
Outcome
Over the span of seven weeks, the team successfully facilitated and completed all phases of the design sprint process to design a mobile app – BizWiz – with the aim of educating teens about finance.
Team: Melanie Careri, Katherine Coen, Olivia Kettell
This project was for ICM 500: Google Design Sprint, a graduate ICM course at Quinnipiac University.
Getting Started
To research and design BizWiz, we utilized a user-centered design sprint process. This process allowed us to efficiently conduct research, analyze results, and build a viable prototype within five weeks*.
This design sprint process consisted of the following phases:
Phase 1: Understand + Define
Phase 2: Diverge + Decide
Phase 3: Prototype
Phase 4: Test
*Please refer to the sprint report at the end of this case study for more details.
UNDERSTAND + DEFINE
Background research
Problem statement
High-level map
Lightning demos
4-step sketches
DIVERGE + DECIDE
Voting
User flows
Storyboarding
PROTOTYPE
App breakdown
Wireframes
Mockups
High-fidelity prototype
Trial run
TEST
Usability testing
Data analysis
Iteration
Phase 1: Understand + Define
Learning the Landscape
During the first phase of the design process – Understand + Define, the team and I first sought to understand and analyze currently financial apps and user issues. Then we defined these issues such that we could further progress in the design sprint process.
Methodology
Conduct background research
Devise a problem statement
Assemble a high-level map
Complete lightning demos
Go through the 4-step sketch process
Background research
According to the 2022 Junior Achievement and Fannie Mae Youth Homeownership Survey, less than half (45%) of surveyed teens could define a home mortgage while three-quarters (76%) of them claimed they “lacked a clear understanding of credit scores.” A 2021 Greenlight study uncovered that nearly 3 out of 4 teens (74%) did not feel that their financial literacy was satisfactory. The same study also discovered that almost half of the teenage population (46%) doesn’t know what a 401(k) is. It becomes clear with these statistics that financial and economic education needs to be improved for teens, as it is important – or rather, vital – when they become adults.
BizWiz aims to bridge that gap in knowledge by educating teens about finance.
Problem Statement
A teenager in the age range of 13 – 19 needs to use the educational mobile app BizWiz in order to gain a more solid understanding and appreciation for financial topics.
High-Level Map
When creating our high-level map, we wanted to focus on the sign up process, lessons, and rewards. Our ultimate goal was to have our target user group – teens – gain more knowledge about personal financing.
Lightning Demos
Next, we conducted lightning demos to find what it currently on the market in terms of finance apps. For our financial education based mobile app, we focused on apps that had similar offerings.
4-Step Sketches
The 4-Step Sketch is a method that involves four sequential steps: Notes, Ideas, Crazy 8’s, and Solution Sketch. Doing this activity got many of our ideas out on paper and helped us to determine the visual direction of BizWiz.
Notes
Ideas
Crazy 8’s
Solution Sketch
Phase 2: Diverge + Decide
Ideating a Solution
For the second phase of the design process – Diverge + Decide – we critiqued solutions that team members had previously sketched, and decided on what to implement. In addition to this process, we devised a method to best organize our user scenarios.
Methodology
Vote on the potential solutions
Organize user flows
Weave a storyboard
Voting
Once we finished up with our solution sketches from the first phase, we presented our ideas amongst ourselves. After presenting, we each voted for the most viable solutions using heat map voting.
User Flows
User flows streamline the storyboarding process. We voted on a user flow to move forward with. We then created an 8-step storyboard composite using this user flow.
Storyboard
Using our 8-step composite as a reference point, we finished the refined storyboard as a group. We focused on creating potential wireframes in our storyboard for usage in the the prototype phase.
Phase 3: Prototype
Creating a Viable Solution
For the second phase of the design process – Diverge + Decide – we critiqued solutions that team members had previously sketched, and decided on what to implement. In addition to this process, we devised a method to best organize our user scenarios.
Methodology
Perform an app breakdown
Draft low-fidelity wireframes
Create high-fidelity mockups
Generate an interactive prototype
Conduct a trial run
App Breakdown
The initial step of the third phase was to breakdown the app into manageable chunks. Doing so using this approach gave us a clearer picture on what each section had to include when making the wireframes and eventual prototype.
Low-Fidelity Wireframes
Next, we put together low-fidelity wireframes based off of our app breakdown and storyboard from the second phase. We wanted to get a solid idea of where all the components would be placed, but still retain flexibility.
High-Fidelity Mockups
I was in charge of creating the high-fidelity mockups along with the interactive prototype. We decided to go with a blue-green color scheme in accordance with color psychology. The whole aesthetic was kept simple and clean.
Interactive Prototype
The interactive prototype is essentially a continuation of the high-fidelity mockups. I added connections and wired up the mockups in preparation for the next phase – testing.
Trial Run
The final step of this phase was to trial run our completed interactive prototype. We simulated the various scenarios a user could go through while using BizWiz. We also made sure that the aesthetic and branding were consistent, as well as checked the prototype interactions to insure they were all going to the right places. Overall, we thought the direction we were heading in was positive and we deemed the prototype ready for usability testing.
Some observations:
A weekly overview of the budget calendar on the homepage might prove to be helpful. It would be a good balance since it would be less overwhelming than having a full calendar.
An observation not related to prototype itself, but the rewards should be worth more points when BizWiz is being developed.
Phase 4: Test
Getting User Feedback
The fourth phase of this design sprint process put our interactive prototype to the test with actual users. We sought to receive feedback in order to make BizWiz more accessible and user-friendly. In addition, it was an opportunity to observe how users interacted with the mock app.
Methodology
Conduct usability testing
Perform data analysis
Iterate on design
Usability Testing
To conduct the usability testing sessions, we came up with scenarios as well as questions. Since we also wanted a graphical view of our data, we decided to implement an SUS (System Usability Scale) survey on Google Forms.
User Scenarios
#1: User opens BizWiz → Sign up for an account → Enters bank account information → Selects interests → Turns on notifications
#2: User opens BizWiz → Logs into account → Continues Finance 101 → Checks rewards redeems → Checks leaderboard of scores
#3: User opens BizWiz → Logs into account → Checks budget agenda → Checks savings goals
Questions
Is there anything else that could help enhance your experience?
Is there anything you found difficult to navigate? If so, where and why?
Should certain elements be emphasized more or less than others? If so, which ones?
Would you recommend BizWiz to teens who want to learn more about finance? Why/why not?
Data Analysis
After the usability tests were complete and the users had filled out the SUS survey, we were able to consolidate and draw conclusions from the data we gathered. The graphs provided a good sense of where we stood statistically, and we could see that BizWiz was well-received. Most of the suggestions we received were superficial changes that could be implemented within the prototype fairly quickly. Other suggestions were placed in the backlog for a later iteration as they were time-consuming for the span of time we had, but were still great ideas.
Suggestions
Mention that Finance 101 is for beginners within the Transcript and text description.
Create an Accessibility menu in settings with more user accessibility features (larger text size, night/dark mode).
Add a live chat feature along with the questions on the Help page
Add introductory tutorial/tour (walkthrough).
Iteration
As the suggestions were mostly cosmetic, they were easy to modify given the short timeframe. We added settings for accessibility, and clarified that Finance 101 was best for beginners. The bigger suggestions were added to the backlog.
Retrospective
Over the span of five weeks, the team and I successfully completed all phases of the design sprint process to design a mobile app – BizWiz – with the aim of educating teens about finance. We received positive feedback from users, which makes us confident that we were headed in the right direction and fulfilled the necessary objectives.
As for the next steps, I’d love to explore all the ideas we have in the backlog, such as creating a tutorial walkthrough of the app, or an AI live chat feature. Creating social media branding might also prove to be fruitful and enriching. After implementing changes, I’d like to hold another round of user testing and iterate upon those findings.
