GenFriends: Interactive Success Literacy

GenFriends: Interactive Success Literacy

Modernizing the path to independence for immigrant youth. A mobile-first, gamified experience designed to build confidence in financial, wellness, and professional decision-making.

Role:

Lead UX Designer

Product Design
Intern

Tools:

Figma/ FigJam
ProCreate 
Whiteboard
Microsoft Excel

Team:

MSU Hackathon
1 UI Designer
2 UX Designers

Project Duration :

January 2023
24 Hours

Overview:

Adulting, simplified, in under 24 hours

Adulting, simplified, in under 24 hours

Adulting, simplified, in under 24 hours

At SpartaHack 9, a 24-hour hackathon challenge, our team created GenFriends, a mobile app designed to support second-generation immigrant students navigating the messy, overwhelming realities of adulthood.

While most teams focused on backend challenges, we delivered a fully user-centered experience in just 24 hours, testing with over 10 users, prototyping over 20 Figma screens, and iterating through 3 core design flows. We also received funding from MSU’s Entrepreneurship Institute, recognizing the app’s potential impact.

Our goal wasn’t just to build fast, it was to build for people like us.

PROBLEM:

How can we make navigating adulthood easier, especially for those figuring it out alone?

How can we make navigating adulthood easier, especially for those figuring it out alone?

How can we make navigating adulthood easier, especially for those figuring it out alone?

During early brainstorming, my team and I uncovered a shared pain point: as second-generation immigrants, we often had to navigate major life decisions: finances, healthcare, housing, without the guidance or support systems many of our peers had.


After informally validating this challenge with other hackathon participants, we realized just how widespread it was. That insight became our north star: how might we build a tool that makes β€œadulting” less overwhelming and more accessible for students like us?

SOLUTION:

Meet your GenFriends:

Meet your GenFriends:

Meet your GenFriends:

Confidence-building guides for second-generation students navigating adulthood


To make adulthood less intimidating, we designed a cast of supportive characters, each one focused on a core challenge second-gen students often face. These digital guides offer advice, resources, and encouragement, all grounded in empathy and cultural awareness.


Say hello to your GenFriends:

  • 🐸 Eugene β€“ Our friendly mascot and emotional support frog 🐸

  • πŸ“š Raj β€“ The go-to for career and academic guidance

  • πŸ’° Priya β€“ Helping you build financial literacy and budgeting confidence

  • β€οΈβ€πŸ©Ή Mai β€“ Focused on wellness, mental health, and self-care


Each character represents a pillar of adult decision-making, offering support in a way that feels familiar, safe, and human.

SOLUTION FEATURES:

Decision demos, built for clarity and confidence

Decision demos, built for clarity and confidence

Decision demos, built for clarity and confidence

We designed short, interactive demos to help users navigate common adulthood decisions: from career paths to budgeting to wellness habits.


Each demo included:

  • βœ… Clear pros & cons for each option

  • πŸ“š Simplified guidance explained in everyday language

  • πŸ’¬ Personalized recommendations based on user selections


I led UX and content design, researching topics, synthesizing information, and writing content that was accessible, digestible, and culturally considerate.


These demos weren’t just educational, they were designed to build confidence in users who often lacked access to these conversations growing up.

Learning that feels rewarding, literally

Learning that feels rewarding, literally

Learning that feels rewarding, literally

To make decision-making less intimidating and more engaging, we introduced gamified incentives tied to each demo experience.


  • 🎯 Users earned rewards by completing demos

  • 🎨 Rewards unlocked customization features for their GenFriend guides

  • πŸ’‘ These incentives boosted replayability, leading to increased exposure, retention, and confidence in decision-making


By integrating small wins into the experience, we made complex topics feel approachable, and learning feel like progress, not pressure.

RESEARCH GOALS & QUESTIONS:

How might we design interactive, confidence-building tools that simplify complex life decisions, like careers, budgeting, and wellness, for young adults who may not have had access to these conversations growing up?

How Might We Make Home-Buying Approachable, Engaging, and Confidence-Inspiring for Gen Z, while Reflecting Their Digital Behaviors, Values, and Diverse Identities?

User Interviews

Listening First: How Student Stories Shaped Our Strategy

