Low/Mid Fidelity Website Wireframes

[lrchang2]

Dependencies

#36
#77
#102

Overview

We need to develop and test low fidelity wireframe prototypes of the website to know how the website structure will be.

Low Fidelity = sketches, grey-scale
Mid Fidelity = clickable prototype, color, a version of content

Action Items

• mobile version
  • Use information architecture Website Information Architecture  #36 to prototype low-fi web pages
    • develop components first:
      • nav bar
      • footer
      • buttons
  • Do iterative rapid user testing on low-fi wireframe to confirm the functionality of the website structure Usability Testing for Low/Mid Fidelity Prototypes #88
  • apply edits and move on to high-fi wireframes High Fidelity Website Wireframes #41
• develop desktop version based on mobile version
  • develop components first:
    • nav bar
    • footer
    • buttons

Resources/Instructions

[melissamurphy]

Card sort at today's team meeting: -->Figjam of Card Sort, based on Competitive Analysis must-haves

For more information, see #77 Card Sort for website

[melissamurphy]

Sitemap in Figma based on above Card Sort

@henrywang7 @mathhomework @miguel-hugo @lrchang2 @abryant35

[melissamurphy]

@henrywang7 @miguel-hugo @mathhomework
"Join Waitlist" CTA should now be part of the MVP [moved in from 'For Future Versions']. Please add to wireframes. The Sitemap will be the source of truth as further decisions are made.

[abryant35]

@mathhomework
Please add update using this template (even if you have a pull request)

Progress: "What is the current status of your project? What have you completed and what is left to do?"
Blockers: "Difficulties or errors encountered."
Availability: "How much time will you have this week to work on this issue?"
ETA: "When do you expect this issue to be completed?"
Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #access-the-data channel.

[mathhomework]

Progress: It is mostly completed. I will talk with Miguel tonight to go over his mobile wireframes. Left to do: Getting feedback from everyone else on the team.
Blockers: Content seems to still be adjusted.
Availability: A couple hours
ETA: Dependent on how everyone feels about the content.
Pictures: Located here: https://www.figma.com/file/nS5IqnutUT2FuPwwJObHaY/Access-the-Data-Main-Figma?node-id=2%3A10.

[ElizabethWarninger]

Including a link to #88 - Usability Testing for Low/Mid Fidelity Wireframes

[lrchang2]

mid fi version is done and can be seen here and usability testing #88 has be finished. closing issue

[KaylenaN]

reopening issue to add desktop version of mid-fi

[KaylenaN]

Progress: About finished with the Hi-Fi wireframes. All that's left to do is edit some font sizes. Miguel will also look it over and edit what needs to be done.
Blockers: Had some difficulties with colors but Joanna helped me out with that.
Availability: A couple hours.
ETA: If not tonight, tomorrow (12/02).
Pictures: https://www.figma.com/file/nS5IqnutUT2FuPwwJObHaY/Access-the-Data-Main-Figma?node-id=2%3A16

[ExperimentsInHonesty]

Hack for LA should not appear in the partners section. it should be at the bottom of the footer. See the footer for the 100automations.org site https://100automations.org/ it doesen't have to look exactly like that, but lets talk about your proposal.

[ExperimentsInHonesty]

Make Government Data your Superpower is not exactly right. It's really Using Government data. So maybe try some other options to make it clearer. Off the top of my head... not saying to use these words but let's just make sure it's clear.
Make using government data your super power
Using Government Data can be your super power
Make accessing Government Data your super power

[ExperimentsInHonesty]

Lets use the color city logo https://www.pngfind.com/mpng/hJbwwmR_city-of-los-angeles-crest-transparent-city-of/ the partners section

[KaylenaN]

Progress: I need to update and use the components. Add images as well as fix font sizes. Also, everything Bonnie mentioned.
Blockers: No blockers or errors encountered.
Availability: I'll have about 4 hours this week to work on this.
ETA: I am hoping by the end of this week.
Pictures: https://www.figma.com/file/nS5IqnutUT2FuPwwJObHaY/Access-the-Data-Main-Figma?node-id=2%3A16

[lrchang2]

@KaylenaNguyen
Please add update using this template

Progress: "What is the current status of your project? What have you completed and what is left to do?"
Blockers: "Difficulties or errors encountered."
Availability: "How much time will you have this week to work on this issue?"
ETA: "When do you expect this issue to be completed?"
Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either:

1. ask for help at your next meeting
2. put a "Status: Help Wanted" label on your issue and pull request
3. put up a request for assistance on the #access-the-data channel.

[KaylenaN]

Progress: Made changes based on what Bonnie mentioned. Still need to add images and the Hack For LA logo in the footer.
Blockers: No blockers or errors.
Availability: I'll have a few hours this week. If there are major changes or updates, I'll do as much as I can. However, if anyone can help if I can't get it done by this weekend, that would be great.
ETA: Hopefully, we can go over what images we should use and where. I think that's the biggest thing right now.
Pictures: https://www.figma.com/file/nS5IqnutUT2FuPwwJObHaY/Access-the-Data-Main-Figma?node-id=2%3A16

[lrchang2]

new website that needs to be applied to wireframes can be found here.

[lrchang2]

closing because focus has shifted to high fi