National profile: visual design

[meiqimichelle]

Based on #1519 and #1522 .

[ericronne]

Okay @meiqimichelle @coreycaitlin here are a couple of approaches for the upper sections of the page. Let's discuss. Preferably in Real Time, with faces!...

A

B

C

[usEITI]

⏭ 👥👥👥 ⏮

On Tue, Jul 19, 2016 at 5:40 PM, Eric Ronne [email protected]
wrote:

Okay @meiqimichelle https://github.com/meiqimichelle @coreycaitlin
https://github.com/coreycaitlin here are a couple of approaches for the
upper sections of the page. Let's discuss. Preferably in Real Time, with
faces!...
A

[image: image]
https://cloud.githubusercontent.com/assets/9259185/16967555/1ea2f44a-4dcf-11e6-8982-7318f0a579d7.png
B

[image: image]
https://cloud.githubusercontent.com/assets/9259185/16967572/30d029ee-4dcf-11e6-948e-64b565550302.png
C

[image: image]
https://cloud.githubusercontent.com/assets/9259185/16967583/38797678-4dcf-11e6-984f-b19e71e241e9.png

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
#1520 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ANnOZDNy9_333vq1wukwuWylPUoiCs1Xks5qXUQ3gaJpZM4I8WcD
.

Judy Wilson
Program Manager USEITI Secretariat *
*Office of Natural Resources Revenue

[email protected] [email protected]
202-208-4410

[ericronne]

@coreycaitlin, @meiqimichelle and myself discussed this live, and landed on what's pasted below as a testable version. I have since tested it on two 18F coworkers, both of whom intuitively played with the map, expecting clicks on it to lead to pages covering the clicked states. They also both found the pull-down selector, but preferred to use the map directly.

I plan

[meiqimichelle]

@ericronne Was there any feedback on the green 'special states' section below, or did they not even get that far down in the page before clicking off? Or...other?

[ericronne]

Only tested the upper area; these were literally about 3 minutes each.

[ericronne]

I'm going to modify the top-of-page design, based a hangout just now between myself, @meiqimichelle and @coreycaitlin...

• Remove the three mini-map callouts
• Add summary text on hover (which will appear in the ribbon's lighter-blue bar)
• Add a small icon to the following 19 states, for which we have richer content:
  Alaska, Wyoming, Montana, Texas, Minnesota, Michigan, California, Arizona, Nevada, Louisiana, West Virginia, Colorado, Illinois, North Dakota, Pennsylvania, Kentucky, New Mexico, Oklahoma, Utah
• Possibly include an ownership layer, if only for visual interest

[ericronne]

Here's a tweaked design, for discussion.

My thought was to visually distinguish the map on this page from the (upcoming) case studies map, because they will behave differently. (The case studies map will have only 12 links, all of which have round icon-buttons. Here on the national-view page, however, every state and region on the map is clickable.)

Consequently, i'm using no icons here at all, i've made the map a different color (green), and i've added the ownership texture layer. This is essentially the same map i've proposed for the home page, over in issue #1742.

So here's the draft ...

Note that i didn't include the ownership legend, just because i wanted it to be a clean layout! Again, let's discuss 💃

[meiqimichelle]

This is mostly implemented. @meiqimichelle to break out into smaller issues -- for example, tooltips.