Create a Hack Nights Page

[ExperimentsInHonesty]

Overview

We are going to move to a model where the hack nights have their own pages when we go back to meeting in person. In the meantime, we need a hack nights page, that says what the status of the hack night is, while maintaining our promotion of the amazing had nights we had.

Details of what the page should contain:

• The images that used to exist on the homepage
• list of projects and icons of those projects by location
• Maybe - links to our last in person meetings via meetup - maybe
• Encouraging people to signup for meetup

Action Items

• Review the other prototypes
• Design low-fidelity wireframe that mirrors that design but is specific to hack night information
• Draft copy for Hack Nights page
• Revise and proof copy for page
• Design high-fidelity mockup
• Insert copy into finalized mockup
• Implement new Hack Nights page

Resources/Instructions

Copy: https://docs.google.com/document/d/1wVbTCuALfUs02qVahkwfAoZ0BSQyYcp_TCbvja0hSrY/edit

Lucid Chart
Prototype the Projects page #156
Prototype the Project-specific page #157

[harishlingam]

From @leestella748:
I finally had time to work on the wireframe for the Hack Nights page and had a few questions: 1. Since we're designing a temporary page due to the coronavirus, should I include other online events such as Happy Hour?
2. Should I include the project team meetings schedule on the Hack Nights page, and if yes, is the posted schedule accurate? https://www.hackforla.org/project-meetings
3. I'll probably need photos of past events— is there someone I should reach out to/a folder for website-approved assets?

[harishlingam]

HI @leestella748, here are my thoughts on the above:

1. Yes, I would include these other online events on the page
2. I'd love to see this in wireframe. Probably makes sense to include, since we want as few clicks as possible to get users to information of interest.
3. Good question. I imagine we have some photos on file, but likely limited. Probably a good question for Bonnie.

[yuikomajima]

Here's the sketches we worked on today.

[leestella748]

@harishlingam @yuikomajima
Here is the wireframe transcribed onto Figma: https://www.figma.com/file/0RRPy1Ph7HafI3qOITg0Mr/Hack-for-LA-Website?node-id=153%3A139

Any feedback would be helpful!

[ExperimentsInHonesty]

Hi @leestella748 I have many thoughts about several of the designs. I looked them over last night, and I am still mulling. I will definitely have an opinion by then, but I have some questions for other people too. This might be one where we show some options to people outside. Thanks for coming up with so many different layout options. @harishlingam @yuikomajima

[harishlingam]

Hi @leestella748 not sure where you are with your wireframe, but feel free to link them here if you have any initial work that's available for review. Otherwise, no worries since I know we have more to discuss following on Bonnie's comment.

[harishlingam]

1. Progress - Discussed revisions to wireframe with Stella, Yuiko, Bonnie, and Harish. Decision on final concept made. Stella to produce high fidelity mockup based on results of earlier discussion. Created draft of copy for page and shared with @myastark for review and input.
2. Blocks - None
3. Availability - Throughout week
4. ETA - 5/2

[leestella748]

Hello, I would also like to get the original photos for each location card in order to design a more hi-fi mockup.

[leestella748]

@harishlingam @ExperimentsInHonesty @yuikomajima
Here is what I've worked on so far: https://www.figma.com/file/0RRPy1Ph7HafI3qOITg0Mr/Hack-for-LA-Website?node-id=381%3A214

1. I believe it makes sense to have the COVID-19 blurb up top, as it affects all of our events on the page. I also think it works best when spanned across the entire screen.
2. Illustrations vs icons?
3. I'm not sure where to get the original photos for each location card, so if someone could share them with me that would be great!

The first one on the left is most similar to what we discussed last time, but my favorite iteration is in the middle. Let me know what you think!

[ExperimentsInHonesty]

@leestella748 fantastic new designs. @harishlingam and I choose design #1 (on left), with the slight modification of adding the days of the week to the locations section, and ordering them this way
Monday - Westside
Tuesday - DTLA
Wednesday - South LA

[ExperimentsInHonesty]

• @ExperimentsInHonesty will provide images for the location cards
• @leestella748 will add the images
• @harishlingam and @ExperimentsInHonesty will review the copy

[ExperimentsInHonesty]

