Application Design for Desktop

[thescientist13]

Type of Change

• [x] New Documentation
• [x] Update to existing documentation
• [x] Other (please clarify below)

Summary

An Application Design is helpful for establishing the basic features, users stories, and look and feel of the project.

1. Overview
2. Pages
3. Components
4. Services

The application design should have screens and images and link out to more technical documentation where appropriate.

Related Issues

Mobile Design will be updated by 10/27 on #26

[saimatsumoto]

Application Design wiki

• [x] By 10/13: Update Header and Footer requirements/TODOs
• [x] By 10/20: Update Hero Banner and Navigation requirements/TODOs
• [x] By 10/27: Update Blog and Calendar requirements/TODOs

[saimatsumoto]

@thescientist13 Here are the proposed changes to Header and Footer requirements, please share any thoughts:

Header

Description: The header will contain the Providence Geeks logo/branding and navigations to three Providence Geeks Social Network pages. Backend Service Dependencies: None Capabilities:

1. Providence Geeks Logo is placed at the left side of the header.
2. Navigation: Show three Social Networking Services' icons on the top right of the header component
   • Facebook logo icon with link to the Facebook page - navigates to https://www.facebook.com/providencegeeks/ on click.
   • Twitter logo icon with link to Twitter profile - navigates to https://twitter.com/providencegeeks on click.
   • Slack log icon with links to the Slack page - navigates to https://providenceGeeks.slack.com on click.
3. Hover over each SNS icons displays a pop-up dialogue:
   • "Like Us" on Facebook icon
   • "Follow Us" on twitter icon
   • "Join Us" on Slack
4. There will be no visual changes to the SNS logos when each asset is hovered over.
5. The header design comply with the Styleguide (url) standards.
6. Orientation of the SNS logos:
   • From left to right, Facebook, Twitter, and Slack.
   • Collectively right-aligned
7. Margins: //TODO: Need clarification

---

Footer

Description: The footer will contain the Providence Geeks logo/branding, copyright, and contact information Backend Service Dependencies: None Capabilities:

1. Show a copyright "copyright 2017 Providence Geeks":
2. Placed at the bottom of the footer, left-aligned
3. Providence Geeks Logo is placed at the left side of the footer.
4. Contact Info:
   • Facebook logo icon with link to the Facebook page - navigates to https://www.facebook.com/providencegeeks/ on click.
   • Twitter logo icon with link to Twitter profile - navigates to https://twitter.com/providencegeeks on click.
   • Slack log icon with links to the Slack page - navigates to https://providenceGeeks.slack.com on click.
5. Show three Social Networking Services' icons in the footer component:
   • Facebook logo icon with link to the Facebook page - navigates to https://www.facebook.com/providencegeeks/ on click.
   • Twitter logo icon with link to Twitter profile - navigates to https://twitter.com/providencegeeks on click.
   • Slack log icon with links to the Slack page - navigates to https://providenceGeeks.slack.com on click.
6. SNS logos/text orientation:
   • From left to right, Facebook, Twitter, and Slack.
   • Collectively center-aligned
7. For the footer, hover-over message is inactive and will not be applied.
8. There will be no visual changes to the SNS logos when each asset is hovered over.
9. The footer design comply with the Styleguide (url) standards.
10. Under the SNS logos, there are brief text descriptions:
    • "Like Us" on Facebook icon
    • "Follow Us" on twitter icon
    • "Join Us" on Slack
    • These text are not clickable for CTA
      • Margins: //TODO: Need clarification

TODO: Image

[thescientist13]

@saimatsumoto This looks really solid to me! (I just made some minor formatting tweaks to numerically order the top level A.C. for each of these)

Initial Thoughts

