PorkFolio

We kicked off our design process with quick, low-fidelity sketches to get ideas out of our heads and onto paper. With only 24 hours to build the project, speed and clarity were key.

I created early paper wireframes to define the layout and content flow for both the app and marketing site. For the landing page, I focused on clear information hierarchy, call-to-action placement, and a layout that would guide users naturally down the page.

→ Rapid sketching helped us align quickly as a team, clarify scope, and save time before prototyping.

After sketching on paper, I brought our ideas into Figma to establish the structure and layout of both the marketing site and the desktop app.

This wireframe phase focused on content hierarchy, flow, and usability before diving into visuals. Collaborating with my teammate who was exploring logo and visual identity, I worked to make sure our designs were functional, intuitive, and feasible to implement.

→ These wireframes became the blueprint for both our high-fidelity prototype and final coded designs.

Building on our wireframes, I created high-fidelity mockups and interactive prototypes in Figma. I focused on a clean, approachable interface that made budgeting feel less intimidating, especially for users new to finance.

To strengthen our designs, we sought out feedback from a senior UX professional, who helped us refine layout, readability, and overall accessibility.

→ I made data-driven design decisions based on feedback, such as replacing low-impact sections with testimonials, condensing content for readability, and adjusting layout to give users a better visual flow.

→ Our polished prototype helped guide development hand-off and ensured consistency across design and code.

Our final designs showcase a clean, user-friendly interface focused on accessibility and simplicity. The marketing website was streamlined due to time constraints, while the app delivered a Minimum Viable Product (MVP) highlighting the core budgeting chatbot functionality.

Although the chatbot UI is still evolving, it demonstrates practical AI integration to help users manage finances and invest in personal growth.

→ These designs provided a solid foundation for further development and user engagement.

Shown here are the polished website landing page, the app mockup illustrating the user interface, and a screenshot of the working chatbot app. Together, they represent the look and feel we aimed to deliver within the hackathon’s time constraints, balancing design clarity with functional AI integration.

→ This collaborative approach helped us stay aligned and deliver a polished product within just 24 hours.

Working on PorkFolio during a 24-hour hackathon pushed me to grow as both a UX designer and team leader. I gained confidence in my ability to design under pressure, make fast yet thoughtful design decisions, and guide a team through high-stakes problem solving. Collaborating with a professional UX mentor also deepened my understanding of accessibility, information hierarchy, and visual clarity.

This was also my first time supporting a build using the Tauri framework, and while I wasn’t focused on backend, checking implementation against my designs helped me understand how to bridge design and development more smoothly.

PorkFolio showed me how intentional design can make complex topics feel more human and approachable. Even in a time-crunched setting, the right design choices can empower people to take action, and that’s a reminder I’ll carry into every future project.

PorkFolio was an exciting challenge in designing under pressure, prioritizing user needs, and building something meaningful in just 24 hours. We’re proud of what we created, and even prouder to be recognized as one of the winning teams.

Want to see more?
→ View our full project on Devpost:
PorkFolio | AI That Helps You Budget Smarter and Invest in You