Web page design mockups

[aboutaaron]

Hey all, so here's my mock of what the front page could look like. I tried to walk away from the bootstrap theme and keep it simple, yet "polished." Language and everything is changeable. As @palewire would say, take a look and throw tomatoes at it.

Some notes:

Headers are Source Sans Pro. I kind of like the idea of using a monotype font for headers to convey our hacker/coder backgrounds. Body copy is Georgia. top nav and footer are using Helvetica Neue but that's mostly because I was lazy. Ideally we'd keep our font selection to two. So maybe these could be Source Sans Pro since I think sans-serif-esque font would work the best.

The three cards up top are arbritary. Three is a nice number, but this could easily go to four if we wanted to add more. For mobile, I think we can just stack them on top of one another.

[palewire]

[gordonje]

LOVE IT

Couple of qs:

1. To what page does the middle button link ("Browse individual tables and look at historical snapshots")? I feel it should go to the list of raw data files, and not the list of versions. We probably should have a link somewhere on the homepage to the list of versions, but I don't know that it has to be as prominent.
2. Should there be a more prominent link to the filing forms list page on the home page? That feels like a sort of hidden section of the website right now. Should probably be presented alongside the raw data files and their descriptions, but I may be biased by it having been that way in our technical docs (ReadTheDocs) site.

Oh, also, it should probably say daily snapshots instead of weekly.

[aboutaaron]

Answers:

1. I was thinking the middle section can be a link to any granular part of the data, so the raw data files would make sense. We can move the list of versions to the footer on the bottom.
2. We can add a fourth card in the hero section to include the filling forms. Or, we could change it for another card. I think it'll work either way. I'll defer to you @gordonje on what content you think makes the most sense.

And I must've fell asleep at the wheel. Of course it's daily. Keep adding notes/comments in this issue and I'll update the mock tonight with all the feedback. Once the homepage is done, I can move to the individual page sections.

[aboutaaron]

Ideas:

• Change Home to Bulk Data

[palewire]

Page width is one of my finicky Q's.

[aboutaaron]

Okay, here's the latest iteration (now with a semi interactive mock up!): http://adobe.ly/29ZecT4

Some general design notes:

• The full page is 1280px but all content is within 1170px, which I believe is the default Bootstrap container size. I'm basically working in 4 columns so this should scale to mobile fairly well.
• I killed Georgia as the body found. Source Sans Pro will be the one font to rule them all and we can mess with weights here and there. I may add another font in, but I think keeping everything in Source Sans Pro makes the site look way slicker.
• Added sponsor/supporter logos since I think that's probably nice.

On the version page mocks:

• I made some editorial calls on what to display, but these are just ideas. For example, I think displaying the raw AND clean data side-by-side is rather confusing (which would should a user choose?). Thus, I decided to elevate the clean data and have the raw data TSVs be something the user opts into. Open to reconsidering if you think it's an issue.

There's probably more but it's almost 2 am in DC and I'm TIRED. Below are the mocks. Lemme know what you think!

Hompage

Version page

[palewire]

[palewire]

Small items I see:

• [ ] We haven't nailed the header labels yet.
• [ ] The table cards need to promote and link to each's documentation on the "table page" with schema, samples, etc.
• [x] Lets try using the table class groups in those filters
• [x] This underscores the need to solve #10 so the ZIP of clean files can be the top thing we promote

[sahilchinoy]

I started working on the version archive page, and I'm finding that each card is so long that scrolling through the page takes quite a while. I think one way to make it better might be to kill the last of the three rows, move the error count by the records and filesize (and stack those horizontally), and kill the "See raw files" link — that list will be on the individual file detail page, which we can link to from the big table name at the top of the card. Thoughts?

[aboutaaron]

@sahilchinoy I think that's smart. I tend to add too much space in my designs so feel free to shrink anything that makes sense. Screenshot your ideas if you get a chance and I'll incorporate in the next mock up.

[aboutaaron]

@sahilchinoy here are the logo assets: calaccess-website-assets.zip

Lemme know if you need anything else!

[palewire]

I showed our designs to a test group at work and got some interesting feedback. They loved our direction on the version detail page but found the homepage to be so vague it was confusing. I think we need to try and more sharply edit the top headline, tagline and boxes. It needs to hit a very notes really hard,

• This is bulk downloads
• of California campaign finance and lobbying data
• it comes from calaccess
• CLiCK HERE TO DOWNLOAD THE DATA

After those points, much of the rest is secondary and might need to be lowered in the hierarchy.

[aboutaaron]

@palewire that makes sense to me. I def think we can focus the homepage to really sell our point. I think having a huge hero / banner element with a pithy tagline and download button probably makes a lot of sense.

@sahilchinoy hold off from implementing the homepage while I go back and rethink it with Ben's feedback. I think the version pages are in a good place though, so just getting the CSS bones in would be well worth the time.

[palewire]

After some thought and debate with others, I'd like us to consider another idea for how to solve the hompage design.

Right now we are trying to create a new "second" homepage at calaccess.californiacivicdata.org separate from the one at www.californiacivicdata.org.

That has presented a couple challenges: We don't have a catchy title or other great name for the CALACCESS product, it's unclear to us what should go on that page rather than the main site, and some users in hallways tests have reported they feel like we're padding out the rest of the CALACCESS homepage rather than "just giving them the data."

What if we abandon the idea of a separate second CALACESS-only homepage entirely?

Instead we could adapt the design above to serve instead as our root homepage at www.californiacivicdata.org. There, we can headline the page with our already established California Civic Data Coalition brand as the headline, and promote the CAL-ACCESS app as the first element below that as a hero with a link into download pages and the rest.

The rest of the downpage design above honestly would work pretty well as a generic homepage and the footer could fit with the old site too, in my view.

I'm starting to lean this direction because it seems to be a way to simplify our site.

What do you think?

[sahilchinoy]

@palewire I think that makes a lot of sense — I think jumping back and forth between a CAL-ACCESS app and the main Coalition homepage gets confusing, especially when they have the same header/footer but not the same URL. How would we fold in the blog and about page? We'd probably want to keep those in a separate project, especially the blog, so how would we deal with keeping formatting consistent between them?

[aboutaaron]

Here's a rough pass. Kinda struggling on the field section but I have some thoughts. We can address in tomorrow's call.

[palewire]

[palewire]

Things we wonder about yet on the file detail:

• [ ] How will we play the unique keys? Can they be linked to the field list somehow?
• [ ] Can we move the lookup codes into the fields table? Hidden with some kind of dropdown/accordion structure?

And after this I think the next big thing we need look back at is the homepage design, which needs to fill in a bit

[aboutaaron]

Here's an idea: We go big with our new logo I'm tentatively calling "Geo Bear." This brings some more identity to the page and allows us to have a logo to stickers and shit. Though, if we're really go do all that, remind me to pay the artist for it since this is currently on a creative commons license.

One suggestion, we need to decide if this is a "product" homepage or a "team/company" homepage, 'cause right now we have a bit of both. I suggest we create a "product" page since I think the product we want people to use is more important than the people doing it. (Plus, that's what the about page is for.)

Here's geo bear:

Some other thoughts:

• This splash is still kinda boring. Maybe some background color behind the logo could help (though we may need to make geo bear black or another color for that)
• WE NEED A PRODUCT NAME. I don't care if it's "archive" or "zipfile" but I think we need SOMETHING. Basically, how do we pitch this product in an elevator?
• I think we need a different font for the logo. I'll look into that but open to suggestions.

[aboutaaron]

Also, I feel like we have too much whitespace up top, so maybe we can fill that in a bit. I have another geo bear logo with grass as 0s and 1s, but it looked tacky. Lemme know what y'all think

[gordonje]

Really like the varying brown shades on geobear.

For a product name, I think "CAL-ACCESS Downloads" is our current placeholder. It's descriptive and specific. Though, maybe not all that inspired. Someone coming to this for the first time might think "Can't just download it straight from the SoS?"

So maybe there's something that could convey they are getting some more. Some off the cuff suggestions:

• CAL-ACCESS Enhanced (maybe too vague)
• CAL-ACCESS Unlocked (maybe too cliché)
• CAL-ACCESS Refined (or CAL-ACCESS Data Refinery)
• CAL-ACCESS Granted or All-CAL-ACCESS (waka-waka)

[sahilchinoy]

This looks really great! I'm pretty into the bear (Go Bears)

CAL-ACCESS Granted is very clever, but I worry it isn't clear enough about what we're providing. Though perhaps if we're explaining right below, it's okay as a headline. "The CAL-ACCESS Data Refinery" seems the best description of what we're doing, and has some fun industrial imagery -- might be able to work some into the page design? Those are my two favorites.

[palewire]

[palewire]

I love that we're riffing product names. Keep them coming.

How about taking a run at some titles that don't include the word CAL-ACCESS?

Ultimately, our goal is to reach beyond republishing the raw data and create simplified files aimed at people with zero CAL-ACCESS experience. What titles would appeal to that audience, and catch their Google searches?

[palewire]

@aboutaaron, do you have that geobear in SVG or another vector format so we can export it at different sizes?

[aboutaaron]

geo bear svg: https://www.dropbox.com/s/6zjr6vqzh89xrzp/bear%20copy.svg?dl=0

[aboutaaron]

Had to hack this together since I didn't have the original AI file on my, but that's it

[palewire]

K. If you have the original with the colors on another machine, we can slot that in later too of course.

[aboutaaron]

Geo bear brown: https://www.dropbox.com/s/372gan0q3y811s6/bear-brown-02.svg?dl=0

[palewire]