HUMBER CURRENT

Redesigning the Humber Current: A UX/UI Perspective

The Humber Current website project aimed to revitalize the platform with a modern, engaging design that showcases student work while enhancing usability and responsiveness. By focusing on information hierarchy, visual storytelling, and improved calls-to-action, the redesigned site is more accessible and user-friendly across devices.

Desktop Wireframe

The desktop wireframe emphasizes a more expansive layout, taking advantage of larger screen space to enhance the visual storytelling and functionality of the site. Key elements include:

 

  1. Full-Screen Hero Section
    The hero section occupies significant space on the homepage, featuring a bold design with prominent text and call-to-action buttons (“Sign Up,” “Log In,” and “Hire”), immediately engaging the user upon landing on the page.

  2. Multi-Column Layout
    The desktop wireframe incorporates a multi-column structure for sections like “Student Work” and “Program Highlights,” allowing more content to be displayed at once and improving the browsing experience.

  3. Enhanced Visual Hierarchy
    The design organizes content into distinct sections with ample whitespace and structured grids, making it easy for users to differentiate between student projects, program details, and informational content.

  4. Footer with Comprehensive Links
    The footer provides a complete set of navigation links, including “About Us,” “Legal,” and social media handles, enhancing site discoverability and providing easy access to additional resources for desktop users.

Mobile Wireframe

The mobile wireframe design prioritizes accessibility and a streamlined user experience for smaller screens. Key elements include:

 

  1. Simplified Navigation
    A compact, hamburger-style menu ensures that navigation remains accessible without taking up screen space. Key actions like “Sign Up” and “Log In” are placed prominently at the top for quick access.

  2. Responsive Layout
    The content layout is adapted for mobile, with stacked sections that maintain readability and accessibility. The “Student Work” gallery uses a single-column structure, allowing users to scroll easily through projects.

  3. Call-to-Action Accessibility
    Important actions, such as “Hire” and “Learn More” buttons, are placed in visually distinct sections, making them easy to tap and interact with on a mobile device.

  4. Smooth Content Flow
    The wireframe includes a logical content hierarchy, beginning with an engaging hero section, followed by student work, program information, and a footer with essential links, ensuring users have a seamless browsing experience on mobile.

Results

Increased User Engagement

The platform’s improved accessibility and usability features led to higher engagement, with users spending more time exploring student work.

Positive Feedback on Visual Appeal:

Early feedback indicates that users find the new design visually appealing and easy to navigate, which enhances their overall experience.

Simplified Navigation

The site’s navigation was restructured to improve user flow and make it easy to find essential content. The top navigation bar includes primary links, and clear section labels guide users through the site efficiently.