Implement new homepage design

Dahianna commented 4 years ago

[x] Review design with leadership
[x] Make microrequest for a designer to make edits and implement

Here are the mockups on InVision: https://gsa.invisionapp.com/share/PMUWVRMSUKN

Sketch files for USWDS 2.0 are here on Drive in the site folder: https://drive.google.com/open?id=1jGVEhjizHt7ZZ0eFmqedlccs1O6y69Vh

Photos from 18F workshops here on Drive: https://drive.google.com/open?id=1ySWACkfQXw3n9yA1-KotGrBKN9Ue_I-T

Dahianna commented 4 years ago

Here are the results for the survey:

As we've seen with our internal interviews, desktop 4 seems to be the preference. It's not perfect and we have to work on updating the content, but the illustration was seen more favorable over the hero image.
I recommend using desktop 4 layout, images and illustrations, but using the desktop 3 language on the second half of the page. For example "case studies" instead of "feature projects"
Also, it should say "18F is a technology and design consultancy..." instead of agency.

https://app.mural.co/invitation/mural/gsa6/1577730854809?sender=dahiannasalazarforeman2861&key=06243d9e-8f83-494b-894c-33787fd1bd81

Dahianna commented 4 years ago

More about the research https://github.com/18F/18f.gsa.gov/issues/3061#issuecomment-554079382 https://github.com/18F/18f.gsa.gov/issues/3061#issuecomment-556085072

lauraponce commented 3 years ago

@Dahianna here's the updated version of the homepage: Invision link

The updates include:

changing "agency" to "consultancy" in the headline
changing "featured projects" to "case studies"

The content on version 3 differs from 4 where it says "We support your mission" in 3 vs "We help you achieve your mission" in 4. Let me know if you prefer the version 3 phrasing and I can update that.

Anne also mentioned adding 'Guides' to the top nav, let me know if you'd like that in this mockup.

Desktop 4-updated

Dahianna commented 3 years ago

Thanks for the quick turnaround @lauraponce ! So far so good. Yes, let's change "We help you achieve your mission" to "We support your mission"

Let's add guides as well. And I was thinking we should update the nav order to: Projects - Our Processes - Guides - About us - Blog What do you think?

lauraponce commented 3 years ago

@Dahianna I agree with that ordering for the nav — updated!

Here's the new version with the "we support your mission" language and the updated nav order: Invision link and the updated Sketch file.

Desktop 4-updated new

Dahianna commented 3 years ago

Awesome, thanks @lauraponce !

Dahianna commented 3 years ago

@apburnes this is ready to implement. Let me know if we need to submit a #helpwanted request

apburnes commented 3 years ago

@Dahianna I'll be fairly busy this week so maybe we throw this into the helpwanted tag. Also, we may want to break this up into a few issues to make it easier on the folks jumping in to contribute.

Dahianna commented 3 years ago

Sounds good, I'll go ahead and do that. Thanks!

Dahianna commented 3 years ago

Update suggestions by the branding team:

Update banner and identifier need to match current ones
Blue circle with lock on illustration (Not an 18F color): @cmajel offered to fix it
Image on "We support your mission" the bottom goes over the gray banner

@lauraponce let me know if you have bandwidth to work on these updates

cmajel commented 3 years ago

@Dahianna I've updated the drive with an updated header graphic and sketch file that incorporates more 18F brand colors. Before and after below.

I'd also recommend we use $color-dark for headings, rather than black, to make the new homepage consistent with other pages. I've included an example below, and it's also in my updated sketch file.

If these changes seem right, I can update the Invision link.

hero graphic

original

homepage-graphic--original

updated

homepage-graphic--recolor

heading colors

original

homepage-headings--original

updated

homepage-headings--recolor

Dahianna commented 3 years ago

@lauraponce the site team also noticed the new design doesn't include the search bar. With the "Gen in touch" button now also on the nav, where could we place the search bar?

Dahianna commented 3 years ago

@cmajel Thank you for the updates. They look good to me

lauraponce commented 3 years ago

@Dahianna here's what it looks like with the search bar on the right side of the nav, it seems like it can still fit in there. Thoughts on this?

Screen Shot 2021-01-06 at 10 27 11 AM

Dahianna commented 3 years ago

