🖼 Mockup: Home (Design refresh)

[jjjaney]

Proposed redesign of the index page (other pages to follow)

• Pages have now been reduced to Learn, Amplify, and Give
  • Learn used to be educate
  • Amplify used to be elevate
  • Give used to be circulate
  • Communicate content will be collapsed into Amplify

---

[jjjaney]

Design assets

• Learn
• Amplify
• Give
• Next arrow (embedded in each section's body text on the index page)

Fonts

I'll look for open source fonts but generally let's stick with...

• demi-bold for the title
• medium weight for the navigations (including linked titles within each section's body text on the index page)
• regular weight for body
• regular weight for sub-nav links

Colors

• Menu navigation, footer nav #cac0b8

• Title/subtitle bg, subfooter nav #262633

• Learn #f5bf6a

• Amplify #121472

• Give #789b78

• Section text areas #e1e1e1

• Body text #313131

[manishapriya94]

This is really great! Thank you so much @jjjaney !! Some quick questions:

• For the divs, did we want to put them in separate pages or as with this issue #77: allow the user to access individual page functionalities from home itself?

• If we wanted to make some quick edits (swap blue for red), where is the best place for that? Or are these vectors supposed to be guidelines for Eddie?

Can't get over how clean this is, thanks again!!

[jjjaney]

• I would advise against doing #77 because you're adding more dev work into a simplified layout which should just be a standard grid system.
  • The layout being proposed here is just an easy grid system that you can mock up using CSS grid and FlexBox which means that it'll be quick and we can focus on the other (more complicated) components, like fleshing out learn.
  • Adding all content in each section is going to be a confusing user experience, does this mean that searching for resources and emailing your reps will also collapse within the sections WITHIN the index? This is overcomplicating a user's experience.
  • If this is a strong preference, I would move this to a later phase
• I'd go with the proposed colors. I tried a few from the original website and they did not really mesh well together with the reduced number of pages / sections, and more colors can be introduced if you add more pages/sections.
  • I haven't uploaded the creative source files, so there isn't anywhere to update/modify them unless you let me know (or you edit the svgs yourself)
  • What I provided in the repo are vector images (svg) that will scale without losing quality, so I'd focus more on the actual layout and use the images as placeholders (if not just ship with them) since they're already available and a higher quality than what's existing.

Let's all meet sometime this week (everyone involved in design and direction) then make a decision on moving forward with whatever deliverables that are priorities before the election deadline.

[manishapriya94]

@jjjaney Awesome, will have this implemented for when we meet Wednesday!

[jjjaney]

I wanted a quick reference for everything (especially because I've been a little out of it these past several days).

[jjjaney]

I also want to point out the ordering of the sections. Here is my proposed/recommended ordering and why I'm suggesting it:

Order

1. Learn
2. Amplify
3. Give

Explanation

• Give shouldn't be first because you haven't provided any guidance or user flow for the visitor to understand what the website is about to be assume they're going to know what they're donating right away.
• Amplify shouldn't be first because you need to be able to understand and be educated about an idea or problem before you share or amplify it.
• Learn needs to be first because it makes the most sense for the user flow throughout the website. The user first learns what it means to be an ally > amplifies themes and messages of advocacy and allyship > donates money or volunteers for Ally.Guide moving forward.
  • I understand that this section is not yet available, but this is where we can SHARE THE VISION, through a concise but powerful message about allyship learning and paths
  • Further, share outcomes visitors can expect from the learning paths, the timeline they can expect to move forward, and share how we're currently developing the curriculum as part of the unprecedented times we're experiencing.

Important Regardless of the order we're going with, it should be consistently ordered throughout the site for a good user experience (this means the same order in the navigation, body content, and the footer)

[manishapriya94]

Hey Janey! Understand your concerns! If we reference the slides for Phase 1, A lot of this education happens for each section within the page. Give explains why riots are important to support. Amplify explains which parts of your representatives are responsible for what.

In this first phase, we are reactive and a lot of users will know the key issues so give/amplify being prioritized will help them plug in. Also, this phase focuses on having cartoon strips with each letter to illustrate.

Wondering if we’re visualizing Learn in similar ways? Learn is mostly a library in this moment outside of explaining allyship and the consistence of police brutality. Is that the element we’re hoping to refine?

When learn has the curriculum (learning paths) and our users start expanding to persona 1 (less aware/ambivalent), it makes sense to direct folx there first?

In this phase, we want to focus on functionality of the impacts (giving, amplifying) and education be embedded, education as it’s own in Learn is then a second step/enhancement?

[jjjaney]

• @mahrsbar is there anything I can do to move this forward?
• @manishapriya94 what's going on with prioritization?
  • Some content is getting stale such as "remove forces from portland" and a few other key event links

I've been unable to mockup a few of the other pages (work has been demanding) but not sure what's preventing this from moving forward as we approach our initial election date deadline.

[manishapriya94]

Hey Janey

The Portland content is being updated to include the use of forces currently and adding for Milwaukee

CI/CD did slow this down but we’re meeting today to move all the changes into production from the dev branch.

Moving created some slowness on my end, will have everything caught up by Tuesday morning and send out an invite to sync

Does Thursday or Friday evening work for everyone?

On Mon, Aug 24, 2020 at 8:38 PM Janey notifications@github.com wrote:

• @mahrsbar https://github.com/mahrsbar is there anything I can do to move this forward?
• @manishapriya94 https://github.com/manishapriya94 what's going on with prioritization?
  • Some content is getting stale such as "remove forces from portland" and a few other key event links

I've been unable to mockup a few of the other pages (work has been demanding) but not sure what's preventing this from moving forward as we approach our initial election date deadline.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/Ally-Guide/ally-guide-app/issues/80#issuecomment-679435483, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACFYIKY2EZA57O7ZT4Z6KTDSCMBXRANCNFSM4PSYMPKQ .

--

[image: photo] Manisha Priyadarshini GitHub | 415-906-5308

San Francisco, CA | manishapriya94@GitHub.com manishapriya94@github.com | GitHub.com/Business https://t.yesware.com/tt/cd6a4912d994e77cc4806e380b583f2060bc24af/70ad16d2c073d0fab623ba3787c2d793/6f83d83691e96e28139e87e5da21b569/github.com/business | schedule time to connect https://calendly.com/manishapriya94

[teenage-witch]

Sorry I haven't had time to help polish up any design stuff until now (work has also been... a lot) ! I can probably take a visual design pass on Wednesday night and hand it off to y'all to decide if any of my suggestions are helpful or not! I prob can't make any meetings this thurs/friday though!

[mahrsbar]

Dev progress:

• [x] Home page layout with active links and mobile friendly
• [ ] Update fonts @teenage-witch did you have suggestions here from your prior research?
• [ ] Navbar - add hover state, decrease padding, issue on mobile
• [ ] Footer

[manishapriya94]

@mahrsbar would it be possible to ss what you're seeing for navbar to create as an issue? Could be good beginner ones for people onboarding!

Some updates:

• We've partnered with Lob and MAIL functionality is happening this week!!! Now to subsidize these letters even more...with Lob for Good
• CI has been built in!
• And a cool action that takes input from forms is being cleaned up Wednesday (more accessible for organizers to submit campaign letters for Amplify) into issues (more accessible for our devs/copy folx to interact with)

Product path forward:

• Worked with Mala to create some surveys around our target audience of 3 groups: grassroots organizers, tech companies, and nonprofits. All data points live in new user-feedback repo

• Some learnings

  • ally.guide makes our purpose/concept (to help automate racial justice oriented campaigns and funding - harder to grasp in terms of what roles look like across these 3 groups)
  • a landing first step at programequity.com which allows us to capture corporate partners and amplify existing campaigns (survey) by organizers. Wanted to gather y'alls input if this makes sense?

• As we aggregate this data, we will be piloting via Breathe Act to see how much of their outreach is boosted with either the web app model or a text based system. (The web app will still be useful to our tech/nonprofit audiences)

  • Amplify page refresh issue @jjjaney would it be alright to polish this with your jazzy UI 👀
  • Textflow issue to come akin nudgetext

Checklist

• [x] decision on if programequity.com as a triaging point for ally.guide makes sense (everyone)
• [x] Amplify page refresh moqup @jjjaney?
• [x] Form to issue action @manishapriya94
• [x] Mobile UI issues on current implementation @mahrsbar

[manishapriya94]

Project Concept Refresh

There are two layers for this project. Concept Preso Refresh here

1. ProgramEquity will be a landing page for sponsors (organizers - campaigns, tech companies - tools/subsidization)

   • Lob: mail capability
   • Twilio: text capability Let me know what you think of the refresh @jjjaney @mahrsbar

2. Ally.Guide will still be the place for volunteers to perform functions (learn, give, amplify).

   • above home page has been refreshed, thanks @mahrsbar & @teakopp

Amplify Refresh

We'll prioritize refreshing amplify first based off of needs and our survey results.

• Would love feedback @jjjaney @mahrsbar @teenage-witch, using same color scheme as above. We can refresh the image.
  • Dots will behave like instructions (might have to zoom in on pics)

campaigns shown when default page	select filters	search results
Checkmarks or radio buttons? A blue line above 'campaigns you can support currently?	The campaigns link to their sites. In the future "hovering" over the picture buttons will display how many letters sent	Should we get rid of address column? And social media links be blue also?

• This goes to send mail page which needs to be mocked up still

We've shipped:

• user feedback program
• form action to better coordinate with campaign organizers
• finalizing partnership with the breathe act (demo this week)
• heroku modularized deployment

Checklist:

• [ ] fix routing and create unique links for campaigns? @BeeXiong
• [ ] route lob integration? @teakopp
• [ ] Update Louisville, Portland demands @sfansari
• [x] moqup amplify: letter sending page @jjjaney @manishapriya94
• [ ] frontend implementation for amplify page (pictured in issue) @mahrsbar
• [ ] Update partners on site @manishapriya94
• [ ] Formalize Twilio @manishapriya94 @alimarcozzi

[jjjaney]

I think this works @manishapriya94 ...I do have a few minor changes:

• [ ] I would consider making an alternate section for the banners at the bottom because right now it looks a little like spammy ads and the textarea before it looks like it's a separate caption area for the image. Make this block consistent with the text areas (but leave off the arrow).
  Visual example

Make this:

Look like this:

• [ ] The results have varying address column widths (and should be consistent), I think you can stand to wrap around longer office titles as well so it doesn't look like the right side of the results looks cramped

Visual example

Change to fixed with:

Landing page changes

The landing page needs waaaay more QA

@mscoutermarsh and @alwell-kevin —if you wanna jump on a call so we can identify any changes for the landing page...lemme know (or @manishapriya94 if there's another person that makes more sense).

[gt-codes]

Check out my idea for the new design