Project Overview
Project: Learning Portal Landing page Redesign
Industry: Education
Date: 2023
Role: UX/UI Designer, Web Developer
Tools: Figma, Adobe Illustrator, VS Code, LibGuide
Problem: Information Overload and Lack of Hierarchy
The Learning Portal’s existing landing page had several critical issues affecting user experience:
Overload of Text: The landing page was filled with excessive amounts of text, which made it difficult for users to quickly locate relevant information.
Repetitive Information: Multiple sections of the page repeated similar content, leading to user frustration and confusion.
Two-Line Menu Bar: The menu bar extended into two lines, contributing to visual clutter and making navigation less efficient.
Lack of Visual Hierarchy: Important content was lost amidst poorly organized sections, making it hard for users to prioritize or digest the information effectively.
Impact: User Confusion and Reduced Engagement
These problems created a negative user experience, resulting in:
User Confusion: The overload of text and repetitive information overwhelmed users, making it difficult to navigate and absorb the content.
Reduced Engagement: Cluttered navigation and a lack of clear visual pathways reduced user interaction with key resources on the page.
Navigation Difficulties: The two-line menu bar hindered users from finding the right sections, adding to their frustration and reducing usability.
Poor Content Absorption: Without a clear visual hierarchy, users struggled to grasp important content, lowering the portal’s overall effectiveness.
Solutions: Streamlined Navigation and Improved Visual Design
To resolve these issues, the redesign focused on enhancing both usability and aesthetics:
Simplified Menu Bar: A streamlined menu bar, reduced to one line with three main items—Home, Hubs, and FAQs—helped declutter the navigation and improved overall efficiency.
Evidence-Based Design Choices
• User Analytics: Showed that the majority of users frequently accessed the Home, Hubs, and FAQs sections, making these ideal choices for simplifying the menu.
• Usability Testing: Demonstrated that the one-line menu significantly reduced user confusion and improved navigation speed, enhancing the overall user journey.
• User Analytics: Showed that the majority of users frequently accessed the Home, Hubs, and FAQs sections, making these ideal choices for simplifying the menu.
• Usability Testing: Demonstrated that the one-line menu significantly reduced user confusion and improved navigation speed, enhancing the overall user journey.
Creating Visual Hierarchy:
Added clear visual hierarchy with distinct headers, improved font sizes, and ample white space to guide the user’s attention toward critical areas.
Introduced icons and visual cues to help users scan through the page more easily and identify key sections.
Add carousel hero banners:
A carousel hero banners was introduced at the top of the landing page to introduce the Learning Portal and showcase key hubs with engaging Call-to-Action buttons. This dynamic feature will promote user engagement while allowing for more visual emphasis on important areas, ensuring a streamlined experience.
Content Reduction and Reorganization:
Unnecessary content, such as the Terms of Use, was moved to the About page, freeing up space for more valuable resources.
The college library was given increased visibility through expanded real estate on the page, promoting its importance.
Additionally, ensure that all design elements, including layout adjustments, maintain full responsiveness across various devices for a seamless user experience.
