Refresh front page to address issues from Usability Testing

[philipashlock]

Create a new Introduction to Data.gov tutorial

Original title: Would like more direction from front page on what I can do [-@vz3]

[mollieru]

I agree. We need to prioritize call to actions and surface those clearly.

One quick fix thought: What if the homepage becomes the current 'Highlighted Datasets' page http://highlights.data.gov/? This is a nicely designed page with clear content/layout. Primary nav may need a bit of rethinking but is essentially doing what it should.

[JeanneHolm]

Highlights is a great page, but many people would be confused by Highlights as a front page because it doesn't have a place to search data or any other context. The intent on this item was context-sensitive help that allowed people to hover over/click on a question mark/... to find out more about a specific item or functionality. In addition, people wanted a quick tutorial on what could be done on the site.

[mollieru]

Super valid point Jeanne. What if primary above-the-fold real estate surfaced search + this other context and the main content area of the page was the current Highlights page? Real real rough mock up of this idea: https://drive.google.com/file/d/0B7jZv0KYzFcjblpGWGlreVREZkk/edit?usp=sharing

[cew821]

I like this idea a lot. If we could add search as a prominent element as in @mollieru's mock up I would be in favor. I think her mockup does a good job of making it clear what you can do: "search data" or "browse by category" and also retains some of the "serendipity" of the current Mosaic design, but in a more structured and useful way.

[mollieru]

Thanks Charles. Here's another version which would a) incorporates the original News feed feature and b) collapses the Highlights into a slideshow effect to save screen real estate http://grab.by/sflA

[cew821]

I prefer your first version in terms of simplicity / ease of use.

It's almost like you could swap the names and use the endless scrolling mosaic approach for "highlights" in which each tile is a random "highlight" (including tweets / datasets / blog posts) etc. and use what's currently called "highlights" as the "main page."

[vz3]

Most recent comp attached (All, please keep in mind this is still a proposal, and will evolve.). I think this shifts in the above direction re:highlights. The visualization will link to the Highlights page. But the search box remains the highest item in the visual heirarchy.

@cew821, definitely share your concerns you shared via email w mosaic/masonry. I would like to strike it entirely. That said, we need to find a middle ground given our time frame.

[JeanneHolm]

Very nice indeed, Victor.

[mollieru]

@philipashlock Can you help give us a sense of how much flexibility we have design-wise within our current timeline?

[vz3]

