Redeveloping Main Site Navigation

What

Using an accessibility audit and user experience feedback, my team determined that a rebuild and redesign of the main site navigation was a worthwhile project that would improve wayfinding and findability on our site, which ultimately drives ease of information gathering and, ideally, path to purchase.

Why

I was the primary developer on this initiative due to my experience and training on web accessibility best practices, ARIA patterns, and WCAG standards. It was also an excellent opportunity for me to work through the full lifecycle of a project in our solution.

How

• I relied on partnering with our team’s designer when I had questions about making the design paradigms in her Figma deliverable a reality. I used lots of side-by-side screenshots to do my best to make margins, padding, and underlines as pixel perfect as I could.
• Breaking this large project into phases allowed me to iteratively approach a large amount of work and continually make progress against the goals and requirements.
• Facets of this project:
  • CMS: Prioritized content reuse, redesigned CMS (Episerver) input fields minimally. Documented places where changes need to be made for ease of use for the authoring team.
  • HTML/CSS: Properly separate structure/function/design for code readability and accessibility. Restructure existing code to improve internal understanding and screen reader experience.
  • Interactivity: Restructure and refactor pieces of existing code to operate the new navigation’s interactive elements.
  • Responsiveness: Handle mobile, tablet, and desktop breakpoints appropriately and without disrupting code structure or screenreader experience.
  • Project Leadership & Ownership: Keep track of outstanding tasks (assisted by analysts), ensure UAT and internal review processes are progressing as expected. Lead testing with WeCo (audit provider) for in depth accessibility feedback.