Finance simplified.
INTRODUCTION
Solo student project for DesignLab UX/UI Bootcamp
My Role
Timeline
80 Hours
Wealth disparity is becoming increasingly apparent with over 68% of the total wealth in the US owned by the top 10% of earners. Younger generations are scraping by in hopes of one day owning property. This issue persists not only due to the current economic crisis but general poor financial management skills.
Problem
I want to create a finance banking app that targets younger audiences who struggle with managing their funds. Younger generations expect things to be done on-the-go so a mobile platform that can track their spending, set their saving goals, and provide budget calculation offers a step forward in tackling the wealth gap.
Goal
RESEARCH
User Interviews
To understand the challenges users are facing when managing their money, I conducted user interviews to find what features may be of help. I conducted interviews with 5 participants who fit the target demographic. Interviews were conducted over Google Meet and aimed to discover user’s motivations, needs, goals, and pain points.
After conducting interviews, I found some notable information that can be potential problems to address. This includes:
Younger individuals find investing to be confusing which intimidates them from taking the first steps.
Security is a top priority amongst all participants in regards to their finances.
Budgeting on tools such as Sheets can be tedious which may cause participants to lose motivation.
Sending payments is an important task amongst younger users so emphasizing convenience is key.
Competitive Analysis
To become familiar with the current market and have a better understanding of what the current market has to offer, I analyzed four popular technologies surrounding this goal. I compiled the competitor’s background, strengths, weaknesses, opportunities, and threats.
I found that the other competitors did not have a platform where users can not only manage their banking and investments, but also learn about how to invest. As this was a common painpoint found in my user interviews, I saw this as an opportunity to design a product which emphasizes educational spending.
DEFINE
Affinity Mapping
To make better sense of the data I gathered, I used affinity mapping to capture observations that stood out to me. By grouping notes that have similar content, I can synthesize my data through these patterns. This content will be used to make HMW questions, POV statements, and personas.
Common patterns that I found interesting are:
Budgeting tools tend to be tedious for a few participants due to the time and effort it takes to input information
Sending money to friends and family can take anywhere from 1-3 days which is a heavy inconvenience to deal with
Learning about finance can be difficult and overwhelming for younger individuals
POV Statements & HMW Questions
Working off my affinity map, I created point-of-view (POV) statements and how might we (HMW) questions to infer and hypothesize user’s needs. These insights have been tailored to the unique scenarios derived from my research and will serve as the foundation for my personas.
Personas
In order to design a product that meets user’s needs, I created a persona based on my research findings to represent target users. I went with a younger persona who is just graduating from college to demonstrate the target audience that the product design is catered towards. This persona values rewards, security, and convenience when online banking and is seeking to grow their capital for the future. The persona was referenced throughout the design process to ensure that the product remains user focused.
Site Map
Task Flows
To organize content in an intuitive way, I created a site map that visually represents how the pages will be connected. This site map will serve essentially as a blueprint for the structure of the product.
The main navigation that I felt best organized the content are Account, Transfer, Invest, and Budget.
Upon addressing user needs, I devised a set of task flows to help define the necessary wireframes needed for prototyping. These flows provide a linear path for the project’s design to follow.
Key
IDEATE
Feature Set
To determine the necessary features for the design, a feature set was created to use as a reference for what should be prioritized, to what can come later. These features were decided based off the research conducted and will be used as a point of reference when creating task flows.
Priority features chosen based on my reasearch includes:
Summarized spending based on various time frames
Budget plan creation that can take automatic payments
Educational content to support young individuals in their financial journey
Wireframes
I designed wireframes from low, mid, to high fidelity. The low fidelity wireframes were done on pencil and paper to have room to explore iterations at a lower cost point. From there, the mid fidelity wireframes were designed to have more clear structure and the high fidelity wireframes encompassed the full design. Throughout the process, flows and personas were referenced consistently to ensure that the design remains user focused. I find wireframing to be what I look forward to most during the design process. Designing a skeleton for my product provides me with clearer visualization of where it may go.
UI Kit
The name “Sprout” was chosen in accordance with the purpose of the product: helping young adults grow their money. I designed a letterform logo with leaves in place of the curves in the letter ‘S” as I found it best represent the company brand and idea in a clean and concise way. This is a product that targets a younger demographic so I chose to go with modern, vibrant colors to encourage a fun brand image. Typography was carefully chosen to maintain readabilty and cohesiveness with the modern design. Credits to Iconify plugin for the icons.
TEST
Usability Testing
After creating a prototype in Figma, I conducted usability testing on a set of task flows with various participants to gather the following information:
Understand user’s ease of navigation on the app
Detect potential pain points that users may face while using the app
Evaluate time and effort spent completing core tasks
Based on the test results, I can conclude that while Sprout has intuitive flow and organization, there are iterations that need to be made to ensure that user’s needs are better addressed. This includes:
Iterate the Learn page to be more friendly and avoid monotonous walls of text.
Better label graphs and sections to avoid confusion.
Enhance prominence on elements to reduce visual strain.
FINAL DESIGN
Iterations were completed after testing to improve both minor and major faults in the usability of the product. Upon iterating my design, the I found the following aspects to be enhanced:
Enhanced learning experience through visual aids and organization.
Improved ease of navigation through intuitive labeling.
Increased overall accessibility of design through visual enhancements.
CONCLUSION
Sprout is my second UX project and as it fintech oriented, I gained new insights on the work required for this type of design. The experience of this project taught me a few lessons:
Visualizing qualitative data
As fintech designs require more displays of qualitative data, I learned how to create charts and graphs that illustrate numbers for users who need visualization.
Using designs to educate
Finance can be a tricky subject matter especially for young adults who aren’t as familiar. This was my first time designing a platform that educates it’s users so a considerable amount of research went into creating the texts for that experience.
Mobile responsive
This is my first full responsive project. I started with designing desktop first and worked my way down. Arranging elements from mobile to desktop gave me first hand experience on how the process should go for future projects.
As I would like to polish my designs further, I have considered some next steps that I want to take:
Create a clean component library
I have been learning how to incorporate components in designing, but I feel that I still struggle with the learning curve so my component library isn’t as functional as I would like for it to be. Going forward, I want to showcase that I am capable of doing so.
Realistic prototyping
As this is my second time prototyping, I feel that I do not have a solid grasp on showcasing a realistic demo. I want to create loading screens and utilize components to create a more seamless prototype for my users to test.
Learn page for budgeting
Although I created a educational page for how to invest, I want to help users who don’t have a firm understanding of budgeting as well. This would help address the problem and add a layer of cohesion to the overall goal.