High Fidelity Website Wireframes

[lrchang2]

Dependencies

~#37~ ~#102~

Overview

We need to develop and test high fidelity wireframe prototypes of the website to help validate the design of the website and be able to pass on design to developers to use as their guideline for website development.

high fi = color, real content

Action Items

• [ ] mobile version
  • [x] Develop low/mid-fi website wireframes #37
  • [x] Build out high-fi wireframes
  • [ ] Color correct high fidelity panels to correspond with changed header and footer
  • [ ] Do iterative user testing of high-fi wireframes to confirm usability and structure of website
• [ ] desktop version
  • [x] Develop low/mid-fi website wireframes #37
  • [ ] Build out high-fi wireframes
  • [ ] Color correct high fidelity panels to correspond with changed header and footer
  • [ ] Do iterative user testing of high-fi wireframes to confirm usability and structure of website
• [ ] define user flow and calls to action for all pages by section and components of wireframes
• [ ] Perform a competitive audit of sites using CKAN to identify elements that will need to be incorporated into the new iteration of the high fidelity prototypes.

Resources/Instructions

• Low-Fidelity vs. High-Fidelity Prototyping article from Adobe XD
• figma with high fidelity mobile

[lrchang2]

@miguel-hugo 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."

[lrchang2]

@miguel-hugo 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.

[lrchang2]

add suggested edits to all versions

• Hack for LA logo
• update city of LA logo to colored one
• update copy --will share soon

[miguel-hugo]

Progress: Finished applying current design and creating components to mobile wireframes. Need to finish carousel on landing page, update components, and build user flow documentation. Blockers: Need finished copy to update text Availability: Around 3-5 hours ETA: Depends on the status of the copy, but most likely within 2 weeks

[lrchang2]

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

[miguel-hugo]

Progress: Finished updating final copy of text, finished carousel for mobile hi-fi, and updating layout, interactions, and components. Under "Updated Version: December 2021" in Hi-Fi Wireframes: Mobile" Blockers: Need feedback on edits to determine if finished. Also need to start on user flow documentation soon. Availability: Around 3-5 hours ETA: Depends on feedback provided, but in total, should be finished within one week.

[lrchang2]

finished high fi wireframes

[lrchang2]

reopening to update wireframe colors

[deepamohan22]

@lrchang2 @KaylenaNguyen Progress : Fixed the spacing and alignment issues on Hi fi wireframes (Desktop ). Blockers : No ETA : 6 weeks.

[lrchang2]

@deepamohan22 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
3. put up a request for assistance on the #access-the-data channel.

[deepamohan22]

@lrchang2

I have completed the tasks( fixed the spacing and alignment issues on Hi Fi Desktop) assigned to me by Keylena. I think Kevin forgot to remove me from here. I got another issue to work on from Yesterday's meeting.

[lrchang2]

great, closing issue

[mxajPrice]

Copy of this version of the mobile site design: