mivoter.org

Since the disastrous election of 2016, I have been volunteering my talents as a software architect, to help build technical infrastructure for various progressive and Democratic campaigns.

My latest effort is a (potentially state-wide) Democratic voter guide for mobile phones, which you can see at mivoter.org.   (But it looks/works best on a phone — that is by intent.)

I need help with this, and I’m reaching out to my talented 🙂 friends to assist.  We’ll use this page to build and maintain a list of to-do’s.

  1. Fonts.  I don’t know diddly about fonts.  Which fonts should I be using, and which size etc., on which pages?  (9/11/22 — for the moment we’re going with Roboto.)
  2. Bottom tool-bar buttons.  I’m trying to make this look like (many) mobile-apps, with some basic tool buttons at the bottom.  I need better icons!  Presumably transparent to let the “blue” shine through — but I’m sure there are better ways to represent these buttons.  (9/11/22 — for the moment, we’re going with the google material symbols icons.)
  3. Headers.  I like the “MI DEMS” icon at the top left, but I need something like “VOTER GUIDE” (on the home page) and “CANDIDATES” (on the see-my-candidates page), that actually looks decent, and (ideally) stylistically matches the MI DEMS.  (But see “new logo” below.)
  4. Slider buttons.  Once a voter is on the candidates page, the “>” slides in the candidate description, and a similar “<” slides them back to the candidate list.  I modelled this after the behavior of the iPhone settings tool.  But it looks clumsy.  Someone come up with something better!  (9/11/22 — using the google icons for iOS left/right arrow.  Better, but a colorful button might be more meaningful.)
  5. Testing other browsers & phones.  I’m doing most of my work on Chrome on an iPhone.  I very much need testers & feedback on other combos.  So far I have:
    1. Chrome on iPhone
    2. Chrome on (old/small) Android
  6. What else?  What else screams (at those of you with an actual aesthetic or design sense)?  I’m a a developer, not a designer, and the site makes that clear! 🙂
  7. New logo.  I have to replace the “MI DEMS” with something else — perhaps something similar (but a different font) like MI (with the michigan map) VOTER ?
  8. Buttons for links.  Consider using buttons rather than traditional <a href=> links for stuff like the Secretary of State pages.

Meanwhile, here’s what I’m working on, just to provide context.

  1. Expand “vote” info page, with all of the links about how to vote.  (How to register, how to vote in person, how to vote absentee, how to find drop-boxes, etc.)   (9/10/22)
  2. Write the FAQ page.   (9/10/22)
  3. Reach out to other counties.  Right now, I only have data for Washtenaw County.   If you know of people in other counties who might be interested, please put me in touch with them.
  4. Add in the relevant state-wide proposals that will appear on the ballot.   (9/10/22)
  5. Option to display polling place?  Check if that is in the michiganelections.io data source.

3 thoughts on “mivoter.org

  1. Happy to help out
    1. Montserrat is a nice font, not as frequently used as Roboto so has a bit more of a unique feel. If you follow WCDP site fonts you get a similar feel or appearance of potential affiliation to WCDP if that is what you are going for.
    2. Material icons are a good open choice. If you were using bootstrap they also have their icon library, but no need to over do it.
    3. I can put together a concept page with headers
    5. I have an old pixel 2 I can pull out and do an android test. I also use a newer android that it is working fine on.
    6. A few notes.
    – The zebra striping on the candidate list is a bit confusing to me, I would group things differently especially for categories with multiple picks. I can suggest something with the header concept
    – When on a candidates detail page the back button and the link out to the candidate webpage are very close. I accidentally opened their page when trying to navigate backwards several times
    – It also wasn’t clear that you could link out to the candidates website, maybe having a clearer link out would be better then just linking their name
    – The bottom icons could be a little bigger, centered, and evenly spaced in the available area
    7. I can take a look at the logo, but it looks like you got something already.
    8. seems related to 4. Semantically for accessibility the way the app works makes the button/link decision tricky, it could go either way. This feels more like a ‘link’ in that I’m going to a different view. That said you can style a link to visually be like a button

Leave a Reply

Your email address will not be published. Required fields are marked *