Overview
MyHumber is the student portal for Humber College, used daily by tens of thousands of students to access schedules, grades, registration, and financial accounts. The existing system had accumulated years of competing navigation patterns, inconsistent UI components, and a mobile experience that had clearly never been a design priority.
This was a ground-up redesign focused on three outcomes: faster navigation to the most-used features, WCAG AA accessibility compliance, and a mobile experience that actually works.
Research and Discovery
The redesign began with a heuristic evaluation of the existing portal against Nielsen’s 10 usability heuristics and a task analysis mapping the most common student journeys: checking a grade, finding a classroom, paying a fee, and registering for a course. The evaluation identified 23 distinct usability issues across five severity levels.
The most critical finding was navigation depth: students needed an average of 4.2 clicks to reach a grade from the homepage, compared to 2 in the redesign. The second critical finding was that the mobile layout required horizontal scrolling on a standard iPhone viewport for basic tasks.
Design System
A component library was built from scratch in Figma before any screen layout work began. Every component was documented with states (default, hover, focus, disabled, error), spacing tokens, and usage guidelines. Building the system first rather than extracting it from screens ensured consistency across the 24 screen designs produced.
- WCAG AA compliant colour contrast ratios across all text and interactive elements
- Focus-visible ring styles meeting WCAG 2.4.7 for keyboard navigation
- Reduced navigation depth: average 2.1 clicks to reach any primary feature
- Touch target sizes of 44x44px minimum across all interactive elements
- Responsive breakpoints at 320px, 768px, and 1280px with tested layouts at each
Interactive Prototype
The final deliverable included a high-fidelity interactive Figma prototype covering the five primary student journeys and a live coded React implementation demonstrating the schedule view, grade lookup, and quick links dashboard. The coded prototype allowed the interaction details to be validated in a real browser rather than relying on Figma’s transition engine.
Documentation
Full UX documentation was produced alongside the design files: a design system specification, an accessibility audit report against WCAG 2.1 AA, annotated wireframes for each screen state, and a handoff guide for the engineering team. The project was delivered as a case study demonstrating the complete end-to-end UX design process.
