PorkFolio

Inspiration

While brainstorming various everyday financial challenges, we noted that people often want to delve into new activities and skills but are constrained by a lack of knowledge about budgeting for the activities and materials needed to learn. We came to a consensus that a program that could help plan to allocate the money needed to learn new activities and skills while remaining within budget would be beneficial not only financially but also emotionally. Such a program can bridge the gap that prevents people from attempting to achieve new hobbies and their dreams. Thus, we decided to approach this issue by creating a project to facilitate the process and encourage people to try new things.

What it does

In order to facilitate the learning process of different skills, we decided to create PorkFolio. PorkFolio is a personalized chatbot that aims to empower users by streamlining budgeting. After the user inputs their goals and budget, PorkFolio provides financial advice for investing, planning advice for personal growth, or making informed financial decisions. Additionally, PorkFolio’s bright and engaging interface is intended to make finance more approachable and appealing to users who might otherwise find it tedious, difficult to understand, or overwhelming.

How we built it

We built the widget (app) using the Tauri framework, which houses both a chatbot and a budget breakdown feature. We integrated the Gemini AI API into Tauri, allowing users to input their budget and the skill they want to learn. The AI then generates a detailed, goal-oriented budget plan to help them achieve their objective efficiently. On the left side of the app, users can interact with the chatbot by typing their questions. The chatbot's responses are then displayed as a pie chart on the right side, providing a clear and visual representation of the budget breakdown for better understanding.

To design the website, we first ideated by drawing sketches and paper wireframes. After asking each other’s feedback, we then moved to digital wireframes, mockup, and prototype in Figma. Based on feedback throughout the design process, we created multiple iterations of the design, each building on the previous to ensure we kept the website focused and simple yet visually interesting and accessible for all users. We incorporated feedback from a Lead UX/UI professional to enhance our design further. In development, we imported our Figma design to code in Visual Studio, finalizing the designs in HTML and CSS for the web.

Challenges we ran into

We wanted to connect our website to Tauri so we can update the github page and change the elements on Tauri, but after multiple failed attempts, we realized Tauri is its own app and can’t be connected to github easily. Thus, we focused on the chatbot and visualization on the app and used the website to persuade users to download PorkForlio. We also used the wrong version of Tauri and didn’t download all the requirements before trying to set up the app. These obstacles set us back, however, we overcame the challenges by backtracking to read documentation carefully and asking mentors for help.

Accomplishments that we're proud of

We are proud of our UI/UX design because we wanted to make it approachable to users. Early in our design process, we contemplated aspects such as PorkFolio’s name, mascot, logo, and website orientation. In lieu of usability testing, we had a Lead UI/UX professional review our early mockup and received feedback that our chosen colors are accessible, our chosen font is unique yet legible, and the interface is overall clean and straightforward, making the website easily navigable.

We also wanted the chatbot responses to be easily readable and understandable, so we spent lots of time personalizing the PorkFolio chatbot. We implemented unique features, such as greeting users with ‘Oink oink!’ to interact in a fun manner, as well as a pie chart using soft colors to provide a readable visualization of the divided funds.

What we learned

This is our first time using Tauri, allowing us to explore its features and create an app. We were also able to explore different possibilities in creating an extension. Although we didn’t end up using some of the resources we explored, such as Electron and Webflow, the whole process of researching these websites serves as useful knowledge for potential future projects and helps expand the possibilities for ways to carry out our ideas. Three of the four members participated in their first hackathons, so they experienced for the first time the logistics behind creating a service from scratch and implementing a product through the design process within 24 hours, particularly gauging the scope of the project and prioritizing features to implement.

What's next for PorkFolio

In future iterations of PorkFolio, we would love to expand the app with various features. One example is to build a timer that reminds users to pay their credit card payments before the deadline. Other ideas include further personalization such as integrating a checklist that is generated along with the budget breakdown so that users can keep track of their expenses and progress.