Listening First: How Student Stories Shaped Our Strategy

Even under a 24-hour sprint, we made user research a top priority. Our team conducted over 10 in-person interviews with students (ages 17–21) at SpartaHack to ground our design in real needs, not assumptions.


We spoke directly with first and second-generation students to better understand what made adulthood decisions, like FAFSA, leasing, and budgeting, so intimidating.

Results:

From FAFSA to First Leases: What 10+ Student Interviews Revealed

From FAFSA to First Leases: What 10+ Student Interviews Revealed

From FAFSA to First Leases: What 10+ Student Interviews Revealed

Key findings:

  • 90% of participants reported feeling overwhelmed by adult decisions in college

  • 81% identified as first- or second-generation immigrants

  • 70% had applied to FAFSA, and of those, 70% did it without any parental or guardian support


Recurring pain points:

  • πŸ—£οΈ Language Barriers: Unfamiliar terms left students and parents confused and discouraged

  • πŸ˜΅β€πŸ’« Process Unfamiliarity: Most had no clear understanding of financial steps or timelines

  • 😨 Emotional Intimidation: Students described feeling lost, anxious, and unsupported, even as they made high-stakes decisions


This research became the foundation for our product strategy, helping us prioritize clarity, reassurance, and step-by-step learning over feature overload.

Going on a user journey

How Does Our User Vicky Navigate GenFriends from Awareness to Evaluation?

How Does Our User Vicky Navigate GenFriends from Awareness to Evaluation?

Meet Vicky, our persona:
A 19-year-old college student navigating FAFSA and financial aid with little family guidance.


What the Journey Map Shows:

  • πŸ’¬ Vicky’s thoughts, emotions, and touchpoints as she uses GenFriends

  • πŸ” Key pain points like confusing terminology and fear of making mistakes

  • 🌟 Where GenFriends provides clarity, support, and reassurance


This journey helped us identify moments that needed extra care, whether through simplified content, affirming copy, or gamified nudges.

From sketches to final designs

Bringing GenFriends to Life

Bringing GenFriends to Life

I wanted to test if Gen-Z might value peer credibility (testimonials) more if shown earlier in the flow. Therefore, I tested two placements: testimonials at the top vs. at the bottom of the page.

Creating a design system

The Secret Behind the Visual Magic

The Secret Behind the Visual Magic

  • 🎨 A complete visual design system with over 30 reusable components and buttons, all built in Figma

  • πŸ“ Custom vector-based illustrations and UI elements for a unified visual experience

  • 🀝 A collaborative design workflow, while our Art Lead focused on character design, I worked alongside my teammate to craft the supporting visuals and interaction elements


Every pixel was intentional. By designing with scalability and consistency in mind, we ensured GenFriends felt polished, branded, and approachable, start to finish.

FINAL DESIGN:

Check Out the Final Product

Check Out the Final Product

Takeaways:

Turning Pressure Into Process

Turning Pressure Into Process

  1. Designing Under Pressure – Working within a 24-hour window taught me how to balance speed with intention. By structuring the hackathon like a mini product sprint, I learned to move quickly without sacrificing user focus or design quality.

  2. Agile Collaboration – I initiated an agile-inspired workflow that broke the project into clear, trackable tasks. This approach allowed each teammate to lean into their strengths, while I led UX and content, others drove visuals, development, and research.

  3. Iterate Fast, Stay Grounded – Through rapid syncs and micro-iterations, we stayed aligned and adaptable, ensuring feedback flowed continuously and decisions were made with confidence despite time constraints.

Next steps:

Carrying the Story Forward

Carrying the Story Forward

  1. Secured Funding for Expansion
    We received support from the Burgess Institute for Entrepreneurship & Innovation at MSU to continue building and refining the GenFriends platform post-hackathon.

  2. Deepening Our Research
    We’re planning to conduct more robust user research using A/B testing, usability testing, and blackhat sessions to identify opportunities for improvement and validate new features.

  3. Evolving the Experience
    Future iterations will include:

    • Customization options for Eugene, our lovable frog mascot 🐸

    • New interactive pathways focused on educationcareer, and well-being

    • Enhanced gamification to increase engagement and learning retention

