SFPOPOS Site Design

User Stories

1. As an office worker in downtown San Francisco, I want to be able to see a list of all SFPOPOS at a glance, along with key details such as image, address, and hours, so that I can quickly visualize all of my options for where to visit.

2. As an office worker, a want to be able to find out more about specific spaces, so that I can refine my decision about what sites would be suitable for me to visit for a quiet lunch break, to focus on work, or to have an informal business meeting

3. As an office worker, I want to be able to visit this site from my smartphone in order to remember which sites I want to go to, their hours, and how to get to them. I want to be able to open the maps app directly from this site, so I can easilly navigate to the space.

Site Outline

• SFPOPOS
  • Home
    • Header
      • Page Title: SFPOPOS
      • Sub Title: San Francisco Privately Owned Public Open Spaces
    • Nav
      • NavLink: List
      • NavLink: About
      • NavLink: Random Space Button
      • NavLink: Signup
    • Main
      • Search bar
      • Grid
        • Card
          • Image: Image of space
          • Header/Navlink: Name of space, link to detail page
          • Text: Address
          • Text: Hours of operation
    • Footer
      • Author signature
  • About
    • Header
      • Page Title: SFPOPOS
      • Sub Title: San Francisco Privately Owned Public Open Spaces
    • Nav
      • NavLink: List
      • NavLink: About
      • NavLink: Random Space
      • NavLink: Signup
    • Main
      • Header: About SFPOPOS
      • Text: Details about what POPOS are
    • Footer
      • Author signature
  • Space Details Page
    • Header
      • Page Title: SFPOPOS
      • Sub Title: San Francisco Privately Owned Public Open Spaces
    • Nav
      • NavLink: List
      • NavLink: About
      • NavLink: Random Space
      • NavLink: Signup
    • Main
      • Image: Large image of the space
      • Header: Name of Space
      • Text: Extra details about space
      • Text: Hours of operation
      • Map: Embedded google map to space
    • Footer
      • Author signature
  • Newsletter Signup Page
    • Header
      • Page Title: SFPOPOS
      • Sub Title: San Francisco Privately Owned Public Open Spaces
    • Nav
      • NavLink: List
      • NavLink: About
      • NavLink: Random Space
      • NavLink: Signup
    • Main
      • Form
        • Header: Signup Form
        • Text input: username
        • Text input: email
        • Checkbox input: Receive SFPOPOS Newsletter?
        • Submit input: Signup
    • Footer
      • Author signature

Figma Wireframes

link