1. We had discussed that using https://providenceGeeks.slack.com wasn't a user friendly experience, and that for now we should try and stick to the current strategy of using an explicit invitation link. However, since we know it expires, and that means periodic manual code changes to update the link, I think there is an opportunity to make an issue in website-backlog to see if this could somehow be incorporated into the CMS such that the link can be updated and consumed by the frontend
2. I will reach out to find out some best practices when using / not using fixed width units in a responsive based design
3. For this requirement: "Hover over each SNS icons displays a pop-up dialogue", Is the expectation just a standard tooltip, or something more robust?
4. And to clarify the point above, in the header the tooltips will display on hover, but in the footer they will be displayed below the icon itself?
5. More for @Peter-holyoke and I, but seems like there is a good opportunity for a "social-links" component (or whatever) just for grouping and managing the common functionality and styling of the three icons that can then be re-used in both the header and footer. I see this more as an engineering opportunity per se, and not something that needs to be specifically captured in the application design, IMO.

[saimatsumoto]

@thescientist13 Thank you - will update the bullet point style accordingly.

1. Created https://github.com/ProvidenceGeeks/website-backlog/issues/5
2. To be followed up
3. As clarified - it's a standard tooltip
4. Correct

[thescientist13]

Also @saimatsumoto , we will want to add a Hero Banner component. I think Navigation can just go under the A.C. of the home page itself, which I think will essentially just need some minimal A.C. to "glue" components together to compose itself, if you will.

[saimatsumoto]

Thanks @thescientist13 I made changes below to Application Design

1. Updated Header/Footer
2. Added Hero Banner and Navigation bar

[saimatsumoto]

@thescientist13 @ekrasner1 @kpisano Please review the updates below - any feedback will be appreciated: FYI, there are still some outstanding questions that needs to be clarified at the Kick-off.

Updates/Review for:

[ ] Events page requirements [ ] Blog page requirements [ ] Blog details requirements

Events

• Description: Events page will be displayed when user navigates to the landing page; or when user toggle the Blog view to Events view by selecting “Events” on Navigation Bar. It is located under the Navigation bar and above Footer.
• Backend Service Dependencies: Meetup.com
• Capabilities:
  1. Header:
  2. Is named “Upcoming Events”
  3. Is left-aligned
  4. Two rows and three columns of events until reaching “Load More” button.
  5. Column will remain three rows.
  6. Event images are static fed via Meetup API. //TODO
  7. Event name is featured directly on the image, horizontally-bottom and vertically center-aligned. Clicking on Event Name navigates user to the Event website (Meetup.com).
  8. Event Description
  9. Featured below the Event image
  10. Word Limit //TODO
  11. Aligned to the image width
  12. The contents are fed through Meetup.com
  13. Date/Time is also fed through Meetup.com
  14. Featured at the bottom-left of each event.
  15. Share Call-to-Action Arrow
  16. Featured at the bottom-right of each event.
  17. On hover over, dialog opens to suggest sharing the event link via Facebook or Twitter.
  18. User clicks on the Facebook or Twitter icons in order to share.
  19. Clicking on either icons will open a new pop up window.
  20. Navigates to a user’s Facebook or Twitter accounts; or
  21. Login page if not logged in.
  22. Images are center-aligned within each event field.
  23. Description texts are left-aligned within each event field.
  24. Initially, no more than two more rows of events per page should be displayed until user clicks on “Load More” button.
  25. Load More button
  26. Is center-aligned within the component.
  27. On click, two more rows of events will load.
  28. If there are Three or less events left to load, only one more row will be loaded.
  29. Hover over function is not active on the button.
  30. Events are ordered chronologically (determined by Date/Time).
  31. Upcoming events with closer dates will be on the top. //TODO
  32. Events page design complies with the Styleguide (url) standards.

Blog