GenFriends: Interactive Success Literacy

GenFriends: Interactive Success Literacy

Modernizing the path to independence for immigrant youth. A mobile-first, gamified experience designed to build confidence in financial, wellness, and professional decision-making.

Role:

Lead UX Designer

Product Design
Intern

Tools:

Figma/ FigJam
ProCreate 
Whiteboard
Microsoft Excel

Team:

MSU Hackathon
1 UI Designer
2 UX Designers

Project Duration :

January 2023
24 Hours

Overview:

Adulting, simplified, in under 24 hours

Adulting, simplified, in under 24 hours

Adulting, simplified, in under 24 hours

At SpartaHack 9, a 24-hour hackathon challenge, our team created GenFriends, a mobile app designed to support second-generation immigrant students navigating the messy, overwhelming realities of adulthood.

While most teams focused on backend challenges, we delivered a fully user-centered experience in just 24 hours, testing with over 10 users, prototyping over 20 Figma screens, and iterating through 3 core design flows. We also received funding from MSU’s Entrepreneurship Institute, recognizing the app’s potential impact.

Our goal wasn’t just to build fast, it was to build for people like us.

PROBLEM:

How can we make navigating adulthood easier, especially for those figuring it out alone?

How can we make navigating adulthood easier, especially for those figuring it out alone?

How can we make navigating adulthood easier, especially for those figuring it out alone?

During early brainstorming, my team and I uncovered a shared pain point: as second-generation immigrants, we often had to navigate major life decisions: finances, healthcare, housing, without the guidance or support systems many of our peers had.


After informally validating this challenge with other hackathon participants, we realized just how widespread it was. That insight became our north star: how might we build a tool that makes β€œadulting” less overwhelming and more accessible for students like us?

SOLUTION:

Meet your GenFriends:

Meet your GenFriends:

Meet your GenFriends:

Confidence-building guides for second-generation students navigating adulthood


To make adulthood less intimidating, we designed a cast of supportive characters, each one focused on a core challenge second-gen students often face. These digital guides offer advice, resources, and encouragement, all grounded in empathy and cultural awareness.


Say hello to your GenFriends:

  • 🐸 Eugene β€“ Our friendly mascot and emotional support frog 🐸

  • πŸ“š Raj β€“ The go-to for career and academic guidance

  • πŸ’° Priya β€“ Helping you build financial literacy and budgeting confidence

  • β€οΈβ€πŸ©Ή Mai β€“ Focused on wellness, mental health, and self-care


Each character represents a pillar of adult decision-making, offering support in a way that feels familiar, safe, and human.

SOLUTION FEATURES:

Decision demos, built for clarity and confidence

Decision demos, built for clarity and confidence

Decision demos, built for clarity and confidence

We designed short, interactive demos to help users navigate common adulthood decisions: from career paths to budgeting to wellness habits.


Each demo included:

  • βœ… Clear pros & cons for each option

  • πŸ“š Simplified guidance explained in everyday language

  • πŸ’¬ Personalized recommendations based on user selections


I led UX and content design, researching topics, synthesizing information, and writing content that was accessible, digestible, and culturally considerate.


These demos weren’t just educational, they were designed to build confidence in users who often lacked access to these conversations growing up.

Learning that feels rewarding, literally

Learning that feels rewarding, literally

Learning that feels rewarding, literally

To make decision-making less intimidating and more engaging, we introduced gamified incentives tied to each demo experience.


  • 🎯 Users earned rewards by completing demos

  • 🎨 Rewards unlocked customization features for their GenFriend guides

  • πŸ’‘ These incentives boosted replayability, leading to increased exposure, retention, and confidence in decision-making


By integrating small wins into the experience, we made complex topics feel approachable, and learning feel like progress, not pressure.

RESEARCH GOALS & QUESTIONS:

How might we design interactive, confidence-building tools that simplify complex life decisions, like careers, budgeting, and wellness, for young adults who may not have had access to these conversations growing up?

How Might We Make Home-Buying Approachable, Engaging, and Confidence-Inspiring for Gen Z, while Reflecting Their Digital Behaviors, Values, and Diverse Identities?

User Interviews

Listening First: How Student Stories Shaped Our Strategy

