Home (New Start Page)
A unified entry point with shortcuts to grades, classes, financial info, messages, and upcoming assessments, improving visibility and reducing navigation loops.
Context
The institution’s legacy student portal – used by more than 20k students – was fragmented, slow, and visually outdated. Essential information such as grades, schedules, and financial updates was buried across multiple pages. Academic teams also struggled to reach students due to poor visibility of messages and alerts.
Challenge
The portal was built on a legacy vendor platform (TOTVs), limiting what could be changed. We couldn’t rewrite core logic, only reorganize content, improve layout, and add new pages on top. Navigation was confusing, important actions took too many clicks, and notifications were nearly invisible. Expectations between stakeholders (UX, branding, and leadership) often conflicted with technical constraints.
My role
I led user research, mapped academic journeys, restructured the portal’s information architecture, and redesigned key interfaces with a focus on clarity and mobile usability. To support the engineering team’s constraints, I also created a lightweight design system based on Bootstrap, ensuring feasible implementation and consistent UI across new pages.
Solution
We redesigned the Student Portal around clarity, structure, and mobile-first access. A new Home page brought shortcuts, alerts, and academic status into a single, visible entry point. Navigation was rebuilt to reduce friction and minimize search time. Pages for grades, class schedules, documents, and enrollment were reorganized with clear hierarchy and predictable patterns. New communication areas improved visibility of messages, tutorials, and institutional announcements.
Results
+ Clear Information Architecture
Navigation redesigned to reduce time spent searching for data.
+ Faster Access to Academic Tasks
Grades, classes, and financial updates surfaced directly on the Home page.
+ Improved Communication
Messages, alerts, and institutional content became more visible and structured.
+ Mobile-Friendly Experience
Fully responsive layouts supported students’ dominant use on phones.
Process overview
1. Understand the workflow
Surveys + interviews revealed daily student needs and the pain of “not knowing where to click.”
Tools: Google Forms, Notion, Figma
2. Requirements & opportunities
Benchmarking + portal audit exposed gaps in content hierarchy and overloaded navigation.
Tools: FigJam
3. Prototype & validate
Wireframes and high-fidelity prototypes tested with students and faculty guided a simpler architecture.
Tools: Figma
4. UI design & systemization
Components, spacing, color, typography, and responsive patterns built into a lightweight Bootstrap-based system.
Tools: Figma
5. Refinement & handoff
Specifications documented for engineering implementation within vendor limitations.
Tools: Notion
Discovery
Research revealed that the portal’s core issue wasn’t aesthetics – it was orientation. Students consistently reported: “Não sei onde clicar”. Essential tasks (checking grades, accessing classes, seeing financial alerts) required too many steps. Tutorials and key messages were hidden behind unclear menus. Academic teams also needed clearer spaces to communicate with students. These findings shaped the redesign: reduce clicks, surface what matters, and prioritize mobile-first access.
Friction Points & Insights
- Students felt lost due to hidden or duplicated pages
- 3–5 clicks were needed to access core academic tasks
- Notifications were barely visible, reducing engagement
- Desktop-centric design conflicted with mobile-first usage
- Vendor limitations blocked deeper functional changes
- Academic teams lacked a clear channel to deliver messages
Deliverables
Academic Info
Grades, attendance, subjects, assessments, history, and enrollment reorganized into a predictable, structured flow.
Custom Info Pages
Tutorials, announcements, and benefits pages designed for clarity and institutional flexibility.
Design System
A lightweight component library built using Bootstrap principles to ensure development feasibility within the vendor’s constraints. Included typography, spacing rules, color tokens, UI patterns, buttons, cards, banners, and layout grids. The system reduced inconsistencies across pages and supported future incremental improvements.
Impact
Business impact
- Reduced confusion and support requests related to navigation and academic tasks
- Stronger communication channels between institution and students
- Improved perception of the institution’s digital experience
User impact
- Faster access to grades, classes, and financial alerts
- Clearer, predictable navigation with fewer clicks
- Better visibility of messages and updates
- Fully responsive pages for daily use on mobile
Team impact
- Bootstrap-based component system simplified development
- Documentation enabled updates despite vendor constraints
- Clear IA and visual rules reduced rework
Key learnings
- Even with strict vendor constraints, UX can significantly elevate usability
- Students value clarity, orientation, and mobile speed more than visual polish
- Early research prevents misaligned expectations
- Lightweight design systems accelerate implementation in legacy environments