Students Portal

Designing a familiar-yet-distinct student portal for a university client with evolving requirements — where the real challenge was translating ambiguous conversations into clear design decisions.

The client was already hosted on the T4 CMS and needed a microsite for their students portal. The core challenge wasn't technical — it was clarity. They needed the portal to feel distinct from the main university homepage so students could immediately orient themselves, while still feeling familiar enough to be part of the same institution.

Their main website homepage

Understanding vague requirements through active listening

This client came to design calls still actively deliberating, often working through decisions mid-conversation rather than arriving with clear direction. Rather than waiting for a brief that never fully arrived, I adapted by listening closely to their discussions, identifying the underlying concerns beneath the surface-level feedback, and translating those into concrete design decisions.

One clear example: they wanted all department links to carry equal visual weight — not just for aesthetic reasons, but to avoid any department feeling deprioritised. Understanding that this was a political and relational concern, not just a layout preference, led directly to the scrolling carousel solution, where every link gets the same real estate and prominence.

Designing for distinction without disconnection

For the homepage banner — the main differentiator from the university's main site — I presented 3–4 initial directions inspired by online research and shaped by the brief they'd described. Offering multiple options served two purposes: it gave the client genuine freedom of choice, and it helped compress the revision cycle by surfacing preferences early rather than through back-and-forth iterations.

The first design options that I presented to the client

Their feedback on the first round made it clear they wanted something more visually distinct than I'd initially interpreted, so I pushed the next iteration further. The final design landed well and was approved quickly.

The carousel also includes a pause button — an accessibility consideration to ensure users who find motion distracting or disorienting aren't excluded.

Final implemented homepage banner

Menu and navigation decisions

For the top navigation, I proposed switching from a vertical to a horizontal icon layout. The clients responded positively and it was implemented as suggested.

Existing mobile design in the original website

For the new apps menu — built from scratch to surface key student resources — I proposed a grid of equal-sized rectangles, each linking to a relevant section. This directly addressed the equal-priority requirement the client had raised earlier, applying the same logic consistently across the page.

Final implemented Apps menu

On mobile, I presented a few variations exploring small but meaningful differences: the color treatment of the top bar menu button, and whether the hero banner content should be left-aligned or centred. The structure remained consistent across all options; the choices were kept intentionally focused to make the decision easy for the client.

Different options for mobile layout, clients chose the first one

Outcome

The project went live successfully. Despite a challenging collaboration process, the client was happy with the final result — an outcome I attribute largely to listening carefully, asking the right questions, and turning ambiguous conversations into actionable design direction.

20%
Explore website to collect stamps!
Beginner Recruiter Rank 3 Final Rank