Thanks @lauraponce What do you think about moving the get in touch button after the search bar? cc @apburnes thoughts?

lauraponce commented 3 years ago

@Dahianna here's what it looks like with that swap, I feel like it works pretty well like this:

Screen Shot 2021-01-06 at 12 07 39 PM

apburnes commented 3 years ago

The header container is currently using the USWDS standard at 944px from edge to edge for all of the elements in the header. What is the mock container width from the edge of the logo to the edge of the Get in touch button?

lauraponce commented 3 years ago

It should be the same as the USWDS standard, this is 944px

Screen Shot 2021-01-06 at 12 42 49 PM

Dahianna commented 3 years ago

Great! Thank you so much @lauraponce ! I'll share with @AshleyO85 and the leadership team to see if they have any last comments, other than that we'll be ready to do the update!

Dahianna commented 3 years ago

@lauraponce when you have a moment can you update the invision with the changes to the header and Christine's update to the hero. Thanks!

AshleyO85 commented 3 years ago

is this different the web page revision i owe you in staffing

18F - U.S. General Services Administration

Ashley T. Owens

Acting Deputy Director and Senior Advisor of Acquisition (Acq Breaker of Chains)

GSA - FAS - TTS - 18F

Build Better, Buy Better

On Fri, Jan 29, 2021 at 1:19 PM Dahianna Salazar Foreman < notifications@github.com> wrote:

@lauraponce https://github.com/lauraponce when you have a moment can you update the invision with the changes to the header and Christine's update to the hero. Thanks!

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/18F/18f.gsa.gov/issues/3207#issuecomment-769967971, or unsubscribe https://github.com/notifications/unsubscribe-auth/AHR5NMPYNOHI64WNYELSJK3S4L3Z7ANCNFSM4PL53MUA .

Dahianna commented 3 years ago

Yep. This design and content had been approved by leadership in the past. I just want to double check that it resonates with you too and you agree with the new names for the sections in the site.

U.S. General Services Administration

Dahianna V. Salazar Foreman Digital Marketing TTS Outreach Technology Transformation Services Federal Acquisition Service https://www.linkedin.com/company/gsa-tts/ https://twitter.com/GSA_TTS

On Fri, Jan 29, 2021 at 1:48 PM Ashley Owens notifications@github.com wrote:

is this different the web page revision i owe you in staffing

18F - U.S. General Services Administration

Ashley T. Owens

Acting Deputy Director and Senior Advisor of Acquisition (Acq Breaker of Chains)

GSA - FAS - TTS - 18F

Build Better, Buy Better

On Fri, Jan 29, 2021 at 1:19 PM Dahianna Salazar Foreman < notifications@github.com> wrote:

@lauraponce https://github.com/lauraponce when you have a moment can you update the invision with the changes to the header and Christine's update to the hero. Thanks!

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/18F/18f.gsa.gov/issues/3207#issuecomment-769967971, or unsubscribe < https://github.com/notifications/unsubscribe-auth/AHR5NMPYNOHI64WNYELSJK3S4L3Z7ANCNFSM4PL53MUA

.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/18F/18f.gsa.gov/issues/3207#issuecomment-769982672, or unsubscribe https://github.com/notifications/unsubscribe-auth/AFO37ODNRNBJOSGBX4AO76LS4L7I3ANCNFSM4PL53MUA .

AshleyO85 commented 3 years ago

can we add a quote from DOJ CRT and update the case studies or is that out of scope for this issue?

Dahianna commented 3 years ago

If you give me the quote we can update that. As for the case studies, that's a different issue. @anjunainaustin is working on that.

lauraponce commented 3 years ago

Hi @Dahianna! @lauraGgit @cmajel and I were chatting over Slack about this and I wanted to add the designs here also for visibility: here's the latest HP design and it's updated in the Drive folder also (marked as LATEST with the timestamp).

Latest HP design

Dahianna commented 3 years ago

Thank you @lauraponce @lauraGgit and @cmajel ! I only have two minor edits. @AshleyO85 wants to change the FEC quote to a DOJ quote. I'm waiting on the content. Also let's make sure we use the current footer and identifier @lauraGgit feel free to start the pull request.

18F / 18f.gsa.gov