UXD - Mobile Navigation

[Joy-Truex]

Overview

We need to create navigation specific to mobile devices so users can navigate our site on a variety of devices.

Action Items

• [ ] Adapt the existing elements for mobile
  • [ ] Mobile Header
    • [ ] Hamburger menu
  • [ ] Mobile Footer
    • [ ] remove social media icons
    • [ ] remove content, "Data last updated MM/DD/YY"
• [ ] other considerations
  • [ ] on mobile, important links should appear in the navigation menu. Perhaps simply relocate to save time on researching the "correct location"
  • [ ] "Powered by volunteers from Hack for LA" must appear on the screen (per Bonnie's previous instruction)
• [ ] Update component(s) in design system library
• [ ] Document user interaction in Figma
• [ ] Update the Hand Off section of this ticket with the final iteration of this design

---

Design Iterations

Please move ticket between In Progress and In Review to assist PM team

• Iteration 1: Research and brainstorm ideas

---

Hand Off Materials

Figma Section Name: REPLACE WITH SECTION NAME

Before Screenshot

REPLACE WITH SCREENSHOT UPLOAD

After Screenshot (Finalized)

REPLACE WITH SCREENSHOT UPLOAD

Designer Resources

• Article with opinion to consider: Mobile Footers: Let’s Take a Step Back

Iteration Dropdown Copy/Paste

<details><summary>Iteration X</summary>
<p>

Link to notes: `REPLACE WITH COMMENT URL`

`REPLACE WITH SCREENSHOT UPLOAD`

</p>
</details> 

Instructions for Engineering Hand Off

To Start Engineering Hand Off...

1. Ensure all Hand Off Materials are filled in
2. Add the "ready for dev lead" label
3. Leave a comment saying "This ticket is ready for engineering hand off."

[greenishviolet]

Iteration 1

🔗 Link to Figma here.

Research

I looked into mobile navigation, footer design, and accessibility considerations. The complete research findings are available here.

I'm including my research here because the footer design required more exploration, as it needs to support different page types and adapt to mobile constraints.

Footer design research

1. Footers in web-based applications and tools
   1. Navigation and footer content can be moved or omitted
      • Traditional footer content (e.g., utility links, secondary tasks links, etc.) can be placed in a dropdown in a navigation menu
   2. Cases for including the footer
      • Legal information that needs to be visible on every page
      • Logging in is not required to access most of the content
      • Information architecture is simple and shallow
      • There’s more content than interaction
      • Highlighting the brand/company is important
   3. Cases for skipping the footer
      • User needs to log in to access most of the site’s functionalities
      • Site is more like a tool (more interaction than content)
      • Footer might fit better in the flyout menu (like hamburger menus)
      • Footer content fits better in the subnavigation
2. Footer variations
   1. Contextual footers - footer content changes based on audience or webpage
      • Mobile footers need to be contextual so they don’t take up too much real estate on a page
      • Tip: Create a single menu that houses both primary and secondary content
   2. Mini footers - footer content is placed in the right rail or within a larger, expanded global navigation in pages with infinite scroll

References

• Footers 101: Design Patterns and When to Use Each]
• To Foot or Not to Foot? Footer Best Practices for Web-Based Tools and Applications
• Mobile Footers: Let’s Take a Step Back

Mobile navigation approaches

1- Same footer everywhere

This approach uses a single footer across all mobile pages, mirroring the desktop structure. A consistent footer gives users predictable access to utility links like Privacy and Contact, reducing cognitive load and supporting cross-platform consistency.

🔗 A more detailed overview is available here.

In-progress mockup of map page with header and footer

In-progress mockup of hamburger menu

2 - Contextual footers

This approach adapts footer content by page type to optimize mobile screen space. Branding pages have fuller footers, including copyright, utility links (Privacy and Contact), and the “Powered by volunteers from Hack for LA” line. Interaction-focused pages, like the map, use a lean footer to maximize map space and reduce distractions.

Footer content is also included in the hamburger menu (side drawer) alongside primary navigation links, ensuring legal and utility information remains accessible even when the footer is reduced.

🔗 A more detailed overview is available here.

In-progress mockup of hamburger menu

In-progress mockup of map page

Unofficial mockup of Contact page

[greenishviolet]

11/26 Update

Questions

1. Before finalizing designs for mobile navigation, I wanted to ask: Would it be acceptable to use a minimized footer on some pages, omitting copyright and utility links, as long as legal content remains accessible elsewhere (e.g., in the hamburger menu)?
2. I noticed that the current footer design does not include the Contact link. Should it be added alongside Privacy, both as a utility link and for potential legal purposes?
3. Should the accessibility dropdown remain in the mobile-lite header, or would it make more sense to update its content for mobile accessibility or redesign it as a help dropdown for mobile users?

Accessibility dropdown context

Some of the content in the accessibility dropdown is not applicable on mobile. For example, some instructions rely on hover interactions, which are not possible on mobile devices.

When desktop-specific content is omitted for mobile, the dropdown no longer functions as general accessibility guidance. Instead, it focuses on helping users operate the map feature.