@leestella748 please make each of the project teams on the team meeting schedule be red underlined, then those will link to the projects.

[ExperimentsInHonesty]

Here is where the images are located: https://github.com/hackforla/website/tree/gh-pages/assets/images/hack-nights

[leestella748]

@ExperimentsInHonesty @harishlingam Here's the updated wireframe: https://www.figma.com/file/0RRPy1Ph7HafI3qOITg0Mr/Hack-for-LA-Website?node-id=369%3A212

[harishlingam]

Hi @leestella748 Bonnie and I had a chance to review the mockup. I took the liberty of making a few minor edits. Here is our feedback:

• Please make the days of week more prominent, since they look too small.
• In the Downtown LA Location section, you will note the grey containers that have been added to three of the projects. Please replicate for across all projects for all locations, and increase spacing between the rows of projects as appropriate.
• We've tweaked the top of the page to now show a screen grab of the referenced Ted Talk. Feel free to adjust the styling here if compelled.

For clarification, I've added comments to the Figma file.

[leestella748]

@harishlingam I made the changes: https://www.figma.com/file/0RRPy1Ph7HafI3qOITg0Mr/Hack-for-LA-Website?node-id=445%3A0

[leestella748]

@harishlingam @ExperimentsInHonesty
Let me know if there are any additional changes you'd like to see!

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

Prototype view: https://www.figma.com/proto/0RRPy1Ph7HafI3qOITg0Mr/Hack-for-LA-Website?node-id=545%3A2806&viewport=-4611%2C-10732%2C0.6133910417556763&scaling=scale-down-width

[ExperimentsInHonesty]

@leestella748 @yuikomajima @harishlingam - I made a few minor changes (added some text, etc). This is ready to send to development, so I will put this in the prioritized backlog.

[leonelRos]

Hey Team, I got the design as displayed in the figma file, I still working on the arrow vectors, it won't rotate as a commanded on my code, so still working on that!

[leonelRos]

Hey team, I still debugging the arrows. Susan and I worked on it last Thursday but we could not figure it out. This is the error I am getting:

1. The page looks fully complete.

2.After going to mobile version and clicking the arrows for the drop down and go back to full desktop page we see the arrows in those two bubble cards.

I will try to make sure this is done by developers meeting!

[ExperimentsInHonesty]

@leonelRos Let's go ahead and push the page and fix the problem after. Also, we could use the live page to ask for help in the general channel which might get some more developers on the project.

[leonelRos]

@ExperimentsInHonesty OK, I will create the PR and assign @ye-susan to review it.

[alexandrastubbs]

@leonelRos We just looked at the pull request - who/what is the blocker now?

[alexandrastubbs]

@leonelRos any updates on this?

[ExperimentsInHonesty]

@cnk will fix meeting times not loading and add timezone lang

Issues that need to be looked at that are unassigned currently

1. The top white header needs to fill the page like the toolkit page does
   https://www.hackforla.org/hack-nights-page
   https://www.hackforla.org/toolkit
   

2. Why is there any pink at all

3. The text for the video is not responsive and is merging with the about text
   

[cnk]

I renamed this so the url will be hackforla.org/hack-nights and made the meeting times section work. Also added the Time Zone note from the current meeting-times pages.

[ExperimentsInHonesty]

@drubgrubby will take care of the remaining issues here: #403 (comment)

[drubgrubby]

I made the fixes mentioned in #403 (comment) .

1. The white background fills the header and the "pink" is gone.
2. The text for the video is now responsive and doesn't merge with the about text.
3. In the process, because there was a header-container tag that was being used from getting-started-page.scss, I created an ../elements/_containers.scss file and put the header-container tag there so it can logically be used on whatever page wants it now. (This was done in consultation with @cnk )

[drubgrubby]

I have not made a pull request on this because the mobile version doesn't look quite right yet. I'm not sure if I should include that in the same pull request, or merge this and make the mobile version a separate issue/PR.

Option A: Do the fixes to the mobile and include it in the same PR
Option B: Do a PR for the current work and make a separate issue/PR for the mobile site.

[cnk]

Either is fine. If you don't have a lot of time, perhaps pushing this now. Even without mobile fixes it is certainly better than the current version.

[ExperimentsInHonesty]

#748 also related