Listening First: How Student Stories Shaped Our Strategy

Even under a 24-hour sprint, we made user research a top priority. Our team conducted over 10 in-person interviews with students (ages 17–21) at SpartaHack to ground our design in real needs, not assumptions.


We spoke directly with first and second-generation students to better understand what made adulthood decisions, like FAFSA, leasing, and budgeting, so intimidating.

Results:

From FAFSA to First Leases: What 10+ Student Interviews Revealed

From FAFSA to First Leases: What 10+ Student Interviews Revealed

From FAFSA to First Leases: What 10+ Student Interviews Revealed

Key findings:

  • 90% of participants reported feeling overwhelmed by adult decisions in college

  • 81% identified as first- or second-generation immigrants

  • 70% had applied to FAFSA, and of those, 70% did it without any parental or guardian support


Recurring pain points:

  • πŸ—£οΈ Language Barriers: Unfamiliar terms left students and parents confused and discouraged

  • πŸ˜΅β€πŸ’« Process Unfamiliarity: Most had no clear understanding of financial steps or timelines

  • 😨 Emotional Intimidation: Students described feeling lost, anxious, and unsupported, even as they made high-stakes decisions


This research became the foundation for our product strategy, helping us prioritize clarity, reassurance, and step-by-step learning over feature overload.

Going on a user journey

How Does Our User Vicky Navigate GenFriends from Awareness to Evaluation?

How Does Our User Vicky Navigate GenFriends from Awareness to Evaluation?

Meet Vicky, our persona:
A 19-year-old college student navigating FAFSA and financial aid with little family guidance.


What the Journey Map Shows:

  • πŸ’¬ Vicky’s thoughts, emotions, and touchpoints as she uses GenFriends

  • πŸ” Key pain points like confusing terminology and fear of making mistakes

  • 🌟 Where GenFriends provides clarity, support, and reassurance


This journey helped us identify moments that needed extra care, whether through simplified content, affirming copy, or gamified nudges.

From sketches to final designs

Bringing GenFriends to Life

Bringing GenFriends to Life

I wanted to test if Gen-Z might value peer credibility (testimonials) more if shown earlier in the flow. Therefore, I tested two placements: testimonials at the top vs. at the bottom of the page.

Creating a design system

The Secret Behind the Visual Magic

The Secret Behind the Visual Magic

  • 🎨 A complete visual design system with over 30 reusable components and buttons, all built in Figma

  • πŸ“ Custom vector-based illustrations and UI elements for a unified visual experience

  • 🀝 A collaborative design workflow, while our Art Lead focused on character design, I worked alongside my teammate to craft the supporting visuals and interaction elements


Every pixel was intentional. By designing with scalability and consistency in mind, we ensured GenFriends felt polished, branded, and approachable, start to finish.

FINAL DESIGN:

Check Out the Final Product

Check Out the Final Product

Takeaways:

Turning Pressure Into Process

Turning Pressure Into Process

  1. Designing Under Pressure – Working within a 24-hour window taught me how to balance speed with intention. By structuring the hackathon like a mini product sprint, I learned to move quickly without sacrificing user focus or design quality.

  2. Agile Collaboration – I initiated an agile-inspired workflow that broke the project into clear, trackable tasks. This approach allowed each teammate to lean into their strengths, while I led UX and content, others drove visuals, development, and research.

  3. Iterate Fast, Stay Grounded – Through rapid syncs and micro-iterations, we stayed aligned and adaptable, ensuring feedback flowed continuously and decisions were made with confidence despite time constraints.

Next steps:

Carrying the Story Forward

Carrying the Story Forward

  1. Secured Funding for Expansion
    We received support from the Burgess Institute for Entrepreneurship & Innovation at MSU to continue building and refining the GenFriends platform post-hackathon.

  2. Deepening Our Research
    We’re planning to conduct more robust user research using A/B testing, usability testing, and blackhat sessions to identify opportunities for improvement and validate new features.

  3. Evolving the Experience
    Future iterations will include:

    • Customization options for Eugene, our lovable frog mascot 🐸

    • New interactive pathways focused on educationcareer, and well-being

    • Enhanced gamification to increase engagement and learning retention

