Rewire example sites page: Now Case studies!

[ericronne]

Description of feature or bug

Based on test results (#1561)

Definition of done

New wires!

Level of effort

~low~ medium+

[jseppi]

Why is this labeled as "blocked?"

[wslack]

removed blocked label; Issue is still marked as such in zenhub. If we want to prioritize it, we'll put in the "blocked" column to regularly check on status.

[ericronne]

Proceeding with caution for now, to be revisited when research catches up

[ericronne]

Wire for discussion and testing! @wslack @thebestsophist @ShannonBad

Happy to run through rationale for various decisions reflected here.

[wslack]

One thing we can't show here: the diversity and power of federalist sites (we don't do that well in the status quo either). Would there ever be a way/reason to show more example sites?

[thebestsophist]

@wslack do you mean like telling more of the story of the impact these sites have made?

We’d need some time create content to tell those stories, but I like that idea a lot. If we can tell stories like “here’s how this service empowers impact”, that could be powerful.

[wslack]

Yes and I want to show more than 3 to show the diversity of our sites. We can't write up all 100 but I want to represent them somehow, if that makes sense. What if we do awards in various categories for our sites?

[el-mapache]

One approach that I think could be neat is to have each of these sections focus on a specific feature, and then describe how an agency or two have used those features to make their sites.

So, rather than make each app the focus of the section, make the feature the focus, and the partner site the complimentary piece. It would probably be most interesting with sites that stretch Federalist a bit, like the DOI project.

[jseppi]

I think that is a spectacular idea!

[ericronne]

What are some features that might be the broadly applicable to potential clients?

[jseppi]

quick thoughts:

• branch previews
• speed of launching a new site
• templates
• hugo as a build engine for very large sites (digital.gov)

[ShannonBad]

@ericronne RE: the wireframe design. This is a great! I really like seeing new ideas. I do think we should do some user testing, if we do this.

I have an iteration on @thebestsophist idea, we may want to consider highlighting (in the section title) the type of website/template theme used - and then adding the title of the agency/website as a secondary part of the design. Since ideally we want clients more focused on our product. I made a super rough sketch (below) to share just to explain the idea better (I am sure it doesn't conform to the 18F style guide yet).

We may want to revisit how we name templates? Would the order of section display be based on release date? Could we filter by the template-type used?

[wslack]

adding to what James posted:

• branch previews (example: interior)
• speed of launching a new site (example: DHS)
• templates (example: US PCLOB)
• hugo as a build engine for very large sites (digital.gov) (example: as said)
  • static sites + API = dynamic experience with a tiny attack surface (example: scorecard)
  • making it easy for contractors: (examples: fedramp.gov and fedsim.gsa.gov)
  • opensource: markdown-editor.18f.gov and slides.18f.gov

[wslack]

@ShannonBad I think we want a separate page for templates apart from case studies.

[ShannonBad]

@wslack This is a seperate page for case studies still - it's highlighting which template was used, since the purpose is to have a client better understand how to use the Federalist templates, the template name should be used/searchable. Perhaps it's not top level (in the title) in the final design, but it should be included IMO.

[wslack]

I'm confused. I think there should be two pages - one about case studies, one about templates. The case studies page should say what template was used, but the page will focus more on features of Federalist. Whereas, a templates page is focused more on what "you" the new customer can do.

[ericronne]

New wireframe for discussion!

@thebestsophist @wslack @ShannonBad

[thebestsophist]

How about for the clients section keep it even simpler with “All our clients” or something like that and the all the logos, without any framing text?

And then below that is a 1–2 sentence call to action and the contact button/link.

[wslack]

I think this page is beautiful and I agree with @thebestsophist about just having lots of screenshots of other live sites. (I wouldn't use agency logos here); there's a spot for those on the homepage.

[ShannonBad]

I think it's looking better! Could the links to the websites actually be the image (instead of more text below the image)? Maybe with a tool tip on the image, to remind people they can see this elsewhere?

I think in the research it was mentioned that people wanted to see highlights of what was done well with the templates, but on other client sites. Is that what this main body client text is?

[wslack]

👍 I think we may want the text as well to make it explicit though, for people that don't mouseover the image (or we can test that). I think we'll have a separate template specific page, but the case studies that use a template will do well (however, most of the most impactful federalist sites were custom designed in some way).

[ShannonBad]

@wslack I think your point, "but the case studies that use a template will do well (however, most of the most impactful federalist sites were custom designed in some way)" is something that could be mentioned in case studies? I honestly had no idea you could even customize your Federalist site that much, I assumed it was limited in design like a CMS (and "A2" in user research testing said the same).

[wslack]

Good point! I had thought I showed you the "back end" of a federalist site earlier but the short answer is that any static HTML can be hosted on Federalist. There are no CMS like design constraints, but also no drag and drop design tools.

[ericronne]

Further draft …

[wslack]

Ready for Eric to take the next pass!