_FinTech App UX/UI
What if teens could learn financial responsibility while ordering their daily lunch?
Paymon is a software and hardware (POS) company. Their app connects school cafeterias to students and their parents. Paymon empowers teens to expand their financial knowledge.
This new feature is accesible through a centralized dashboard. Pastels and friendly type support students emotionally as they calculate their budget.
Budget Calculator
This new feature is accesible through a centralized dashboard. Pastels and friendly type support students emotionally as they calculate their budget.
Emotional Design
Soothing meditative colors and playful artwork for backgrounds supports students as they move through their tasks in the app.
Spending Habits
Students can view their trends in different graph formats. This flexibility in how students are able to view their spending trends supports the deeper understanding of their habits.
This section of the app is also where students can go to connect with their parents and review their progress.
The trends section also features a spending snapshot button. offering financial education tips and budgeting support. Keeping information centralized, supportive, and organized was important for students here. This educational feature also helps Paymon to stand out in the market.
Over Spending Alerts
Over spending alerts let students know when they are over their daily budget. Emotional and reflective design comes heavily in to play here. Alerts are kindly worded and offer students support on how they can adjust their actions to meet their goals. They are celebrated with confetti when they sucessfully stay on track.
Overview:
Discovery
+ Heuristics
+ Feature Inventory
+ User Interviews
Define+ Affinity Mapping
+ Emotional/Reflective Concepting
Problem Statement
+ Pivoting
Design + User Journey Map
+ Emotional Design
+ Usability Testing
Prototype
Reflections
Discovery
+ Heuristics
+ Feature Inventory
+ User Interviews
Define
+ Affinity Mapping
+ Persona Building
+ Emotional/Reflective ConceptingProblem Statement
+ Pivoting
Design
+ User Journey Map
+ User Flows
+ Wireframes
+ Emotional Design + Usability Testing
Prototype
Reflections
︎ Case Study
Paymon is a quickly growing software and hardware (POS) company. Their mobile app connects school cafeterias to students and their parents, with a digital wallet and menu.
Schools are able to input their cafeteria’s lunch offerings. Parents can monitor their student’s cafeteria spending, transfer money into their accounts, and pre-order their lunches. Students use the mobile app to access their digital wallet, view their balance, request money from their parents, and order meals. Approximately 5,000 students and parents use the app’s digital wallet
every month.
The Opportunity:
As a FinTech company, Paymon aims to empower teens to expand their financial knowledge and teach them financial responsibility. This objective required design that felt seamless with, and supportive of, students’ routine task of ordering meals through Paymon’s app. Learning about student’s financial literacy and meeting them where they were, also felt paramount. Emotional and reflective design implementations would be key in adequately meeting this opportunity.
My Role:
My role with Paymon intersected with various aspects of my design identity. My technical entrepreneurship background and my creative passion for writing expansive narratives, around customarily challenging subjects, resonated with this opportunity. As an American, leading UX and UI design for users in Ecuador, I needed to be mindful of potential biases I had in the process of implementing solutions. Because Paymon is an early stage startup, I also needed to keep in mind their potential technical restraints in how extensive and complex design recommendations could be.
Solution:
The final solution offers students and parents an emotionally supportive design experience. New features and flows teach budgeting and goal-setting, through routine-based learning. Design elements work seamlessly with student’s lunch routines. Color, copy, and infographics support them in cultivating a reflective and confident attitude around their financial choices.
Tools:
+ Heuristics+ Feature Inventory
+ User Interviews
︎ Discovery
I kicked off discovery with a heuristics evaluation of Paymon’s existing app. Then I took a feature inventory of competitors and comparators on the market. This endeavor had major emotional and reflective design needs, so I delved into the minds of students with interviews. This approach supported design that was emotionally considerate and competetive on the market.
︎ Heuristics
The Paymon app had some helpful pre-existing features. However, during a heuristic evaluation of the initial design, I found some things that we’d need to consider addressing later on:
Visibility of Systems Status:
The graphs used on the app, used to relay information about account information, were ineffective on the front of learnability. Graphs lacked clear affordances and signifiers for their functions.
Consistency and Standards:
Colors, text, buttons, illustrations, and general design layout lacked consistency. This created an emotional and visual experience that felt disorienting.
Aesthetic and Minimalist Design:
The pages on the app were often overloaded with clashing text and colors. This had the potential to feel jarring and overwhelming to users.
Visibility of Systems Status:
The graphs used on the app, used to relay information about account information, were ineffective on the front of learnability. Graphs lacked clear affordances and signifiers for their functions.
Consistency and Standards:
Colors, text, buttons, illustrations, and general design layout lacked consistency. This created an emotional and visual experience that felt disorienting.
Aesthetic and Minimalist Design:
The pages on the app were often overloaded with clashing text and colors. This had the potential to feel jarring and overwhelming to users.
︎ Feature Inventory
Competitors within the school cafeteria industry, like My School Bucks and EZ School Apps, did not offer tools of empowerment or education to their users. Their main focus was on transactions. This set Paymon apart in the school cafeteria sector.
Competitors squarely in the financial technology sector–GoHenry, Nerdwallet, FamZoo and Greenlight–used a centralized dashboard to highlight their app’s key functions. This area of the market had more to offer users than Paymon did, and offered insight into how Paymon could be more competetive.
Competitors squarely in the financial technology sector–GoHenry, Nerdwallet, FamZoo and Greenlight–used a centralized dashboard to highlight their app’s key functions. This area of the market had more to offer users than Paymon did, and offered insight into how Paymon could be more competetive.
︎ Interview Insights
15 user interviews focused on student’s thoughts and feelings around money, saving, and setting goals.
Unfortunately, I was not able to get in touch with any of Paymon’s actual users. So, I explored national connections and interviewed a diverse array of students from across the US. To remain as unbiased as possible in synthesizing data, I cross-checked subsequent personas with the clients’ experiences with Paymon’s Ecuadorian student users.
When it came to money and managing finances, student said things like:
Interview Quotes:
+ “I don’t like thinking about money, so I don’t do it.”
+ “I feel too overwhelmed to work towards my goals.”
+ “I struggle to control habits that hinder my ability to reach my goals.”
+ “I have a lot of challenges standing in my way when I think about money.”
+ “I want to learn more about finances to improve my financial situation.”
Unfortunately, I was not able to get in touch with any of Paymon’s actual users. So, I explored national connections and interviewed a diverse array of students from across the US. To remain as unbiased as possible in synthesizing data, I cross-checked subsequent personas with the clients’ experiences with Paymon’s Ecuadorian student users.
When it came to money and managing finances, student said things like:
Interview Quotes:
+ “I don’t like thinking about money, so I don’t do it.”
+ “I feel too overwhelmed to work towards my goals.”
+ “I struggle to control habits that hinder my ability to reach my goals.”
+ “I have a lot of challenges standing in my way when I think about money.”
+ “I want to learn more about finances to improve my financial situation.”
Tools:
+ Affinity Mapping
+ Persona Building
+ Emotional/Reflective Concepting︎Define
At a high level, the data pointed to students feeling overwhelmed and challenged by finances. They needed significant support with building habits and financial literacy. In defining and further synthesizing data, I organized research into the most potent trends and themes revealed.
︎ Interview Insig
There was an abundance of rich data to sort through from interviews. Students talked about how they felt excited about saving for things like snowboards and makeup. They also talked about how they avoided thinking about money because of the stress it caused. All of the information captured during interviews had a hand in carving design developments, however, the top themes were as follows:
Desire to Learn:
An inclination towards learning that feels fun, and a sincere desire to learn.
Lack of Self-control:
Needing to change habits that hindered saving and working towards financial goals.
Stress:
Experiencing some kind of stress or overwhelm, around saving money and financial literacy.
Desire to Learn:
An inclination towards learning that feels fun, and a sincere desire to learn.
Lack of Self-control:
Needing to change habits that hindered saving and working towards financial goals.
Stress:
Experiencing some kind of stress or overwhelm, around saving money and financial literacy.
From these focused values and needs, in combination with the breadth of reflective and emotional data I gathered from interviews, I went on to develop personas.
![Affinity Map.jpg]()
︎ Personas
In creating these personas, I identified some similarities and differences between them. Identifying these similarities and differences positioned me to ideate in a way that benefited both of these users. I chose to focus on Maria because, per viscerally positive client feedback, she represented more of our user base than our secondary persona.
![Primary Persona.docx]()
![Secondary Persona.docx]()
Similarities:
+ Both students wanted a way to track their savings, within the context of their financial goals.
+ They had no formal financial education.
+ Both students consider saving money important for their futures.
Differences:
+ Motivations: Maria is motivatied by freedom and experiences. Max is motivated by his desire to feel secure and provide.
+ Priorities: Maria’s priority is saving money for a car. Max’s is saving for his college applications.
+ Demeanors: Maria is free-flowing and social, she needs support with learning how to shift unhealthy financial impulses. Max is structured and work-oriented, he needs support with organization.
Similarities:
+ Both students wanted a way to track their savings, within the context of their financial goals.
+ They had no formal financial education.
+ Both students consider saving money important for their futures.
Differences:
+ Motivations: Maria is motivatied by freedom and experiences. Max is motivated by his desire to feel secure and provide.
+ Priorities: Maria’s priority is saving money for a car. Max’s is saving for his college applications.
+ Demeanors: Maria is free-flowing and social, she needs support with learning how to shift unhealthy financial impulses. Max is structured and work-oriented, he needs support with organization.
︎ Emotional/ Reflective Concepting
To keep a throughline connecting visual design developemts with emotional themes. I began concepting visual direction prospetcs, based on managing stress, building capacity for self control, and learning.
My instincts prompted me to look to video game experiences for inspiration. Video games were mentioned several times as a hobby during user interviews.
Wander:
Wander is a meditateive, online (game) destination for early adolecents. The design approach here, was oriented towards managing stress and building capacity for self control. I took notes on their use of creamy color, softly tactile texture, and friendly typography.
“The site’s goal is to equip youth in early adolescence with stress reduction tools. It offers a self-guided, engaging and motivating game that youth can use by themselves — or with support from trusted adults — to help them build an internal toolbox of self-regulation, mindfulness, and coping skills.”
+ wander.mass.gov
![Wander Color Ref.jpg]()
Child of Light:
A role playing, goal-oriented, video game, with atmospherically soothing, spacial aethetics.
I initially examined this game’s approach to design because of it’s resonance with the etheriality (soft aesthetics) of Wander. However, Child of Light’s use of playful iconography is ultimately what stood out; as a way to communicate information to teens, in a delightful and efficient way. This element could support themes of managing stress and facilitating learning.
![Child of Light Icon Ref.jpg]()
Hopper:
Hopper is a travel booking app. This platform came to mind because I was familiar with their palette, which felt like a poppier expression of Wander’s pallete. I booked marked their use of color for later; for the event that slightly poppier colors felt more in alignment with Paymon’s existing brand.
![Hopper Color Ref.jpg]()
Pokemon:
I, similarly, bookmarked a Pokemon game’s approach to infographics–as a potentially helpful reference, in crafting an experience intended to facilitate stressless learning.
![Dashboard Graphics Ref.jpg]()
My instincts prompted me to look to video game experiences for inspiration. Video games were mentioned several times as a hobby during user interviews.
Wander:
Wander is a meditateive, online (game) destination for early adolecents. The design approach here, was oriented towards managing stress and building capacity for self control. I took notes on their use of creamy color, softly tactile texture, and friendly typography.
“The site’s goal is to equip youth in early adolescence with stress reduction tools. It offers a self-guided, engaging and motivating game that youth can use by themselves — or with support from trusted adults — to help them build an internal toolbox of self-regulation, mindfulness, and coping skills.”
+ wander.mass.gov
Child of Light:
A role playing, goal-oriented, video game, with atmospherically soothing, spacial aethetics.
I initially examined this game’s approach to design because of it’s resonance with the etheriality (soft aesthetics) of Wander. However, Child of Light’s use of playful iconography is ultimately what stood out; as a way to communicate information to teens, in a delightful and efficient way. This element could support themes of managing stress and facilitating learning.
Hopper:
Hopper is a travel booking app. This platform came to mind because I was familiar with their palette, which felt like a poppier expression of Wander’s pallete. I booked marked their use of color for later; for the event that slightly poppier colors felt more in alignment with Paymon’s existing brand.
Pokemon:
I, similarly, bookmarked a Pokemon game’s approach to infographics–as a potentially helpful reference, in crafting an experience intended to facilitate stressless learning.
Problem Statement:
+ Pivoting
︎Problem Statement
The following problem statement centers Maria’s orientation towards wanting to reach pivotal financial goals, and her pain points around budgeting and financial responsibility.
In developing the problem statement, I realized that parents played a significant role in the primary user’s experience. Maria’s parents were the ones with approval power in her journey of saving up for a car. So, in a turn of events, this new insight sent me back into research mode to learn about our users' parents. 
︎ Pivoting
In pivoting to include parents of teens as key users, I interviewed parents about their perspectives on their teen’s financial responsibilities. This line of discussing revealed instrumental information for the design process.
Parent Interview Curiosities:
+ How parents keep track of their teen’s budgeting.
+ What information parents need to feel confident in their teen’s ability to healthily manage finances.
+ What metrics parents need (and want) to see, regarding their teen’s financial growth.
+ How much parents want to be involved in their teen’s financial education.
+ What do parents truly need their teens to understand about managing money.
From the the data gathered in these research interviews, I developed a persona to represent these parents’ needs, goals, pains, and desires
Tools:
+ User Journey Map
+ User Flows
+ Wireframes
+ Emotional Design + Usability Testing
︎ Design
I felt excited by the terrain that set the sene for the design phase. Concretely mapping out user’s emotional and tactical journeys and translating findings into intentional UI choices–about color, copy, and flow–were cental to this next phase.
︎ User Journey Map
It was time to step into Maria’s shoes, for a retrospective user journey map based on her new problem statement. This allowed for observing and empathizing with the emotional peaks and valleys in her current experience. This, in turn, revealed key design opportunities for the prospective developments.
Design Opportunities: + Emotional support and encouragement, especially where the graph dips, for resiliency and motivation in learningchallenging new skills.
+ Feeling like her goals are attainable.
+ A way to connect to her parents, around her progress and goals, on the platform.
+ Notifications for her current balance, and alerts for she is potentially overspending.
+ Flexibility in how she is able to view information.
+ A centralized location for financial education tips and budgeting support.
︎ User Flows
Based on findings from mapping out Maria’s emotional journey through the Paymon app, I designed two user flows to examine how she would need to use the app to achieve her financial goals.
User Flow 1:
Maria moves through actions and choices laddering up to her goal of proving her financial responsibility to her parents. They have given her $75, to budget for one month of meals. She uses PayMon to show her parents that she can effectively budget this monthly lunch allowance.
This flow design allows Maria to easily set a daily budget, based on her monthly allowance. It also affords her a reminder of her budget at checkout, so that she is preemptively aware if she is overspending. This new awareness is empowering for Maria.
User Flow 1:
Maria moves through actions and choices laddering up to her goal of proving her financial responsibility to her parents. They have given her $75, to budget for one month of meals. She uses PayMon to show her parents that she can effectively budget this monthly lunch allowance.
This flow design allows Maria to easily set a daily budget, based on her monthly allowance. It also affords her a reminder of her budget at checkout, so that she is preemptively aware if she is overspending. This new awareness is empowering for Maria.
Based on findings from mapping out Maria’s emotional journey through the Paymon app, I designed two user flows to examine how she would need to use the app to achieve her financial goals.
![User Flow 1.jpg]()
User Flow 2:
The second flow tackles the next steps in Maria’s journey. She moves through the actions for using PayMon ‘s data, to prove to her parents that she can effectively budget her allowance.
︎ Wireframes
Functional, low fidelity wireframes of design solutions were instrumental–in translating user flows into an app experience for Paymon. The new, key offerings manifested as a daily budgeting tool and a spending trends and tracking tool.
![]()
![]()
![]()
![]()
![]()
![]()
︎ Emotional Design
After wireframing out the fuctionality of the design, I decided on colors and typography, based on my initial emotional design research.
I landed on “softness” as a key element for the base color palette (referencing Wander’s meditative approach). This element manifested as pastel gradient backgrounds throughout the app flows. Paymon’s main brand color is a poppy marine blue, so, I opted to draw accompanying color inspiration from Hopper’s brighter expressions–vs Wander’s slighly eathier tones.
The resulting, overall, palette combines bright, soft, meditative pastels, with Paymon’s anchoring blue, and some harmonious mid-tones.
![Color Palette.txt]()
Typography:
Main header typography boasts gentle, friendly curves, similar to Wander’s approach. Accompanying typography is simplistic and complementary to the main header.
![Typography.txt]()
I landed on “softness” as a key element for the base color palette (referencing Wander’s meditative approach). This element manifested as pastel gradient backgrounds throughout the app flows. Paymon’s main brand color is a poppy marine blue, so, I opted to draw accompanying color inspiration from Hopper’s brighter expressions–vs Wander’s slighly eathier tones.
The resulting, overall, palette combines bright, soft, meditative pastels, with Paymon’s anchoring blue, and some harmonious mid-tones.
Typography:
Main header typography boasts gentle, friendly curves, similar to Wander’s approach. Accompanying typography is simplistic and complementary to the main header.
︎ Usability Test
Testing out the design offerings revealed the adjustments needed prior to final delivery. During moderated usability tests, user’s challenges revealed the need for the following.
Increasing Visibility:
Dashboard elements needed higher constrast and larger typography.
Clarifying Signifiers:
Signifiers at the checkout needed to clearly distinguised from the ‘total’ from the ‘overall budget’.
Increasing Readability:
Higher contrast was needed between colors used in graphs.
Increasing Visibility:
Dashboard elements needed higher constrast and larger typography.
Clarifying Signifiers:
Signifiers at the checkout needed to clearly distinguised from the ‘total’ from the ‘overall budget’.
Increasing Readability:
Higher contrast was needed between colors used in graphs.
︎ Prototype
Paymon’s new features resonanted with end users and clients.
Student Experience:With emotional and reflective design, students were able to stresslessly navigate budgeting, and build resilience when met with challenges. They were also able to seamlessly review their financial progress with their parents within the contexts of their overarching goals.
Parent Experience:
had the information they needed to feel confident about their teen’s burgeoning financial independence, learning, and responsiblity.
Client Response:
Paymon felt confident that design solutions were technically attainable and adequetely integrated their ambitions.
Budget Calculator
This feature is accesible through a centralized dashboard on the homepage. Pastels and friendly type support students emotionally as they calculate their budget. This feature supports both Maria and Max–with an organized, efficient, calming flow.
Emotional Design
Soothing meditative colors and playful artwork for backgrounds supports students as they move through their tasks in the app.
Spending Habits
Students can view their trends by week, month, or semester. They also have the option to view their trends in different graph formats. This flexibility in how students are able to view their spending trends supports the deeper understanding of their habits.
This section of the app is also where students can go to connect with their parents and review their progress and goals.
The trends section also features a spending snapshot button. This feature offers financial education tips and budgeting support, right alongside the trends reports. Keeping information centralized, supportive, and organized was important for students here. This educational feature also helps Paymon to stand out in
the market.
Over Spending Alerts
Over spending alerts let students know when they are over their daily budget. Emotional and reflective design comes heavily in to play here. Alerts are kindly worded and offer students support on how they can adjust their actions to meet their goals. They are celebrated with confetti when they sucessfully stay on track.
︎Reflections
This design opportunity poured beautifully into an intersection of emotional care, cross-cultural reverence, and innovation birthed by constraint.
Emotionally Reflective Design:I was transformed in leaning into the emotional aspect of this design opportunity; translating gritty and potentially devastating emotional challenges into nourishing and restorative colors, friendly typography, and features that rooted for their users (and held their hands as they grew). This opportunity was a delightful and existential reminder of just how deep design can go–how infinitely humane and caring design can be. It felt amazing,melting into this sea of
open-hearted empathy on this assignment. It stoked the fire in me around wanting to continue to apply this energy to projects truly, positively, expansively in service of humanity.
Working Cross-culturally:
In a similar vein, it was an honor to work cross-culturally; to be guided towards humility and connection with the increased need for bias-checking in the design process. I consider it an enlivening privilege to be humbled and to be invited into spaces where mistakes are nearly unavoidable. I felt daunted by the prospect of entirely misunderstanding Paymon’s users. And I am deeply grateful to have had such dear, warm, open clients, who answered many cultural questions about their base.
Innovation Birthed by Constraint:
On the entrepreneurial front, being start-up-scrappy and resourseful seems to always yeild some kind of innovative end-result. The pastel backgrounds for the design felt like they sprang from this constraint (e.g. how could I create a stress relieving experience, without an expensive illustrator to create nature imagery?). It was fun to fight for excellence and effectiveness for an early stage company aiming to financially empower our youth.