UX/UI
UX/UI
UX/UI
Financial Planning Website and App Speculative Design: Sibyl
Financial Planning Website and App Speculative Design: Sibyl
Financial Planning Website and App Speculative Design: Sibyl
Overview
Overview
Overview
Through a sponsored studio course with Fidelity Investments, I was tasked with developing a system to aid young adults learn and manage their finances using AI. This project was speculative, but with the rise of AI in many forms, it was grounded in research because there is a possibility of AI being incorporated into the financial field. Within a group of 2 other designers, we developed a website and app system that used AI in the form of "future-selves." The system would use behavioral analytics by taking your financial past and creating a relatable, friendly version of yourself in the future that would make different financial decisions and allow the users to interact and chat with the future-self to understand the decisions they made.
The app we designed to pair with the website is a group chat where the user can message all the versions of their future-selves and ask for real-time advice when they aren't able to log into the full website version of our system. The user is also able to view their financial plan, which can be updated by chatting with the future-selves.
Through a sponsored studio course with Fidelity Investments, I was tasked with developing a system to aid young adults learn and manage their finances using AI. This project was speculative, but with the rise of AI in many forms, it was grounded in research because there is a possibility of AI being incorporated into the financial field. Within a group of 2 other designers, we developed a website and app system that used AI in the form of "future-selves." The system would use behavioral analytics by taking your financial past and creating a relatable, friendly version of yourself in the future that would make different financial decisions and allow the users to interact and chat with the future-self to understand the decisions they made.
The app we designed to pair with the website is a group chat where the user can message all the versions of their future-selves and ask for real-time advice when they aren't able to log into the full website version of our system. The user is also able to view their financial plan, which can be updated by chatting with the future-selves.
Through a sponsored studio course with Fidelity Investments, I was tasked with developing a system to aid young adults learn and manage their finances using AI. This project was speculative, but with the rise of AI in many forms, it was grounded in research because there is a possibility of AI being incorporated into the financial field. Within a group of 2 other designers, we developed a website and app system that used AI in the form of "future-selves." The system would use behavioral analytics by taking your financial past and creating a relatable, friendly version of yourself in the future that would make different financial decisions and allow the users to interact and chat with the future-self to understand the decisions they made.
The app we designed to pair with the website is a group chat where the user can message all the versions of their future-selves and ask for real-time advice when they aren't able to log into the full website version of our system. The user is also able to view their financial plan, which can be updated by chatting with the future-selves.
My Contribution
My Contribution
My Contribution
For this 15 week-long project I worked with two other designers to develop this idea. For the ideation process, we came up with many ideas both collectively and individually. Collectively we developed the idea of creating future-selves and the format of a website and app. For the UI of the website, we collaborated on the design of the buttons and and the pull out tab. We adapted the pull out tab for the app and I designed the simple, two button format of the app.
For our website, I developed the prototyping in Figma for the click through and hover interactions. I also designed the future-self introduction page as well as the other intro pages for the website. I also collaborated with my other group member to film and edit the video we created that walked viewers through our website and app.
For this 15 week-long project I worked with two other designers to develop this idea. For the ideation process, we came up with many ideas both collectively and individually. Collectively we developed the idea of creating future-selves and the format of a website and app. For the UI of the website, we collaborated on the design of the buttons and and the pull out tab. We adapted the pull out tab for the app and I designed the simple, two button format of the app.
For our website, I developed the prototyping in Figma for the click through and hover interactions. I also designed the future-self introduction page as well as the other intro pages for the website. I also collaborated with my other group member to film and edit the video we created that walked viewers through our website and app.
For this 15 week-long project I worked with two other designers to develop this idea. For the ideation process, we came up with many ideas both collectively and individually. Collectively we developed the idea of creating future-selves and the format of a website and app. For the UI of the website, we collaborated on the design of the buttons and and the pull out tab. We adapted the pull out tab for the app and I designed the simple, two button format of the app.
For our website, I developed the prototyping in Figma for the click through and hover interactions. I also designed the future-self introduction page as well as the other intro pages for the website. I also collaborated with my other group member to film and edit the video we created that walked viewers through our website and app.
Video Scenario
Video Scenario
Video Scenario
To explain our scenario and how our AI system, Sibyl, helps young adults plan and understand finances, we created a video. It follows our persona, Ariana in figuring out how to invest 15K she got from her grandmother and parents.
We presented this video to members of Fidelity Investment's FCAT research team (Fidelity Center for Applied Technology) at the end of our project.
To explain our scenario and how our AI system, Sibyl, helps young adults plan and understand finances, we created a video. It follows our persona, Ariana in figuring out how to invest 15K she got from her grandmother and parents.
We presented this video to members of Fidelity Investment's FCAT research team (Fidelity Center for Applied Technology) at the end of our project.
To explain our scenario and how our AI system, Sibyl, helps young adults plan and understand finances, we created a video. It follows our persona, Ariana in figuring out how to invest 15K she got from her grandmother and parents.
We presented this video to members of Fidelity Investment's FCAT research team (Fidelity Center for Applied Technology) at the end of our project.
Research
Research
Research
We were given some starting questions to begin our process on creating an financial AI system:
How might we leverage AI to capture and then move beyond the capabilities of a human support representative/financial advisor?
How might the resulting customer engagement agent/tool appropriately span a customer’s multimodal interactions during critical periods of wealth transfer?
How might this tool best assist and retain Fidelity customers during such a transfer of knowledge and assets?
We were also given the persona story of the Cooper family, which included Lydia, Scott, and Abigail as the grandmother, son, and granddaughter. Lydia had just sold her home and gifted $50k to Scott, who then gave $15k to Abigail. Abigail has a full-time job and student loans since she recently graduated from college.
Using the Abigail persona, my group and I conducted interviews with young adults who received large sums of money at some point in their lives. We also interviewed financial advisors to understand the situation from a professional's perspective. From the interviews and Abigail's persona story, we created a persona and a user journey that we used in the development of our AI system.
We were given some starting questions to begin our process on creating an financial AI system:
How might we leverage AI to capture and then move beyond the capabilities of a human support representative/financial advisor?
How might the resulting customer engagement agent/tool appropriately span a customer’s multimodal interactions during critical periods of wealth transfer?
How might this tool best assist and retain Fidelity customers during such a transfer of knowledge and assets?
We were also given the persona story of the Cooper family, which included Lydia, Scott, and Abigail as the grandmother, son, and granddaughter. Lydia had just sold her home and gifted $50k to Scott, who then gave $15k to Abigail. Abigail has a full-time job and student loans since she recently graduated from college.
Using the Abigail persona, my group and I conducted interviews with young adults who received large sums of money at some point in their lives. We also interviewed financial advisors to understand the situation from a professional's perspective. From the interviews and Abigail's persona story, we created a persona and a user journey that we used in the development of our AI system.
We were given some starting questions to begin our process on creating an financial AI system:
How might we leverage AI to capture and then move beyond the capabilities of a human support representative/financial advisor?
How might the resulting customer engagement agent/tool appropriately span a customer’s multimodal interactions during critical periods of wealth transfer?
How might this tool best assist and retain Fidelity customers during such a transfer of knowledge and assets?
We were also given the persona story of the Cooper family, which included Lydia, Scott, and Abigail as the grandmother, son, and granddaughter. Lydia had just sold her home and gifted $50k to Scott, who then gave $15k to Abigail. Abigail has a full-time job and student loans since she recently graduated from college.
Using the Abigail persona, my group and I conducted interviews with young adults who received large sums of money at some point in their lives. We also interviewed financial advisors to understand the situation from a professional's perspective. From the interviews and Abigail's persona story, we created a persona and a user journey that we used in the development of our AI system.
Ariana
Works as an Associate Merchant at Crate & Barrel corporate in Chicago, and makes $65,000.
She has about $52k in student debt, with 6.53% (low end) interest.
Ariana
Works as an Associate Merchant at Crate & Barrel corporate in Chicago, and makes $65,000.
She has about $52k in student debt, with 6.53% (low end) interest.
Ariana
Works as an Associate Merchant at Crate & Barrel corporate in Chicago, and makes $65,000.
She has about $52k in student debt, with 6.53% (low end) interest.
Our persona, Ariana, is a recent college graduate with a steady income, so she feels confident enough to explore financial risks while prioritizing student debt repayments, saving for a home, and funding personal interests. She recieves $15k from her father and doesn't know what to do with it at first, but after doing her own research and talking to a financial advisor, she ends up putting 5k towards her debt, 4k into SPY, and 6k into a high yields savings account.
From the user journey map, we developed 3 pain and gain points that we used in developing our interface:
Our persona, Ariana, is a recent college graduate with a steady income, so she feels confident enough to explore financial risks while prioritizing student debt repayments, saving for a home, and funding personal interests. She recieves $15k from her father and doesn't know what to do with it at first, but after doing her own research and talking to a financial advisor, she ends up putting 5k towards her debt, 4k into SPY, and 6k into a high yields savings account.
From the user journey map, we developed 3 pain and gain points that we used in developing our interface:
Our persona, Ariana, is a recent college graduate with a steady income, so she feels confident enough to explore financial risks while prioritizing student debt repayments, saving for a home, and funding personal interests. She recieves $15k from her father and doesn't know what to do with it at first, but after doing her own research and talking to a financial advisor, she ends up putting 5k towards her debt, 4k into SPY, and 6k into a high yields savings account.
From the user journey map, we developed 3 pain and gain points that we used in developing our interface:
Pain Points
Pain Points
Pain Points
She feels overwhelmed and pressured by family expectations to use the money to work towards the right financial goals.
She feels overwhelmed and pressured by family expectations to use the money to work towards the right financial goals.
She feels overwhelmed and pressured by family expectations to use the money to work towards the right financial goals.
She feels uncertain after meeting with her financial advisor and is unclear about what actions to take next.
She feels uncertain after meeting with her financial advisor and is unclear about what actions to take next.
She feels uncertain after meeting with her financial advisor and is unclear about what actions to take next.
She has difficulty understanding how different saving and investment accounts work and what financial terminology means.
She has difficulty understanding how different saving and investment accounts work and what financial terminology means.
She has difficulty understanding how different saving and investment accounts work and what financial terminology means.
Gain Points
Gain Points
Gain Points
A simple interface with future predictions based on user data to demonstrate how financial decisions may impact personal finances.
A simple interface with future predictions based on user data to demonstrate how financial decisions may impact personal finances.
A simple interface with future predictions based on user data to demonstrate how financial decisions may impact personal finances.
A system that gives clear, actionable steps and a structured follow-up after meetings with a financial advisor.
A system that gives clear, actionable steps and a structured follow-up after meetings with a financial advisor.
A system that gives clear, actionable steps and a structured follow-up after meetings with a financial advisor.
A system that gives beginner-friendly explanations to help build a strong understanding and enable the user to apply them in future financial situations.
A system that gives beginner-friendly explanations to help build a strong understanding and enable the user to apply them in future financial situations.
A system that gives beginner-friendly explanations to help build a strong understanding and enable the user to apply them in future financial situations.
Sketches and Wireframes
Sketches and Wireframes
Sketches and Wireframes
From the pain and gain points, we created ideas based on different aspects that we wanted the system to focus on, like matching profiles, predicting finances, and simplifying information. We went through many sketches and ideas, some of my ideas are shown below, as well as storyboards of my teammates and I's ideas with notes on different aspects of the idea we wanted to explore further.
My first sketch shows an idea based on a system built to predict the user's financial future. The AI would suggest different ways to manage finances and would have a feature that would show how different investments would affect the user's money over a certain period of time.
My second sketch shows an idea based on simplifying financial terms and decisions through a story or podcast that the AI generates. After the user tell the AI their financial information, it generates an easy to understand story explaining what their next financial decision should be. There would also be a feature where the user can video call a financial advisor and the AI would simplify financial terms in real time.
The third sketch shows storyboards of a data visualization, a digital twin, and a VR idea done by my group members and I. I sketched the VR storyboard idea at the bottom. For our final idea, we drew a lot of inspiration from the digital twin idea.
From the pain and gain points, we created ideas based on different aspects that we wanted the system to focus on, like matching profiles, predicting finances, and simplifying information. We went through many sketches and ideas, some of my ideas are shown below, as well as storyboards of my teammates and I's ideas with notes on different aspects of the idea we wanted to explore further.
My first sketch shows an idea based on a system built to predict the user's financial future. The AI would suggest different ways to manage finances and would have a feature that would show how different investments would affect the user's money over a certain period of time.
My second sketch shows an idea based on simplifying financial terms and decisions through a story or podcast that the AI generates. After the user tell the AI their financial information, it generates an easy to understand story explaining what their next financial decision should be. There would also be a feature where the user can video call a financial advisor and the AI would simplify financial terms in real time.
The third sketch shows storyboards of a data visualization, a digital twin, and a VR idea done by my group members and I. I sketched the VR storyboard idea at the bottom. For our final idea, we drew a lot of inspiration from the digital twin idea.
From the pain and gain points, we created ideas based on different aspects that we wanted the system to focus on, like matching profiles, predicting finances, and simplifying information. We went through many sketches and ideas, some of my ideas are shown below, as well as storyboards of my teammates and I's ideas with notes on different aspects of the idea we wanted to explore further.
My first sketch shows an idea based on a system built to predict the user's financial future. The AI would suggest different ways to manage finances and would have a feature that would show how different investments would affect the user's money over a certain period of time.
My second sketch shows an idea based on simplifying financial terms and decisions through a story or podcast that the AI generates. After the user tell the AI their financial information, it generates an easy to understand story explaining what their next financial decision should be. There would also be a feature where the user can video call a financial advisor and the AI would simplify financial terms in real time.
The third sketch shows storyboards of a data visualization, a digital twin, and a VR idea done by my group members and I. I sketched the VR storyboard idea at the bottom. For our final idea, we drew a lot of inspiration from the digital twin idea.
From critiques with the FCAT team, we decided to build on our idea of using AI to create a digital twin of the user's financial choices in the future. The FCAT team emphasized their desire for our system to push technology into the future, so we decided to create an 3D interactive world that the digital twin would live in that the user could view to influence their own financial decisions.
After our initial sketches, we built out wireframes for our idea. We were thinking of having a dual screen format so the user could see their current financial world and the world of the digital twin, which would be them just after a certain period of time or after different financial decisions. There would side menus that showed a profile of the digital twin as well as how they planned for certain financial decisions. There was also a word bank feature that would define financial terms to help the user understand more about finances in general.
From critiques with the FCAT team, we decided to build on our idea of using AI to create a digital twin of the user's financial choices in the future. The FCAT team emphasized their desire for our system to push technology into the future, so we decided to create an 3D interactive world that the digital twin would live in that the user could view to influence their own financial decisions.
After our initial sketches, we built out wireframes for our idea. We were thinking of having a dual screen format so the user could see their current financial world and the world of the digital twin, which would be them just after a certain period of time or after different financial decisions. There would side menus that showed a profile of the digital twin as well as how they planned for certain financial decisions. There was also a word bank feature that would define financial terms to help the user understand more about finances in general.
From critiques with the FCAT team, we decided to build on our idea of using AI to create a digital twin of the user's financial choices in the future. The FCAT team emphasized their desire for our system to push technology into the future, so we decided to create an 3D interactive world that the digital twin would live in that the user could view to influence their own financial decisions.
After our initial sketches, we built out wireframes for our idea. We were thinking of having a dual screen format so the user could see their current financial world and the world of the digital twin, which would be them just after a certain period of time or after different financial decisions. There would side menus that showed a profile of the digital twin as well as how they planned for certain financial decisions. There was also a word bank feature that would define financial terms to help the user understand more about finances in general.
After solidifying our idea of a future-self that would be at a different stage in life than the user, we built out the look of our website. We wanted to incorporate aspects of our AR idea, so our website included a 3D interactive world that the user could drag their mouse through and select certain parts to view how the digital twin put their finances toward the selected part of the world. We refined the pull out tab, and in later sketches we had 2 tabs, but in our final design we only used one to show the user's current financial plan.
After critiques, we decided to change our digital twin whose age can fluctuate to a predictive "future self" that is centered around one personality trait. That way the user can hone in on specific financial goals they might have. We refined the interface more by changing the navigation button to allow more space for the "me" tab.
After solidifying our idea of a future-self that would be at a different stage in life than the user, we built out the look of our website. We wanted to incorporate aspects of our AR idea, so our website included a 3D interactive world that the user could drag their mouse through and select certain parts to view how the digital twin put their finances toward the selected part of the world. We refined the pull out tab, and in later sketches we had 2 tabs, but in our final design we only used one to show the user's current financial plan.
After critiques, we decided to change our digital twin whose age can fluctuate to a predictive "future self" that is centered around one personality trait. That way the user can hone in on specific financial goals they might have. We refined the interface more by changing the navigation button to allow more space for the "me" tab.
After solidifying our idea of a future-self that would be at a different stage in life than the user, we built out the look of our website. We wanted to incorporate aspects of our AR idea, so our website included a 3D interactive world that the user could drag their mouse through and select certain parts to view how the digital twin put their finances toward the selected part of the world. We refined the pull out tab, and in later sketches we had 2 tabs, but in our final design we only used one to show the user's current financial plan.
After critiques, we decided to change our digital twin whose age can fluctuate to a predictive "future self" that is centered around one personality trait. That way the user can hone in on specific financial goals they might have. We refined the interface more by changing the navigation button to allow more space for the "me" tab.
Our future-self concept is based on behavioral analytics that would be accessed through past financial decisions. They are centered around one personality trait to keep the idea simple so the user can hone in on specific financial goals they have. We refined the interface more by changing the navigation button and incorporated a progress bar to visualize the money saved up for a goal.
As a group, we choose the name, colors, and typefaces for our system. The name "Sibyl" comes from the women who could predict prophecies of the future in Greek mythology. This represents the part of our system that predicts the user's future financial possibilities.
Our future-self concept is based on behavioral analytics that would be accessed through past financial decisions. They are centered around one personality trait to keep the idea simple so the user can hone in on specific financial goals they have. We refined the interface more by changing the navigation button and incorporated a progress bar to visualize the money saved up for a goal.
As a group, we choose the name, colors, and typefaces for our system. The name "Sibyl" comes from the women who could predict prophecies of the future in Greek mythology. This represents the part of our system that predicts the user's future financial possibilities.
Our future-self concept is based on behavioral analytics that would be accessed through past financial decisions. They are centered around one personality trait to keep the idea simple so the user can hone in on specific financial goals they have. We refined the interface more by changing the navigation button and incorporated a progress bar to visualize the money saved up for a goal.
As a group, we choose the name, colors, and typefaces for our system. The name "Sibyl" comes from the women who could predict prophecies of the future in Greek mythology. This represents the part of our system that predicts the user's future financial possibilities.
The navigation system is activated when the cursor hovers over the circle. From there the user can choose the next world to view or if they want to add another one.
The navigation system is activated when the cursor hovers over the circle. From there the user can choose the next world to view or if they want to add another one.
The navigation system is activated when the cursor hovers over the circle. From there the user can choose the next world to view or if they want to add another one.
To understand how the future-self bought the different items in their world the user can hover and click the dropdown to view their full savings plan.
To understand how the future-self bought the different items in their world the user can hover and click the dropdown to view their full savings plan.
To understand how the future-self bought the different items in their world the user can hover and click the dropdown to view their full savings plan.