🖼 Mockup: Home (Design refresh)
Closed this issue · 15 comments
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
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
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!!
- 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.
@jjjaney Awesome, will have this implemented for when we meet Wednesday!
I wanted a quick reference for everything (especially because I've been a little out of it these past several days).
I also want to point out the ordering of the sections. Here is my proposed/recommended ordering and why I'm suggesting it:
Order
- Learn
- Amplify
- 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)
- @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.
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!
Dev progress:
- 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
@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)
Checklist
- decision on if programequity.com as a triaging point for ally.guide makes sense (everyone)
- Amplify page refresh moqup @jjjaney?
- Form to issue action @manishapriya94
- Mobile UI issues on current implementation @mahrsbar
Project Concept Refresh
There are two layers for this project. Concept Preso Refresh here
- 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
- Ally.Guide will still be the place for volunteers to perform functions (learn, give, amplify).
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
- 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
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
officetitles 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).
Check out my idea for the new design