Prototype the hackforla.org home page

[ExperimentsInHonesty]

Overview

Update design of Home Page and revise global elements. A new Projects page is to be created and the current Projects section of the home page will be redesigned.

Action Items

• Review the other prototypes
• Create wireframe for updated home page
• Create mockup for updated home page

Resources/Instructions

Lucid Chart
https://www.figma.com/file/0RRPy1Ph7HafI3qOITg0Mr/Hack-for-LA-Website?node-id=352%3A205
Prototype the Projects page #156
Prototype the Project-specific page #157

[ysjiang18]

https://www.figma.com/file/zwhb0eT9YjHYwxcfoxLa7s/HackforLA-Website?node-id=0%3A1
Please click on the link to go to Figma file to comment. Once we can confirm on the wireframe, then I will continue on with the prototype.

[harishlingam]

This wireframe looks to be a great starting point. Selena will be revising it after reviewing the collected qualitative UX research.

(1) Not sure how much press HFLA has gotten to date. If its threadbare, it might be better to omit such a section for now until the organization accrues more articles.
(2) I believe the sponsors would be better listed on a dedicated Donor page, which we're working on.
(3) This initial wireframe and discussion decided on horizontal carousel for project cards to provide visitors a high-level glance of activity, but this wireframe departs from that. I would love to hear the rationale for/against doing so.

[yuikomajima]

See this figma for design that swaps out the projects section with updated hero and upper sections. The mockup on the right side of this frame is an idea of how we could redo the entire home page. Needs further discussion, but something to get a conversation started.

[yuikomajima]

Added version where projects are shown as strips, and as tiles. Tile styles match with Stella's About Page card buttons.

https://www.figma.com/file/0RRPy1Ph7HafI3qOITg0Mr/Hack-for-LA-Website?node-id=1988%3A17906

[alexandrastubbs]

This is looking great! Bonnie & I changed the guide section back to the 'see all' because the guides are all live now. We also updated the roles. Some other feedback:

1. We don't have an image for getting started module, so let's leave the header the way it is currently on site. We can lead directly into the projects section
2. For projects, just need to find images for 4/8 of them.
3. For the technologies, we think it would be better to group the technologies as follows:
   • Database
   • Hosting platform
   • Backend
   • Mapping
   • Mobile
   • Frontend

We will have a developer working on coming up with the URL for each of these
4. We don't have accomplishments yet. Let's hide it for now and add later once it is ready.
5. Center the Read About Us section

The current connect section of the homepage is not represented on the new mock up. Is it going to live on the About Us page or should it be on the homepage? Or another option?

[alexandrastubbs]

We also need to add a section under projects for 'communities of practice'. The current communities practice are: 1) Data Science and 2) Ops. We are starting up three more for 1) UI/UX 2) Product/Project Management and 3) Development.

This will link to #678

[rblaz001]

@yuikomajima Here is a spreadsheet with the technologies currently used across projects
project_technologies_updated.xlsx

[yuikomajima]

Made the changes 1-5 in figma. Waiting on technology categories to create the technology cards.

[alexandrastubbs]

Spreadsheet with technologies in team drive: https://docs.google.com/spreadsheets/d/146oHxCjQrmzXnj6luRgdnFaBc-2pNEr2PCxfmmvLaZU/edit#gid=0

[ExperimentsInHonesty]

@Excursionpreneur please look up each of the technologies in the spreadsheet here and annotate type: https://docs.google.com/spreadsheets/d/146oHxCjQrmzXnj6luRgdnFaBc-2pNEr2PCxfmmvLaZU/edit#gid=0

[alexandrastubbs]

@yuikomajima

1. Can we swap development image with the alt image you have to the right of the zoomed-in code?
2. For mobile, can we make the guides smaller and only display two (without copy block description)? They can sit next to each other, the way that the technologies and roles do. We would like to keep 'Getting the Most out of Github' and 'Building a Survey Reporting Dashboard'
3. We noticed you put a red line over the green line in the screenshot of the mayor's quote? Is that meant to signify we should remove the line? We would prefer no line.

[yuikomajima]

Above changes made in figma.

[ExperimentsInHonesty]

@yuikomajima I have asked Chali to provide a color version of this image,

so we can use it as a UI/UX pic. But in case she doesn't or we don't like it, could we use this
https://commons.wikimedia.org/wiki/File:Wikimedia_Hackathon_2017_Vienna_9290w.jpg

[alexandrastubbs]

Need to assign someone to gather the logos for the technologies and add them to the google drive: https://drive.google.com/drive/u/1/folders/1cJgISxNCoZnV2zLMwvZeFxDWSd14zWFa

[alexandrastubbs]

We would like to add a section on the homepage that highlights our impact, something to the degree of 'See Our Impact". This would ideally link to 1) Completed projects and 2) Impact Areas (not created yet).

Dependency: #795

[christina245]

We need to come up with what happens if no results show up for a user's project search. Possibly "there aren't any projects that need your talents at this time, but these are the closest matches should your skills and availability change:"

@ashleylin1