DESIGN: Design new Demo Sign Up page

yaelberger-commits commented 8 months ago

Description

As a public servant interested in GC Notify, I need to be able to do sign up for a demo so that I can learn more about GC Notify, see it in action and get my questions answered.

TIMEBOXED: 3 weeks

WHY are we building? A new page will take burden off support and let people sign up for a demo themselves WHAT are we building? A Demo sign up page and content and new WAF rules for it. VALUE created by our solution Smoother flow for requesting a demo with fewer steps and time to invite

Documentation and Artifacts

Forms page as a template https://articles.alpha.canada.ca/forms-formulaires/register-for-a-demo/

Acceptance Criteria

Given a public servant is interested in GC Notify, when they select the link to sign up for a demo, then they land on the new page and are able to sign up for the date of their choice without needing any support

[x] Page loads within 200 milliseconds
[x] GC Articles Page in EN is created with a title "Register for a Demo"
[x] GC Articles Page in FR is created with a title "french version"
[x] Confirm page shows correct email address for Keenan after esdc transition
[x] WAF rules for EN and FR GC Articles pages are put in place
[x] Page gives users what to expect from a demo in bullets
[x] Page has a simple icon or image for visual interest
[x] Page has a date modified
[x] Page links back to Contact Us form at the bottom
[x] Page has a "choose a time that works for you:" section
[x] Page has GA4 tracking so we can measure traffic and engagement on this page
[x] GC Notify look and feel
A11y
Bilingualism
Privacy considerations
Security controls in place
Measuring success and metrics

QA Steps

[x] Tested in a realistic production scenario

GC Articles Publish checklist

[x] Supporting feature is released and unflagged
[x] Create or update slug
[x] Page content and slug is translated
[x] Document links to and from the page
[x] Add page slug and title to inventory
[x] If new page, add WAF rule
[x] Create new page or update existing page content
[x] Create or update translation to the page
[x] Link translations by choosing an assigned translation
[x] If new page, save as draft
[x] If existing page, update the page
[x] Post page in Slack for last minute reviews
[x] On staging: Clear the cache through GC Notify's admin panel
[x] On staging: Check links, images and language toggle
[x] Give a heads up to the app-team channel once ready to publish
[x] On staging and production: Clear the cache through GC Notify's admin panel
[x] Clear Cloudfront cache in GCA as needed (Andrew and Phil are GCA admins)

yaelberger-commits commented 8 months ago

Hey team! Please add your planning poker estimate with Zenhub @adriannelee @amazingphilippe @YedidaZalik

YedidaZalik commented 8 months ago

Marie-Sophie and I met with Yael to find out what to highlight:

Learn how you can send email and text msg notifications securely and reliably
Explore how you can create edit and manage templates for your team
Get answers to your questions from
Create reusable templates, personalize messages, send automatically
Discover the dashboard

YedidaZalik commented 8 months ago

Forms invites people to contact them if they can't attend on the scheduled dates. This is also the way to request a French session (but Forms only does that on the French page, and the French page does not indicate that users can also request a different day/time; my draft is based on having the same info on both pages). On the Forms Contact us page, the only option that users can use to request a different date or French session is "Other". It would be a simpler flow to have the user go directly to a page specifically for that purpose so Yael and I asked if we could have something that links users directly to the Growth team instead. But Growth is not able to do that and it's out of scope for us to do it. So we still need some kind of option to request a different date or French demo on Notify's contact us page. Users may land on the contact us page before they land on the request a demo page, so we'll have to specify on "Contact us" that they only request a demo date if they cannot attend the demo dates on the other page. I've got a first draft done of both the demo page and the new contact us page in one document (because they have to work together). I've provided 2 options, the first option uses "Other" to request a French demo or alternate date. The second has a specific box on "Contact us" for a French demo/alternate date. I've tried to highlight what's different in light purple to make it easier to see the difference. Asked designers to comment in notify-research-design channel Attend a demo page and new Contact us page

YedidaZalik commented 8 months ago

Keenan kindly offered to use his email as contact for French and alternate dates and this was approved by Bryan and Yael Implemented that and rest of designer feedback in document Marie-Sophie also reviewed for localization issues

YedidaZalik commented 8 months ago

Is there a visual we can put on the page?

yaelberger-commits commented 8 months ago

the content for the Register for a demo and new Contact us pages have been reviewed and are now final. Looping in @amazingphilippe to do the designs and @mariesophiebezert for localization

amazingphilippe commented 8 months ago

Figma for demo pages and sections: https://www.figma.com/file/f6QILuxf94EHaStf2ejWJb/Contact-us-%7C-Nous-joindre?type=design&node-id=1338-4945&mode=design

amazingphilippe commented 8 months ago

Sent to translation

YedidaZalik commented 7 months ago

Translation is back https://www.figma.com/file/f6QILuxf94EHaStf2ejWJb/Contact-us-%7C-Nous-joindre?type=design&node-id=1384-159&mode=design&t=JGfUy2IkLNuoWAFC-0

Do we need annotate ?

YedidaZalik commented 7 months ago

During demo, Jimmy suggested a group email and Adrianne suggested Keenan auto-forward when he's away. Documenting for V2 in https://app.zenhub.com/workspaces/notify-planning-614b3ad91bc2030015ed22f5/issues/gh/cds-snc/notification-planning/1501

YedidaZalik commented 7 months ago

Figma screen with both languages https://www.figma.com/file/f6QILuxf94EHaStf2ejWJb/Contact-us-%7C-Nous-joindre?type=design&node-id=1405-3316&mode=design&t=NeFD3CI8fhMorSr8-0

YedidaZalik commented 7 months ago

Created GC articles pages (without images or demo dates yet)

Current URL in GC articles for EN is https://articles.alpha.canada.ca/notification-gc-notify/register-for-a-demo/ for FR is https://articles.alpha.canada.ca/notification-gc-notify/fr/sinscrire-a-une-demo/

Permalink for EN is register-for-a-demo and for FR is sinscrire-a-une-demo

amazingphilippe commented 7 months ago

FR and EN pages published in GCA. Waiting for the WAF rules to be released. We'll just need to QA the language toggles, and make sure the page loads correctly.

cds-snc / notification-planning