GenFriends: Interactive Success Literacy

GenFriends: Interactive Success Literacy

Modernizing the path to independence for immigrant youth. A mobile-first, gamified experience designed to build confidence in financial, wellness, and professional decision-making.

Role:

Lead UX Designer

Product Design
Intern

Tools:

Figma/ FigJam
ProCreate 
Whiteboard
Microsoft Excel

Team:

MSU Hackathon
1 UI Designer
2 UX Designers

Project Duration :

January 2023
24 Hours

Overview:

Adulting, simplified, in under 24 hours

Adulting, simplified, in under 24 hours

Adulting, simplified, in under 24 hours

At SpartaHack 9, a 24-hour hackathon challenge, our team created GenFriends, a mobile app designed to support second-generation immigrant students navigating the messy, overwhelming realities of adulthood.

While most teams focused on backend challenges, we delivered a fully user-centered experience in just 24 hours, testing with over 10 users, prototyping over 20 Figma screens, and iterating through 3 core design flows. We also received funding from MSU’s Entrepreneurship Institute, recognizing the app’s potential impact.

Our goal wasn’t just to build fast, it was to build for people like us.

PROBLEM:

How can we make navigating adulthood easier, especially for those figuring it out alone?

How can we make navigating adulthood easier, especially for those figuring it out alone?

How can we make navigating adulthood easier, especially for those figuring it out alone?

During early brainstorming, my team and I uncovered a shared pain point: as second-generation immigrants, we often had to navigate major life decisions: finances, healthcare, housing, without the guidance or support systems many of our peers had.


After informally validating this challenge with other hackathon participants, we realized just how widespread it was. That insight became our north star: how might we build a tool that makes β€œadulting” less overwhelming and more accessible for students like us?

SOLUTION:

Meet your GenFriends:

Meet your GenFriends:

Meet your GenFriends:

Confidence-building guides for second-generation students navigating adulthood


To make adulthood less intimidating, we designed a cast of supportive characters, each one focused on a core challenge second-gen students often face. These digital guides offer advice, resources, and encouragement, all grounded in empathy and cultural awareness.


Say hello to your GenFriends:

  • 🐸 Eugene β€“ Our friendly mascot and emotional support frog 🐸

  • πŸ“š Raj β€“ The go-to for career and academic guidance

  • πŸ’° Priya β€“ Helping you build financial literacy and budgeting confidence

  • β€οΈβ€πŸ©Ή Mai β€“ Focused on wellness, mental health, and self-care


Each character represents a pillar of adult decision-making, offering support in a way that feels familiar, safe, and human.

SOLUTION FEATURES:

Decision demos, built for clarity and confidence

Decision demos, built for clarity and confidence

Decision demos, built for clarity and confidence

We designed short, interactive demos to help users navigate common adulthood decisions: from career paths to budgeting to wellness habits.


Each demo included:

  • βœ… Clear pros & cons for each option

  • πŸ“š Simplified guidance explained in everyday language

  • πŸ’¬ Personalized recommendations based on user selections


I led UX and content design, researching topics, synthesizing information, and writing content that was accessible, digestible, and culturally considerate.


These demos weren’t just educational, they were designed to build confidence in users who often lacked access to these conversations growing up.

Learning that feels rewarding, literally

Learning that feels rewarding, literally

Learning that feels rewarding, literally

To make decision-making less intimidating and more engaging, we introduced gamified incentives tied to each demo experience.


  • 🎯 Users earned rewards by completing demos

  • 🎨 Rewards unlocked customization features for their GenFriend guides

  • πŸ’‘ These incentives boosted replayability, leading to increased exposure, retention, and confidence in decision-making


By integrating small wins into the experience, we made complex topics feel approachable, and learning feel like progress, not pressure.

RESEARCH GOALS & QUESTIONS:

How might we design interactive, confidence-building tools that simplify complex life decisions, like careers, budgeting, and wellness, for young adults who may not have had access to these conversations growing up?

How Might We Make Home-Buying Approachable, Engaging, and Confidence-Inspiring for Gen Z, while Reflecting Their Digital Behaviors, Values, and Diverse Identities?

User Interviews

Listening First: How Student Stories Shaped Our Strategy

