UI/UX Case Study:

MoolaLearn

A blueprint for engaging personal finance education targeted towards teenagers

Problem

Teens lack engagement with existing financial education platforms due to their corporate appearance, complexity, and lack of relevance. Financial concepts can be abstract and overwhelming for teens without proper guidance. There's a notable gap in financial literacy among young adults, leading to potential financial pitfalls later in life.

Scope

Develop a revolutionary financial education platform, MoolaLearn, to address the gap in financial literacy among teens aged 13-17 and their parents. Make learning about money engaging and enjoyable, empowering teens with essential financial knowledge before they face financial challenges in adulthood.

Goals

Make Financial Education Fun

Deliver bite-sized learning modules and gamified lessons, ensuring financial education is not only accessible but also enjoyable for teens.

Appeal to Both Teens and Parents

Design the platform and its content to appeal to both teens and parents, ensuring relevance and engagement from both user groups.

Measure Success and Impact

Utilize quizzes and user feedback to measure the success and impact of MoolaLearn, allowing for continuous improvement and refinement.

Drive Awareness and Interest

Execute pre-launch marketing efforts, including Google Ads and other channels, to generate awareness and interest in MoolaLearn.

My Role

As the founder of MoolaLearn, my role encompasses every aspect of the project, from conception to execution. Responsibilities included naming the platform, conducting market research and competitive analysis, designing the branding and UI/UX, developing the platform, and implementing marketing strategies.

Deliverables:

  • Copywriting
  • Marketing
  • SEO Strategy
  • Competitive Analysis
  • Logo Design
  • Branding
  • Web Design
  • Web Development
  • UI/UX Design
  • Product Design

Tools Used:

  • Webflow
  • SEMRush
  • Google Analytics
  • Figma
  • Illustrator
  • Photoshop
  • Lottie
  • Hotjar
  • Mailchimp
  • Zapier

User Personas

To better understand the target audience, I developed three user personas representing different user segments:

Tech-savvy Tyler

Age: 15

Background:

Tyler is a sophomore in high school who has a keen interest in technology and spends much of his free time exploring video games and tinkering with gadgets. He's curious about how things work and enjoys solving problems.

Financial Knowledge:

Tyler has minimal financial knowledge and relies on his allowance for spending on gaming and snacks. He's interested in learning more about managing money and has expressed a desire to save for a new gaming console.

Goals:

Tyler's goals include understanding the basics of budgeting, saving for his desired gaming console, and exploring the possibility of starting to invest his money.

Challenges:

Despite his interest in learning about finances, Tyler finds traditional finance materials boring and struggles to connect with the content. He needs interactive and gamified learning experiences to stay engaged.

Concerned Mrs. Collins

Age: 42

Background:

Mrs. Collins is a mother of three children and works as an accountant. She takes an active interest in her children's education and wants to ensure they have the necessary skills to succeed in life.

Financial Knowledge:

Mrs. Collins has advanced financial knowledge due to her professional background and manages her family's finances effectively. She understands the importance of teaching her children about money management and avoiding debt.

Goals:

Mrs. Collins's primary goal is to equip her children with the knowledge and skills to make informed financial decisions. She wants them to understand the value of money, budgeting, saving, and investing for the future.

Challenges:

Mrs. Collins struggles to convey financial lessons in an engaging and accessible way to her children. She wants educational resources that are interactive, age-appropriate, and aligned with their interests.

College-bound Carla

Age: 17

Background:

Carla is a senior in high school with aspirations of attending college. She works part-time at a local cafe to save money for her education and is actively involved in extracurricular activities.

Financial Knowledge:

Carla has a moderate understanding of financial concepts and is familiar with the basics of saving money. However, she lacks knowledge about student loans, investments, and other aspects of personal finance.

Goals:

Carla's primary goal is to save enough money to afford college tuition and expenses. She also wants to learn about managing student loans, making informed financial decisions, and preparing for financial independence.

Challenges:

Carla feels overwhelmed by the prospect of managing her finances independently and is unsure where to start. She needs guidance on budgeting, understanding student loans, and planning for her future.

Competitive Audit