Added CFPB HMDA visualization which required increasing vertical space (I don't think the keyhole thing worked), and took a swing at adding more detail to the topics. I don't think the thumbnails work here and obviously a lot of placeholders right now but wanted eyes on this.

cc @eriemeyer @philipashlock @JeanneHolm @mollieru

[mollieru]

This looks really good Victor! I'm still a little worried we're not doing enough on the home screen to orient users to where they are and why, but I think this is a much more powerful data viz. Where does the link to 'learn more about this and other open data sets' take you?

Mollie Ruskin 503.928.2988 mollieru@gmail.com

On Fri, Nov 22, 2013 at 1:42 PM, Victor Zapanta notifications@github.comwrote:

Added CFPB HMDA visualization which required increasing vertical space (I don't think the keyhole thing worked), and took a swing at adding more detail to the topics. I don't think the thumbnails work here and obviously a lot of placeholders right now but wanted eyes on this.

cc @eriemeyer https://github.com/eriemeyer @philipashlockhttps://github.com/philipashlock @JeanneHolm https://github.com/JeanneHolm @mollieruhttps://github.com/mollieru

[image: home-mockup-vz-2]https://f.cloud.github.com/assets/582918/1603175/9b4488aa-53a5-11e3-9aea-3d49e9dc8d40.png

— Reply to this email directly or view it on GitHubhttps://github.com/GSA/data.gov/issues/142#issuecomment-29097957 .

[JeanneHolm]

Perhaps we can flex the space based on the visualization? We would want a maximum vertical size to protect other content above the fold. I expect the link to "learn more" would go to the underlying dataset?

[vz3]

Link from the grey box under the viz goes to the highlights.data.gov

Info on the featured viz should be the first item in highlights page.

[vz3]

Links to other data sets goes to catalog.data.gov

[vz3]

@mollieru Thanks! Definitely still want to get to a better place on new user orientation. Let me know if you have any ideas (more elements from your comps that I can incorporate perhaps? =) ) or I can send you the updated PSD if you want to take a swing directly.

[ErieMeyer]

Three thoughts:

• Suggest switching from "contact us" to "contact" in nav for one-word consistency/simplicity
• What about making the viz more of a texture (like the original) so that it's visually interesting, but doesn't distract from the main user stories (search/browse data), and leads into the highlights page? Maybe adding transparency?
• I know I'm a broken record, but I would love a more emphasized search since that's the primary behavior.

[vz3]

Updated. The topics thing is very much a provocation. I'm not sure that it works.

[JeanneHolm]

I do like the cleanness of just the topic/community names rather than the pictures too. The eye gets drawn to the pictures for the viz and news, and then the navigation of the topics.

[ErieMeyer]

Suggest we swap out FB icon for stack exchange icon

[vz3]

v.Utilitarian

[vz3]

Some tweaks to bring in line with the lightness and color scheme of @mollieru's comp

[cew821]

I like v.Utilitarian's direction. If we are going to have a "featured" data set I like having it in the body with some context, and with the idea that it could frequently change, instead of as a part of the site design outside of the main body content.

[vz3]

Slight tweak…

[ErieMeyer]

Here's a library site with search & browse as the top features, but with a background image as a texture and tiles of news -- maybe another way to give the search bar more breathing room, and incorporate a viz without distracting from the primary actions?

https://multcolib.org/

[philipashlock]

I've also been experimenting with a revised header that gets rid of the visualization/image and consolidates the space. I started this as a revision of the Contact/Engagement page but am now working on expanding that for the frontpage. So far I've mostly focused on the header and incorporating the searchbox in a captivating way (like turning the input field into mad lib sentence and marquee of common searches), but will start moving down to see what I can do with the news layout/tiles as well. Here's a preview (you can also grab the PSD from layervault)

Contact page - https://layervault.com/rev/AhpVswA4OU

Front page (in progress) - https://layervault.com/rev/wPXtD6A1DQ

[JeanneHolm]

As we streamline the interface, remember that the feedback showed two patterns: (1) narrow down the search for a specific dataset; and (2) give context and direction for what can be done on the site. I'm writing a tutorial with context sensitive help to support (2), but don't lose too much context in going to the next design.

[vz3]

Most recent mockup from @mollieru. This is 90% there. Any changes should be very superficial.

[ErieMeyer]

Blown away -- this is gorgeous.

[nsinai]

+1

[cew821]

Yes. Great job.

On Tue, Nov 26, 2013 at 9:23 AM, Nick Sinai notifications@github.comwrote:

+1

— Reply to this email directly or view it on GitHubhttps://github.com/GSA/data.gov/issues/142#issuecomment-29295604 .

[ErieMeyer]

A few thoughts:

• Suggest swapping out the lower right "community" feature for "impact" content since the community details are displayed elsewhere on the homepage/nav. Could show an open data company/app/challenge/etc.
• Suggest switching "Ask Data.gov" and "Ask a Data Steward" to "Email Data.gov Team" and "Email a Data Steward" since they're not really "private" -- they're likely FOIA-able.
• Q: Where does "Ask a Data Steward" go? They're usually associated with one specific set. If this was just for balance, could swap out for "Tweet at a Data Steward" and just direct to data.gov's normal handle

[JeanneHolm]

Really clean and easy to maintain, great job! This addresses a lot of the discussions in the usability testing. A few suggestions:

1. Decrease/tighten up size of top box to allow more content to show above the fold
2. Boost contrast for 508 issues on text and in search box
3. Align topic names with communities where content and data is actively managed (e.g., Agriculture and Nutrition --> Agriculture). Alternatively work with communities to expand or refine.

[vz3]

Just posting another option that @mollieru had mocked up yesterday so people have an idea of what homepage looks like with an implementation of highlights (which will probably be tweaked0

[cew821]

Those "highlight" pieces have very powerful design. They look great, but they also will demand really great content to live up to the design and the level of importance the design affords them.

I somewhat prefer the more utility-focused version of the homepage without the highlights, where things like "ask a question" or the Stack Exchange links get more prominence.

What happens when you click a browse a "topic" icon? I think having a few of those highlights relevant to each topic may feel more appropriate on a "topic" page than on the homepage?

[nsinai]

For the browse topics icons, would suggest we swap places of the energy + environment icon and the labor + skills icon, split weather and climate into two different icons, and cut the natural disasters icon.

[vz3]

Starting to address issues raised during today's meeting, focusing especially on contrast. @mollieru+@philipashlock I originally forked the PSD but ended up saving it to the original full-site-design file in LayerVault.

-Changed all references to 'highlights' to use the same language -Removed background in highlights -Made welcome message WCAG 2.0 compliant, centered content -Readded social buttons -Used centered 'more'/+ button for all sections -Bumped contrast on + buttons -Increased font size of author line in updates

To do: -Decrease body font size in updates? -Unify updates heading w browse+highlights -Check contrast in highlights section -Add topic to highlight -Update topics list -Increase font size of date in Twitter feed? -Tweak "Read more" link in updates

[ErieMeyer]

Into it!

Mind removing "welcome to" from the main content area? I think it's fine after that

Sent from my iPhone

On Nov 29, 2013, at 6:04 PM, Victor Zapanta notifications@github.com wrote:

Starting to address issues raised during today's meeting, focusing especially on contrast. @mollieru+@philipashlock I originally forked the PSD but ended up saving it to the original full-site-design file in LayerVault.

-Changed all references to 'highlights' to use the same language -Removed background in highlights -Made welcome message WCAG 2.0 compliant, centered content -Readded social buttons -Used centered 'more'/+ button for all sections -Bumped contrast on + buttons -Increased font size of author line in updates

To do: -Decrease body font size in updates? -Unify updates heading w browse+highlights -Check contrast in highlights section -Add topic to highlight -Update topics list -Increase font size of date in Twitter feed? -Tweak "Read more" link in updates

— Reply to this email directly or view it on GitHub.

[JeanneHolm]

Need to include Open Gov, Metrics, and Apps as navigation items on the top based on usability testing and site usage metrics. After the browse and catalog pages, the majority of users go to the following items, which need to be easy to find and navigate to (items not yet done are starred)

1. Excluded parties dataset
2. Research community home page
3. **Open data sites (world map) (needs open gov nav)
4. **Metrics (needs metrics nav)
5. Communities home page
6. Education community
7. About
8. **US open data sites (needs open gov nav)
9. Developer community
10. Energy community
11. Consumer community OGPL

[JeanneHolm]

Community pages need to include a way to accommodate news, images, featured datasets, and persistent content. Example with the Safety community with news at http://next.data.gov/safety/ and http://safety.data.gov. Images and news do not appear to be supported in the new layout.

[vz3]

@JeanneHolm Pretty sure I know what you mean by "persistent content" but can you go more into detail about that or show examples?

[JeanneHolm]

@vz3 Simply some static content on a page, which I believe is already accommodated in the latest design above. This includes welcome text on http://ocean.data.gov, or G8 for Open Data key initiative on http://agriculture.data.gov. These are not datasets, maps, app, or websites, but think you've already dealt with it.

[nsinai]

@JeanneHolm @philipashlock @mollieru @vz3 Great work to date!! What's the plan for the Open Gov? Would an About or FAQ section make more sense? (It could include some of the same content of the Open Gov section, including how Data.gov fits with other open data portals, etc.)

[JeanneHolm]

About (which is being added to the footer) contains content from http://www.data.gov/about. Open Gov provides the context of open data that is in addition to the economic and innovation stories shared. Users tested wanted to see this section expanded to include open data sites in US and world, related open data policies, any connection to FOIA, and directives, and then perhaps highlighted datasets around campaign finance, federal budget, real-time treasury, and expenditures

[philipashlock]

I'm sure there will be more to revisit here, but specific things can be ticketed separately. The new design distilled from user feedback and the discussion on this thread has now been implemented