Create Mockups to Improve Look and Feel of the Application

[november9]

Right now I am using the default "Dark Theme" of Material-UI (http://www.material-ui.com/#/). It is not very attractive.

Simple mockups of the three views would be great:

• The home page / master activity list (http://localhost:8080/)
• The "add action" screen" (http://localhost:8080/actions/new)
• The "find representative page" (http://localhost:8080/find-representative)

I suggest we leave the basic elements and layout alone for now for the sake of expediency, and rather focus on choosing nicer colors, adding a header, and a logo or at least choosing a nice font for the name of the app, "We Can Save Democracy" (WeCanSaveDemocracy.org).

I've attached screencaps of what I have so far
wecansavedemocracy-app-work-in-progress.pdf

[bripenney]

I'll get started on that :) I'll probably get logos/fonts/colors to you first. Using Material Design is definitely great to push things forward.

I'll work on mockups after that, but you're doing really great work!

Saw this and thought you might find it interesting: https://dailyaction.org/

[bripenney]

Also I don't see any permissions to assign this to myself, but you can go ahead and assign it to me if you do.

[november9]

I just sent you an invite, once you confirm, I'll be able to assign this to you.

Thanks!!

[november9]

Also, glad you like the Material Design. The Daily Action site is awesome too. Ideally, this could turn into a full-fledged action search engine, but not tied to any particular organization, so it could be an activist action aggregator. Baby steps... :)

[bripenney]

Here are my thoughts on branding (leaning towards the first one). I'll probably continue messing with colors when I start on the mockups. Democracy_branding.pdf

[november9]

Hey @bripenney - looks awesome! Love the flag icon and the fonts.

A few other thoughts I had:

• I would remove the word "now" as it is not part of the URL, and may also cause confusion, as there is already a very well-known organization named "Democracy Now".
• for the website, a horizontally-oriented header would work best, so that we don't take up vertical space unnecessarily, so my vote would be for what you have on page 2, with the flag logo to the left of the text
• I am thinking that maybe we don't need such a contrast in importance/font size between the word, "Democracy" and the rest of the text, since the "we can save" part of the title is also very important.

What do you think?

Otherwise, great job and super-fast turnaround, you rock!

[bripenney]

My bad on the url!
Here's what I'm thinking instead. More horizontal, but the icon nests in nicely on the right. I also bumped up the text a bit on "we can save." It's still a bit smaller than democracy, but the red is a lot more punchy so I would say it's still on the same level in hierarchy.

[november9]

Much better, looks great!

Last thing - for some reason, I still think it might be cool to try with the flag to the left of the text, at the same height, as the empty space between the word "save" and the flag looks little bit lopsided to me. What do you think?

Also, are the fonts you're using licensed a way so that we can use them for free?

Thanks for the awesome work!

[bripenney]

So the fonts are Alfa Slab One (a google font) and Flama (a font I have). I'm thinking Roboto is a good alternate though for Flama for web use. Alfa Slab One would only be used for big headers, then Roboto Bold All Caps, then other variations of Roboto. I'll get more specifics to you in the mockups but that's the general idea.

And I get what you're saying with the flag, but I really do think it looks best that way. It just has more balance in my opinion. Here's how it looks though so you can compare. In the second version, I think the flag gets to be too prominent. I tried making it smaller as well, but then it looks out of line with the text when it's on the left.

[bripenney]

Maybe this is more what you're thinking? For some reason it feels like the flag is floating to me. I just think the other one is more dynamic and balanced. I also think when the flag is on the left your eye goes there first rather than the name. Let me know what you think!

[november9]

OK, I see what you're saying. Your original version is starting to grow on me, so my vote is let's go with that. :)

Otherwise, I'm wondering if you might be able to create a 16x16 favicon using the flag image. Whaddyathink?

[bripenney]

Yes I agree!

I'm starting to work on the mockups... just to clarify, will they be able to make an account or return to the page with their info saved?

[november9]

Oh hey, sorry, I missed this, but yes, that is the plan. I don't have that implemented right now though. I think it's just going to be a social login, using FB and Google, so that will amount to just a simple modal or popup window.

Right now, I think we just need:

1. A new color scheme
2. A simple header that will look good on mobile devices in portrait mode
3. Some direction for fonts and spacing

I would say, let's leave the layout alone, even though I'm sure you could come up with something much better than what I've put together. The point is just to get something professional-looking launched asap, and iterate from there.

Also, my apologies for not getting this to you sooner, but I'm attaching screenshots of all of the screens we have right now.

Please let me know if you have any questions.

Thanks!

(Please ignore the pink highlight over the bottom of the first item in this list, the screencap plugin I'm using is triggering the hover state while it is in the middle of capturing the screen, so that's why we're seeing that random portion of the row being highlighted.)

---

---

---

---

[bripenney]

So this is what I had put together so far based on the previous screens you had posted. I know it's just one page, and it looks like you might have changed the flow but this would be the look for everything. I used the Material Design assets in sketch to assemble this. I changed the colors to match the logo, but if we want to match Material Design color options I can do that too. Also the second page isn't entirely finished. I was going to put some text in the top blue box.
democracy.pdf

[november9]

Nice work!

As for the "Find Your Representative" screen, my idea is that this would always be associated with a specific action that involved contacting your representative (since not all actions involve calling a rep, of course). For those actions that do require contacting a representative, then we'd insert the "Find Your Representative" screen into the flow after the user adds their action. So we wouldn't need a separate page for that.

Really, right now I'm thinking the 3 pages we have here can get us to a basic MVP, although a basic Contact and About page would probably be a good idea as well.

What do you think?

[bripenney]

Okay that makes more sense. If they're able to log in, will they be able to save their causes and address so their reps automatically come up in the flow?

[november9]

Yeah, at the very least, I was thinking that they'd be able to save their list of actions.

[bripenney]

Hey sorry I've been so MIA. I'm planning on working on this this weekend to get you those screens. Do you have a preference on files/markup to use for styling?

[november9]

No prob, appreciate all of the awesome work you've done so far!

PSD's would be great so we can copy-paste hex values. Is that doable?

[bripenney]

Right now I was working in Sketch because you can import all the material design assets. We should be able to copy and paste hex values from there as well. I can switch to Photoshop though before I get too far down the rabbit hole.

[bripenney]

So for sketch you can get the code this way: https://www.sketchapp.com/learn/documentation/exporting/code-export/
I could do that and just specify assets, or you could download a sketch trial.

OR we could use Invision where I can sync Photoshop or Sketch files: https://support.invisionapp.com/hc/en-us/articles/207950906-Introduction-to-Inspect

Styling should be pretty simple since I'm mostly just using the light theme with small edits for now.

[bripenney]

Once again, my apologies for taking so long. I should be much more active this week and these should be easy for me to make.

I could also redline them for you like this.

[november9]

@bripenney - Wow, this is awesome! Very clean and tasteful, and I like the vertical spacing of the fonts.

A couple of quick thoughts to run by you:

1. Could we set the header off a bit by giving it a backgound color - maybe blue (which would obviously require changing the color of all of the blue part of the logo and the nav links)?
2. What about using a slightly darker shade of blue? What you have is undoubtedly appropriate for the theme, but it looks a bit similar to the default HTML hyperlink color, so maybe making it a darker blue, maybe something like #345486, could be cool?

Otherwise, yeah, as long as we know the hex values, font sizes, and line heights and can open the mockup files with PhotoShop or something universal/free, any format will work.

Great work!

[bripenney]

Okay I'll experiment with color more!

What's your email address? I want to test this Invision plugin with you and see how well it works for you.

[bripenney]

If I can invite you to the project in Invision, you should be able to click on each individual element and get its CSS properties. Still working on this. I tested some different colors and I really do think the blue is fine. I get what you're saying about the automatic hyperlink, but I think if we're intentional in how we use it it won't look like that. Any blue in the more "patriotic" family looks kind of like that. If it's used on text, it will only be on text that is clickable anyways. Let me know your thoughts.

wcsd_mockups.pdf

[november9]

[email protected]

[bripenney]

Have you seen this? Just came out. It's being promoted by Michael Moore.

https://www.resistancecalendar.org/

[november9]

Funny you mention that...I have actually been speaking with them as there is a lot of overlap between our two projects.

Right now, my thinking is that it would be ideal to join forces with them instead of creating something similar that will not have nearly the publicity, resources, and ultimately, impact. They are teaming up with a group called Progressive Coders, which is a huge organization of techies, designers, even lawyers and many other talented folks. They could definitely use some design help on this project.

I feel bad that you've already put in so much work here, but perhaps a lot of that (especially the UX stuff you did) could be carried over. You just need to sign up here, and mention that you'd like to participate in the Resistance Calendar, and from there, we can continue our work: https://airtable.com/shraBEItZa0sYiMB0

What do you think?

[bripenney]

I think that sounds great! You're right they have a lot of resources. How many people are signing up to work on this? Are we a small cog or is it more tight knit?

[jktravis]

That's a good question. Btw, where did you find the air table link?

[november9]

@bripenney and @jktravis - While there are a lot of people in the Progressive Coder's Network, right now, this particular project is just a handful of folks who are loosely affiliated with this. I think there is just one or two other front end folks aside from myself, maybe 2 backend devs, one designer who's also pretty much the project manager, so there is definitely an opportunity to make a very big impact.

As for the air table link, this is it: https://airtable.com/shraBEItZa0sYiMB0 (is that what you were looking for, @jktravis?)