Design mobile version of new homepage

[kristine-eudey]

Dependency

#2190

Overview

We need to design a mobile version of the redesigned homepage so that the page can be launched.

Action Items

• Refer to findings and assessments from Perform site audit of mobile navigation #2190
• Design a mobile version of the redesigned homepage following the current mobile design standards in the design system and using design system components whenever possible.
• Communicate with developers throughout the process to ensure design solutions are technically feasible.

Resources/Instructions

Figma - Homepage Redesign
Figma - Design System
NN Group - Basic Patterns for Mobile Navigation - A Primer
UX Booth - The Rules for Modern Navigation

[abenipa3]

Progress: Created mobile mockups for the Technologies and CoP sections. [Figma Link]
Blockers: N/A
Availability: 5
ETA: Completed - Looking forward to feedback.
Pictures:

Technologies Section

Communities of Practice Section

[janieche]

1. Progress: Created updated mobile mockups for the Join Us, Wins, and Get in Touch sections. Figma Link
2. Blockers: N/A
3. Availability: 3
4. ETA: Updates from feedback completed - looking for

additional feedback. 5. Pictures:

[abenipa3]

Progress:

• Applied feedback from our last meeting.
• Updated mockups for Community of Practice and Technologies according to our latest Desktop Updates.
• Figma Link

Blockers: Struggled with font sizes of the numbers under Technologies.

Technologies Preview

Availability: 3

ETA: TBD - Definitely looking forward to more feedback!

[github-actions]

@janieche, @alyssabenipayo, @ahoang94

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

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

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and 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 #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, September 28, 2021 at 12:02 AM PST.}

[ahoang94]

1. Progress: Created updated mobile mockups for the hero banner & Program Areas sections, including several different carousel options. (Figma Link)
2. Blockers: N/A
3. Availability: 3
4. ETA: TBD; awaiting feedback come Thursday's meeting

[abenipa3]

Progress: Created new mockups for technology and CoP sections.
Blockers: N/A
Availability: 2
ETA: TBD; awaiting feedback.

Technology

Communities of Practice

[github-actions]

@janieche, @alyssabenipayo, @ahoang94

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

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

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and 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 #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, October 5, 2021 at 12:02 AM PST.}

[abenipa3]

Progress:

• Our team reviewed full mock-ups yesterday during Design Meeting.
• Action Items are as seen in HfLA: Design Meeting Agenda #2106 (comment)

Blockers: N/A

Availability: 2 (Alyssa)

ETA: TBD

Notes: Downloaded free mobile app called Figma Mirror to test visuals of our full mock-up. (Can't create previews at the moment because the app keeps disconnecting on my phone. Recommending our team to try it in case it works.)

[kristine-eudey]

Version for team discussion here

[kristine-eudey]

Hi @alyssabenipayo @ahoang94 and @janieche! I made some tweaks to the mobile homepage as per the feedback from Sunday's meeting, along with incorporating changes based on feedback from a meeting I had today with Bonnie and the Product team. Please take a look at the updated version here and let's discuss at Thursday's meeting. I made notes on the Figma describing all the changes.

[abenipa3]

Hi @kristine-eudey! I saw the changes to the mobile homepage - the updates look great on the Technology and CoP sections! Thank you!

[kristine-eudey]

@arghmatey I have a question about the feasibility of using a different version of the CoP gradient box for the mobile version:

• In effort to make the design of this section more cohesive and translate better to a side-scroll, I'm wondering if it would be possible (and if it would be a huge amount of additional work) to use this version for mobile?
• CoP names inside the colored box, rather than outside the box as they are on the desktop version
  

[arghmatey]

@kristine-eudey I should be able to implement that with little effort. I'll have some time to work on this on Sunday, and will keep you posted if I run into any problems. Thanks!

[kristine-eudey]

Great, thank you @arghmatey! Final design for development can be found here: Homepage - Mobile Design. The design portion of this issue is done so I'll close this issue. @arghmatey or @abuna1985 , if you need to make a dev issue or anything for this, feel free to take it from here. Thanks!

[ExperimentsInHonesty]

The Development issue is #2317