InvestHer

Replacing impulsive spending with long-term investments. InvestHer is an extension + dashboard where users fund an imaginative stock portfolio, via savings they get from not making impulse purchases.

Comment

Inspiration

We focused on Canada Life's Challenge to provide a solution that helps develop mass market women’s investment capabilities. Although the category is tailored to the female demographic, all of us felt passionate about educating others on making more informed investment decisions. We ideated on what bad investment/spending habits users tend to fall into, and this is why we focused specifically on reducing impulse purchases.

What it does

InvestHer solves impulsive spending by acting as the first barrier in ensuring that you are making wiser financial decisions. Today, companies have made it increasingly easier to check out a shopping cart, which is why we want to slow this process down. InvestHer's extension appears as a pop-up on the checkout screen and provides users with different metrics and advice as to how their cart's total can be better put towards long-term investments. When a user decides to make the choice to save, we take that initial subtotal and contribute it to an imaginary portfolio that tracks ETFs that have consistently returned gains for investors. Our goal with InvestHer is to make users pause before they click purchase and provide them an easy way to dip into the world of investment through a 0-Risk portfolio.

How we built it

We built InvestHer using a modern frontend-focused tech stack. The interface was first prototyped in Figma, then translated into working code using Figma Make, allowing us to rapidly generate React components and refine them manually. The application frontend was developed with React + TypeScript, styled using Tailwind CSS, and powered by Recharts for interactive portfolio and savings visualizations. On the backend, we designed a lightweight service layer that handles user data, investment simulations, and savings history. This includes logic for calculating ETF growth, tracking principal contributions, and generating personalized insights based on onboarding survey responses. The backend communicates with the frontend through simple API endpoints, enabling real-time updates to dashboards and charts as users save or simulate investments.

Challenges we ran into

One of the biggest challenges we faced while building InvestHer was working with AI-driven coding tools and AI-enhanced IDEs. Translating our Figma designs into code using tools like Figma Make often produced layouts and components that needed a lot of cleanup and restructuring before they could work properly in our project. Continuing to develop on top of this code sometimes led to confusing structures, unexpected behaviour, or pieces that did not fully match the original design. For team members who were new to web development, understanding what the AI created and figuring out how to fix or extend it without breaking something else became especially difficult. Learning React, TypeScript, and backend concepts at the same time added to the complexity, but it also became one of the most valuable parts of the entire building process.

Accomplishments that we're proud of

We're really happy with the final product as we managed to include all the features we initially ideated. We were also able to overcome all of the challenges we faced by working together and growing closer as a team.

What we learned

We learned how to utilize new Gen AI tools and also more about the consumer industry. This challenge really provided a strong problem space for us to work in, and we enjoyed all the highs and lows that came with the project.

What's next for InvestHer

InvestHer is going to look towards potentially allowing users to incorporate real portfolios into their saving journeys, as we believe InvestHer doesn't need to stop at an imaginary portfolio, and can directly tie into helping a user make direct financial decisions.

Share this project:

Updates