• Description: Blog page will be displayed when user select the “Blog” on the Navigation Bar. It is located under the Navigation bar and above Footer.
• Backend Service Dependencies: WordPress
• Capabilities:
  1. There is no header for Blog view.
  2. Two rows and three columns of events until reaching “Load More” button.
  3. Column will remain three rows.
  4. Blog images are static, fed via WordPress API. //TODO
  5. Each blog field contains an image, title, author, and date.
  6. Blog title is featured directly on the image, horizontally-bottom and vertically center-aligned.
  7. Social icons (Facebook/Twitter) displayed on the top-right of each blog image.
  8. User clicks on the Facebook or Twitter icons in order to share blog link.
  9. Clicking on either icons will open a new pop up window.
  10. Navigates to a user’s Facebook or Twitter accounts; or
  11. Login page if not logged in.
  12. Blog excerpt/summary is located below each blog image.
  13. word limit //TODO
  14. Blog excerpts/summaries are fed via WP API //TODO, 2 sub-questions
  15. “Read More” and an arrow
      1. Located at the left-bottom of each blog field.
      2. Clicking on either assets will take to the blog details page
      3. It will navigate on the same window/tab //TODO
  16. Images are center aligned within each blog field.
  17. Description texts are left-aligned within each blog field.
  18. Two rows and three columns of events until reaching “Load More” button.
  19. Column will remain three rows.
  20. Load More button
  21. Is center-aligned within the component.
  22. On click, two more rows of blogs will load.
  23. If there are three or less blogs left to load, only one more row will be loaded.
  24. Hover-over function is not active on any of the assets on the blog page.
  25. Blogs are listed and ordered chronologically 1 .most recent post at the top, oldest at the bottom.
  26. //TODO Tagging - label - through WP? clarify what it impacts, etc.
  27. Blog page design complies with the Styleguide (url) standards.

Blog Details

• Description: Blog details page will contain the Hero-banner, Blog content, Social icons and other sharing methods.
• Backend Service Dependencies: WordPress API
• Capabilities:
  1. Hero banner: featured image on the blog page becomes the hero banner image.
  2. Image sizing //TODO
  3. Includes Blog title, author, and date.
  4. Blog content is featured below the banner.
  5. Image - location could be determined by Content Manager //TODO
  6. Caption fed via WordPress API.
  7. SubHeadline is fed via WordPress API.
  8. Share/Social Icons:
  9. Icons are located at the left-top by the blog content, vertically oriented.
  10. Facebook and Twitter icons
      1. User clicks on the Facebook or Twitter icons in order to share the blog link.
      2. Clicking on either icons will open a new window.
      3. Navigates to a user’s Facebook or Twitter accounts; or
      4. Login page if not logged in.
  11. Clicking on the mail icon will open a new window to open user’s email.
  12. Clicking on Print will open the Printing console to print the blog in PDF format.
  13. Icon sizes are responsive to the length of the content.
  14. Leave a comment //TODO
  15. Sign in needed via Social Network; or
  16. Leave comment directly on the details page:
  17. Leave comment form is located under the blog, followed by “Post” button.
  18. comments will be displayed under the blog.
  19. There will be no hover-over function on the blog details page.
  20. Blog details page design complies with the Styleguide (url) standards.

[saimatsumoto]

Will close this issue as soon as getting one review at the least.

[thescientist13]

Taking a look thought, and overall looks very comprehensive! Some general thoughts:

1. Should we have more descriptive name for these components instead of just Events and Blog? How about Events / Blog List? or something similar? (I see it's called a Table in the tickets. Let's just ensure consistency across our usages)
2. we don't have an events or blog page (yet). We do have a Home page though. I think we should re-word to remove page, in examples like this:

   Events ~page~ will be displayed when user navigates to the ~landing~ Home page; or when user toggle the Blog view to Events view by selecting “Events” on Navigation Bar. It is located under the

3. For backend services we should reference the services that our build / exposed to clients for this project. So for the above it would be Events and Blog APIs, respectively> Backend Service Dependencies: Meetup.com. There are multiple references to these external services throughout, so let's keep it closer to home and reference the services that are specifically being built for this project

   Backend Service Dependencies: ~Meetup.com~ Events API

[saimatsumoto]

Thank you! @thescientist13

1. Sounds great, will update the name to Events List and Blog Posts (FE ticket for Event Table was renamed as well).
2. Updated - removed "page" from respective contents
3. Noted, will do!

Application Design

[saimatsumoto]

Once below is completed, this issue will be closed.

• [x] Images for each component to be added by 10/24

[thescientist13]

@saimatsumoto As the styleguide is its own task, I don't think it should be a dependency here per se? That said, adding the images does seem appropriate.

[saimatsumoto]

Done - will close this issue upon review @thescientist13 @ekrasner1 @kpisano

Application Design