To ensure MoolaLearn stands out in the market, a comprehensive competitive audit was conducted to analyze existing financial education platforms targeting teens. The audit focused on identifying key features, design elements, and engagement strategies employed by competitors to inform MoolaLearn's development and differentiate it effectively.

Example of a competitor's financial education platform
Competitor UI/UX Example

Insights Gained

Each platform offers unique approaches to financial education, incorporating gamification, interactive tools, and real-world scenarios to engage users. While some platforms focus on traditional curriculum-based learning, others emphasize experiential learning through simulations and games. Design elements vary from professional and corporate to colorful and playful, catering to different audience preferences.

Design System

I established a cohesive design system focused on engagement and accessibility. Vibrant colors, friendly typography, and playful visual elements were chosen, inspired by platforms like Duolingo and Team Treehouse. The goal was to create an inviting and intuitive user experience that resonated with teenagers while maintaining professionalism to appeal to parents.

MoolaLearn LogoMoolaLearn Logo

Logo Design Process

Inspiration

The MoolaLearn logo was inspired by the brand's playful name, which cleverly incorporates a cow pun related to money. The goal for the logo was to reflect the youthful spirit and energy of the target audience.

Concept Development

After gathering inspiration for style and colors, various iterations of cow faces and poses were experimented with to find the perfect representation for the MoolaLearn brand.

Typography

Combining two fonts—Museo Sans Rounded and a cursive font—allowed for a unique and cohesive logo design. Adjustments were made to ensure harmonious integration of the two fonts.

Landing Page Design Process

Objective

The landing page aimed to boost MoolaLearn's brand awareness, drive email list sign-ups, and offer industry credibility through blog content.

Visual Design

Incorporating vibrant colors and engaging animations, enhanced visual appeal and drew attention to key elements on the page.

Call to Action

The main CTA prompted visitors to sign up for launch notifications, offering a first-month discount, strategically placed for impact.

User Experience

A sticky navigation bar helps users navigate seamlessly through the page, with clear indicators for each section and accessibility in mind.

Performance Tracking

Implementation of Google Analytics and Hotjar allowed for comprehensive tracking of user behavior and performance metrics, facilitating data-driven decisions to optimize the landing page further.

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

View Live Landing Page

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Inspiration Example

Gathering Inspiration

Gathering inspiration for the UI/UX design of the MoolaLearn platform was a pivotal step in crafting an engaging and user-friendly experience.

I drew inspiration from top educational platforms and modern design trends to craft a visually appealing and intuitive interface for teens aged 13-17.

By exploring these various platforms, I crafted a design centered on simplicity, interactivity, and accessibility, making financial education enjoyable and informative for young learners.

User Flows

Optimal usability and accessibility were ensured through detailed  user flows. Navigation, content structure, and interaction design were carefully considered to provide a seamless learning journey for users. Feedback from user personas and competitive analysis was incorporated to refine the wireframes.

(Scroll Right to see user flows)
Example of a competitor's financial education platform
Example of a competitor's financial education platform
Example of a competitor's financial education platform

UI Exploration

Various UI designs were explored, emphasizing simplicity, clarity, and engagement. Design concepts were iterated upon to incorporate gamified elements, interactive quizzes, and progress tracking features. Insights from competitive analysis and user personas guided the creation of a visually appealing and user-friendly interface.

MoolaLearn Logo

Design Features

Personalization and Customization

Tailored learning experience for teens, allowing them to customize their journey and explore topics that they actually care about.

Interactive Learning to Drive Interest

Integration of games and simulations to provide immediate feedback and rewards, fostering motivation and interest in financial literacy.

Gamification

Implementation of gamified elements such as points, achievements, and progress tracking to enhance user interaction and retention.

Result

MoolaLearn revolutionizes financial education for teens, offering a fun and interactive platform that resonates with both teenagers and parents alike. By addressing the shortcomings of existing platforms and leveraging engaging design and gamified features, MoolaLearn empowers teens with essential financial knowledge in an enjoyable and effective manner.

Pre-launch marketing efforts generate significant awareness and interest, positioning MoolaLearn as a leading platform in financial education for teens. Continuous measurement and iteration based on user feedback ensure ongoing improvement and relevance, cementing MoolaLearn's status as a valuable resource in the journey to financial literacy.