The challenge
One portal has to cover many tasks, from grades and class schedules to payments, documents and notices. It also serves undergraduate and graduate students, including people who work or have busy routines.
WebAluno
Student portal redesign
A redesign of the PUCPR student portal, making grades, schedules, payments and documents easier to find and manage.
Overview
WebAluno is the student portal of PUCPR, a university in Brazil. Students use it to check grades and attendance, pay tuition, open requests and look up the academic calendar.
In a UI Design course, the brief was to redesign an existing interface. Gabriela Munhoz and I chose WebAluno and took it from wireflows to a style guide, a component library and final desktop screens.
The goal
Make academic information easier to find and manage, with an intuitive, visually pleasant interface that students can use at any time, on any device.
Process
- Step 01 Understanding We defined the target audience and business goals, then listed 12 usage scenarios, such as checking grades, paying tuition and opening a request.
- Step 02 Wireflows We mapped each scenario as a flow, with a wireframe for every screen, and organized the portal around a dashboard and a clear top menu.
- Step 03 Visual concept We built a reference board in Figma with examples of components and styling, and drew inspiration from the PUCPR website.
- Step 04 Style guide We defined typography in Poppins, color scales, elevation and grids for desktop and mobile, then created a component library for consistency.
What we delivered
Wireflows for the portal's main areas, a reference board, a style guide, a component library, and final desktop screens for all the portal's menus.
Project stage
A redesign proposal created for a university UI Design course, not an official PUCPR release.
Final screens
Key decisions
A dashboard with the essentials
The home screen summarizes tuition with the option to pay, notices, current courses, grades, attendance and student details.
Five clear menus
Every task sits under Home, Academic, Financial, Administrative or Complementary, and breadcrumbs show students where they are.
Answers without leaving the page
Hovering over a marked date in the academic calendar explains what it means, such as a holiday, with no extra clicks.