About Me   

HTML Site Map for Aqua DNA at Jacobs












HTML Site Map


Product: Aqua DNA at Jacobs




Project Duration


  • 4 Days

Role


  • UX/UI Designer

Deliverables


  • Visual Research
  • Sketches
  • UI Screen
  • Interactive Prototype

Tools Used


  • Figma (Design and Prototyping)



Stakeholders


  • Myself (Project Owner)
  • UX Lead


Why did I work on the HTML site map?



  • As part of the Aqua DNA redesign team, I was responsible for designing solutions aligned with the accessibility guidelines by WCAG.



  • The "Multiple Ways" criterion is part of the Web Content Accessibility Guidelines (WCAG). Specifically, it's criterion 2.4.5 under the Level AA guidelines. It states:

    "More than one way is available to locate a Web page within a set of Web pages except where the Web Page is the result of, or a step in, a process."


  • In simpler terms, this means that there should be multiple methods for users to navigate to any given page on a website.




What’s the purpose of HTML site map?



  • User Navigation: It provides a clear, often hierarchical overview of a site's content, helping users navigate and find the information they're looking for.
  • Content Discovery: By presenting all of the site's links in one place, it ensures users can discover sections or articles they might have missed through standard navigation.
  • Accessibility: It helps users who prefer or benefit from a straightforward layout, especially those with specific accessibility needs.
  • Backup Navigation: If the primary navigation is confusing or fails, users can refer to the HTML sitemap to find what they're looking for.




Research 


  • I conducted quick visual research looking at various products to see how they designed their site map. The design of the sitemap was influenced by Apple's site map.
  • I decided to follow Apple's site map because Apple is well-known for designing accessible products, and they were one of the first companies that made accessibility a cornerstone of their design.



Functionality 







How will users navigate the site map using a keyboard?









Development



  • This design was added to the accessibility epic.
  • Work was scheduled for developers to pick up when they finished other accessibility stories.


Learnings











Mark