Optimizing Mobile Navigation:
Boosting Usability for a Seamless User Experience
The original navigation was cluttered and lacked a clear hierarchy, making it difficult for users to navigate. It was also visually unappealing, detracting from the overall user experience.
Role
UX/UI Designer, Developer
Tools
HTML, CSS, Figma, VS Code
Date
2023
Goal 1
Make UI more intuitive
Goal 2
Establish a clear hierarchy
Goal 3
Keep it brand-aligned navigation
The Original Design
Primary Limitation:
Since this section of the website is static I was asked to only redesign the navigation using CSS without altering its position or HTML.
The Process
Step 1: Organizing Link Types
The first step was to categorize the links to explore hierarchical options based on their folder locations. I divided them into two groups: links selected by the department and all pages within the designated folder.
Step 2: Research and Inspiration
To gather ideas, I looked at navigation designs on other university websites. This helped me see effective hierarchical structures and aesthetic approaches I could adapt.
Step 3: Understanding CSS Limitations
Given my main constraint of only using CSS, I used Chrome DevTools to identify exactly what I could modify. This step was key to figuring out what design changes were possible within the limits.
Step 4: Designing Variations
With the constraints in mind, I created several design variations. I focused on adjusting colors and balance to improve visual appeal while keeping the navigation functional. The challenge was making meaningful improvements within a static structure, emphasizing clarity and ease of use.
The Outcome
Even with the HTML limitations, the redesigned navigation brought several improvements:
Enhanced Hierarchy: Links were organized more clearly, making it easier for users to move through different sections.
Improved Visual Appeal: The look was cleaner and more cohesive, aligning better with the university’s branding.
Functional Adjustments: While limited, I proposed relocating the hamburger menu for better accessibility and adding an option to minimize internal pages in the office folder.