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

• [x] Review the other prototypes
• [x] Design low-fidelity wireframe that mirrors that design but is specific to hack night information
• [x] Draft copy for Hack Nights page
• [x] Revise and proof copy for page
• [x] Design high-fidelity mockup
• [x] 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]

• [x] @ExperimentsInHonesty will provide images for the location cards
• [x] @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.

[ExperimentsInHonesty]

@leestella748 is going to make a mobile version mockup.

[leestella748]

Here is the mobile version: https://www.figma.com/file/0RRPy1Ph7HafI3qOITg0Mr/Hack-for-LA-Website?node-id=705%3A999

[ExperimentsInHonesty]

@leestella748 is going to rethink the mobile version to make it less scrolly

[leestella748]

Here are two versions: https://www.figma.com/file/0RRPy1Ph7HafI3qOITg0Mr/Hack-for-LA-Website?node-id=887%3A1

The first version uses separate tabs, which allows users to switch between "Events" and Locations" without so much scrolling. However, I'm not sure if clicking on a tab will cause the whole page to reload or if we can have both tabs load on open.

For the second version, each section can be collapsed or expanded.

[leestella748]

Mobile wireframes: https://www.figma.com/file/0RRPy1Ph7HafI3qOITg0Mr/Hack-for-LA-Website?node-id=961%3A181 Mobile prototype: https://www.figma.com/proto/0RRPy1Ph7HafI3qOITg0Mr/Hack-for-LA-Website?node-id=926%3A2438&viewport=-2382%2C-8117%2C0.29358410835266113&scaling=min-zoom

[ExperimentsInHonesty]

@leestella748 we get rid of the white line at the bottom before the footer (on the mobile)?

[leestella748]

@ExperimentsInHonesty Done. However, the mobile version of our Getting Started page has the white line, so if we want to stay consistent we should have someone go back in and reduce the margin.

[ExperimentsInHonesty]

@leestella748 indeed it does. I’ll put removing that in a new issue.

[ExperimentsInHonesty]

@leestella748 ok, so I was wrong to say to remove that white section, because its literally everywhere (all the project pages), etc. Sorry! Can you put it back?

[leestella748]

@ExperimentsInHonesty Done! Anything else that you'd like changed before it's ready for the dev team?

[ExperimentsInHonesty]

Nope that it. I’ll find out who is looking for something good. And I’ll go to the prioritized backlog and make sure it’s actually prioritized so you can start on next!

[harishlingam]

@leestella748 @ExperimentsInHonesty This looks great! If I could add one minor comment, I would reduce the weight of font in the white drop down buttons to medium (i.e. "Meetup Events" "Online Project Team Meetings").

[leestella748]

@harishlingam Done!

I'll put links here for the dev team: Desktop & mobile wireframes: https://www.figma.com/file/0RRPy1Ph7HafI3qOITg0Mr/Hack-for-LA-Website?node-id=1028%3A2382 Mobile prototype view: https://www.figma.com/proto/0RRPy1Ph7HafI3qOITg0Mr/Hack-for-LA-Website?node-id=926%3A2438&viewport=-459%2C-3206%2C0.1227351650595665&scaling=min-zoom

[leonelRos]

I did not have a lot of time this past week to work on it. So, I do not have any updates.

[ExperimentsInHonesty]

@leonelRos please provide details about how much availability you will have in the coming week. And ETA.

Generally the format is

1. Progress
2. Blocks
3. Availability
4. ETA

[leonelRos]

Progress: only worked 10% of it Blocks: time-limited. Availability: Wednesday to Friday ETA: Sunday 06-21-2020

[leonelRos]

Progress: working with the latest mock Blocks: time-limited. Availability: Wednesday to Friday ETA: Tuesday 06-23-20

[leonelRos]

Hey team here is my progress

Progress: working on the last part where I need to populate the projects for each hack for LA location. The page is 90% ready and will be posting images in the issue number. Blocks: limited time. Availability: Wednesday to Friday ETA: Tuesday 06-29-20

[leonelRos]

Progress: working on styling and adding mobile versions. Blocks: limited time. Availability: Wednesday to Friday ETA: Sunday 07-05-20 end of the day.

[leonelRos]

--Mobile version

Will show live version!!!!

[alexandrastubbs]

@leonelRos a helpful tool to capture your full screen is this google chrome extension

[alexandrastubbs]

@leestella748 will update Figma to show what happens when the 'our locations' is dropped down. @leonelRos will update spelling for 'Hack Nights'.

[leestella748]

@leonelRos done

[leonelRos]

Thanks, @leestella748. I refactored most of the styling and now the page looks like that.

[leestella748]

@ExperimentsInHonesty During the breakout room with Alex and Yuiko, we also discussed the hack nights mobile page. The original plan was to keep the “see our locations” dropdown within the yellow COVID-19 banner, but we agreed that it made more sense to keep the items separate. I talked to Leo as well since he’s working on the ticket, and he agreed and said he actually already has a second version that reflects this.

Clickable prototype: https://www.figma.com/proto/0RRPy1Ph7HafI3qOITg0Mr/Hack-for-LA-Website?node-id=1712%3A3408&viewport=-868%2C-3622%2C0.13307054340839386&scaling=min-zoom

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

[alexandrastubbs]

@leestella748 some feedback to share after chatting w/ Bonnie. Happy to voice over live on Sunday.

• Given the importance of the COVID message and wanting to make sure that individuals understand that the locations are not accessible right now, we would like the locations pill to live within the yellow and upon expansion, want the yellow background to expand with the content that it sits behind
• Would like the different days to be separate bubbles and not merged together in a single white bubble
• OK with 'See our locations' being a separate bubble, and then all of the white bubbles can be in front of the yellow (suggesting their connection to each other and the location CTA)

[alexandrastubbs]

Discuss name for page in today's meeting.

[alexandrastubbs]

Name to be changed to Events.

[leonelRos]

Hey guys I didn't have much time to finish the new mock up this week but I will be working on it all day today.

Progress: web and mobile version, need to add functionality Blocks: time-limited. Availability: Wednesday to Friday ETA: 07-28-20

[leonelRos]

Hey @alexandrastubbs @ExperimentsInHonesty, I finished the page and it is ready for PR. I took screenshots of every version. Feel free to comment or give feedback if anything needs to change.

[alexandrastubbs]

@leonelRos when are you available to review this live? We have some questions we would like to address.

[leonelRos]

@alexandrastubbs I should be able to meet up today around 7 or 8 PM PT. Let me know if that is ok with both, if not, we can meet on Tuesday at developers meeting.