Redesigning Navigation for Accessibility
Redesigned the top navigation of a developer portal to improve accessibility and ensure consistency with the main corporate site.
Role
UI Designer
Industry
Oil & Gas Industry
Duration
1 week
The Problem
Because the original top navigation didn’t include defined focus states, users with disabilities couldn’t navigate the developer portal effectively.
Design Process
Since this wasn’t a major feature and didn’t require a complete redesign of the top navigation, we decided to skip wireframing. Instead, I participated in an ideation session with the UX designer on the project, where we gathered ideas and aligned on the overall direction. During this session, we also discovered that the top navigation of the main corporate site and the developer portal were inconsistent in both appearance and functionality.
With a clear direction established, I began working on the new top navigation. I used the browser’s inspector tool to analyze the design of the corporate site’s top navigation and then recreated the developer portal’s version in Figma. I started by building the smallest UI elements and clearly defining their various states (default, hover, active, focus) across different screen sizes. Using these foundational elements, I designed more complex components—such as dropdowns for deeper navigation levels. Finally, I assembled the full top navigation for all viewport sizes using these building blocks.
Final Design
I shared the final design with the front-end developer and the tester, ensuring alignment before implementation. The developer raised a few minor points related to framework limitations, which I quickly addressed. Once everything was validated, I delivered the complete design package—with all components and interaction states clearly documented—for smooth handoff and development.
Reflections
At the start of the redesign, I set out to achieve two main goals:
Improve the accessibility of the top navigation and
align it more closely with the corporate site’s design for greater consistency.
If I had more time or resources, I would have liked to validate the improvements through accessibility testing or user feedback. In future projects, I aim to include at least lightweight testing in the process to better measure impact and ensure the design works well for all users.
Other projects
Designing an API Notification Feature
Created a sign-up flow for email notifications on API and Product updates, focusing on intuitive interactions and cross-device usability.
Building a Simulation Software Catalog
Designed a responsive catalogue with filtering and detail pages to help users explore and find the right simulation tools — developed in close collaboration with client-side stakeholders.