Listening First: How Student Stories Shaped Our Strategy

Even under a 24-hour sprint, we made user research a top priority. Our team conducted over 10 in-person interviews with students (ages 17–21) at SpartaHack to ground our design in real needs, not assumptions.


We spoke directly with first and second-generation students to better understand what made adulthood decisions, like FAFSA, leasing, and budgeting, so intimidating.

Results:

From FAFSA to First Leases: What 10+ Student Interviews Revealed

From FAFSA to First Leases: What 10+ Student Interviews Revealed

From FAFSA to First Leases: What 10+ Student Interviews Revealed

Key findings:

  • 90% of participants reported feeling overwhelmed by adult decisions in college

  • 81% identified as first- or second-generation immigrants

  • 70% had applied to FAFSA, and of those, 70% did it without any parental or guardian support


Recurring pain points:

  • πŸ—£οΈ Language Barriers: Unfamiliar terms left students and parents confused and discouraged

  • πŸ˜΅β€πŸ’« Process Unfamiliarity: Most had no clear understanding of financial steps or timelines

  • 😨 Emotional Intimidation: Students described feeling lost, anxious, and unsupported, even as they made high-stakes decisions


This research became the foundation for our product strategy, helping us prioritize clarity, reassurance, and step-by-step learning over feature overload.

Going on a user journey

How Does Our User Vicky Navigate GenFriends from Awareness to Evaluation?

How Does Our User Vicky Navigate GenFriends from Awareness to Evaluation?

Meet Vicky, our persona:
A 19-year-old college student navigating FAFSA and financial aid with little family guidance.


What the Journey Map Shows:

  • πŸ’¬ Vicky’s thoughts, emotions, and touchpoints as she uses GenFriends

  • πŸ” Key pain points like confusing terminology and fear of making mistakes

  • 🌟 Where GenFriends provides clarity, support, and reassurance


This journey helped us identify moments that needed extra care, whether through simplified content, affirming copy, or gamified nudges.

From sketches to final designs

Bringing GenFriends to Life

Bringing GenFriends to Life

I wanted to test if Gen-Z might value peer credibility (testimonials) more if shown earlier in the flow. Therefore, I tested two placements: testimonials at the top vs. at the bottom of the page.

Creating a design system

The Secret Behind the Visual Magic

The Secret Behind the Visual Magic

  • 🎨 A complete visual design system with over 30 reusable components and buttons, all built in Figma

  • πŸ“ Custom vector-based illustrations and UI elements for a unified visual experience

  • 🀝 A collaborative design workflow, while our Art Lead focused on character design, I worked alongside my teammate to craft the supporting visuals and interaction elements


Every pixel was intentional. By designing with scalability and consistency in mind, we ensured GenFriends felt polished, branded, and approachable, start to finish.

FINAL DESIGN:

Check Out the Final Product

Check Out the Final Product

Takeaways:

Turning Pressure Into Process

Turning Pressure Into Process

  1. Designing Under Pressure – Working within a 24-hour window taught me how to balance speed with intention. By structuring the hackathon like a mini product sprint, I learned to move quickly without sacrificing user focus or design quality.

  2. Agile Collaboration – I initiated an agile-inspired workflow that broke the project into clear, trackable tasks. This approach allowed each teammate to lean into their strengths, while I led UX and content, others drove visuals, development, and research.

  3. Iterate Fast, Stay Grounded – Through rapid syncs and micro-iterations, we stayed aligned and adaptable, ensuring feedback flowed continuously and decisions were made with confidence despite time constraints.

Next steps:

Carrying the Story Forward

Carrying the Story Forward

  1. Secured Funding for Expansion
    We received support from the Burgess Institute for Entrepreneurship & Innovation at MSU to continue building and refining the GenFriends platform post-hackathon.

  2. Deepening Our Research
    We’re planning to conduct more robust user research using A/B testing, usability testing, and blackhat sessions to identify opportunities for improvement and validate new features.

  3. Evolving the Experience
    Future iterations will include:

    • Customization options for Eugene, our lovable frog mascot 🐸

    • New interactive pathways focused on educationcareer, and well-being

    • Enhanced gamification to increase engagement and learning retention