[ Project Delivered ]

[ Hub Formaturas ]

Graduation Event Management Platform for HUB

Role

Product Designer

Timeline

2024

Team

Product Design, PM and Developer

Skills

Wireframing, Prototyping and Client Management

Context

The HUB project was developed during my time as a Product Designer at Kafé Apps. HUB is a company specialized in graduation event consulting, and they aimed to build a digital platform to streamline event management and provide more autonomy to students and graduation committees — enabling direct access to contracts, financial plans, installments, and other operational features without needing constant contact with the company’s team.

Goals & Challenges

The main goal of the project was to digitize and automate HUB’s operations, both for internal use (Backoffice) and for end users (students and committees). It was essential to ensure a smooth and autonomous experience, allowing actions such as plan upgrades/downgrades, document access, and independent payment management.

Since Kafé Apps is a No-Code Software House, the platform would be built using Bubble and Supabase.

My Role

I joined the project to continue the work started by a freelance designer, who had initiated the interface but left many points undefined. My responsibilities included:

Restructuring the Figma file (information architecture and component standardization)
Designing pending flows for the student and committee user views
Creating the entire backoffice interface
Acting as the bridge between design and development throughout the entire execution

Discovery & Research

Due to the specificity of the business model, the first step was a deep dive with HUB’s co-founders. I scheduled weekly meetings to understand the nuances of pricing models based on packages and plans, as well as internal operational flows that needed to be reflected in the system’s logic.

This immersion was crucial to uncover one of the most sensitive aspects of the project: the need to automate plan selection without manual intervention from the HUB team — a challenge that required a combination of solid business logic and great usability.

Additionally, a sitemap previously mapped by HUB’s internal team was shared, which contributed to a deeper understanding of the business processes.

Strategy & Directions

The adopted strategy focused initially on the student-facing experience, prioritizing the flows with the greatest direct impact on the end user. After validating these flows with the client, the focus shifted to the backoffice — the central structure responsible for feeding and organizing all data to ensure the frontend could function autonomously.

At each design sprint, we validated the flows during weekly meetings, which also helped restore the client’s trust after previous delays had caused frustration.

Deliverables

In addition to bringing greater organization to the project, I delivered the following validated flows and screens:

Student Area: Financial Management, My Plans, New Plan Subscription, Docs & Settings, Store
Backoffice: Dashboard, Class Page, Student Page, Full CRUD for all sections

The initial flows (Login, Signup, My Class) were also revisited and refined to better align with the business goals.

UI Screenshots

Handoff & Documentations

All materials were delivered with clear organization in Figma, standardized naming conventions, and visual annotations to facilitate developer handoff.

Next Steps

When I left Kafé Apps, the main interface flows were already designed and validated. Only the final backoffice flows remained to be completed.

Lessons Learned

This project was a milestone in my designer journey due to the complexity of adapting design to such a specific business model and the importance of rebuilding trust with the client through weekly meetings, organized assets, and consistent delivery.

More Work