Create GIF of Success path

[srhhnry]

@vykster To confirm, you prefer a GIF to a video with audio talking people through it?

@srhhnry Is that something you'd be interested in making, or want me to? I'm on a Mac so would do a recording in Quicktime and then convert, but recording in Zoom or Loom or something else would also work.

Originally posted by @afeld in https://github.com/cal-itp/benefits/issues/702#issuecomment-1167498256

[vykster]

@srhhnry @afeld I think we'll probably want both as an asset. ie: gif for including in stakeholder presentation decks, video is better for customer service team.

[afeld]

Test data

[srhhnry]

Mobile prototype here: https://www.figma.com/proto/SeSd3LaLd6WkbEYhmtKpO3/Benefits-(IAL2-Login.gov)?node-id=4551%3A4180&scaling=scale-down&page-id=4551%3A4111&starting-point-node-id=4551%3A4180

Making a video/gif of clickthrough next

[srhhnry]

Video w/ audio is here: https://www.loom.com/share/81e3d64636b84115aa28ed75cc40c7d1

[srhhnry]

And I'm less certain about this GIF, but let's see if it works

[afeld]

I kid I kid 😉 Nice work! Posted in Slack wondering if we might have a shorter GIF that's only a subset of the Login.gov screens.

The interactive prototype and video are fantastic.

[srhhnry]

The size did seem a little small! That was what Adobe express spit out, and it seems not great. Happy to take another crack at it, with a shortened flow. Any tips on non-ant-sized GIF factories?

[afeld]

The Adobe Express page suggests you can "Choose the size of your GIF" — did you see that option? Alternatives I'm aware of:

• CloudConvert
• gifify (happy to do this for you, if helpful)

[srhhnry]

I did not, but will revisit today with a shorter flow

[srhhnry]

Hmm, so this is largest file size, which I might have done already now that I'm looking at the interface:

[srhhnry]

Went with Cloud Convert and made a much larger file (too large for Github in fact) which can be found here: https://drive.google.com/file/d/1tei7IqjPMjM7H6rRZUQiNUX-tQQ8F7D6/view?usp=sharing

This GIF shows an abbreviated flow, as I removed things from the Login.gov flow such as entering a password twice, clicking checkbox acknowledgements, and the personal key section

[afeld]

@vykster What do you think? My gut tells me we should make it much more abbreviated, like under ten frames. That would help with the file size too.

[vykster]

Can we have one of both? I think we'll definitely want a version that's super easy to share.

On Thu, Jul 7, 2022 at 7:28 AM Aidan Feldman @.***> wrote:

@vykster https://github.com/vykster What do you think? My gut tells me we should make it much more abbreviated, like under ten frames. That would help with the file size too.

— Reply to this email directly, view it on GitHub https://github.com/cal-itp/benefits/issues/754#issuecomment-1177704708, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABAWB5T2D4FEY7V6S2DPNITVS3SRHANCNFSM52C3JMEQ . You are receiving this because you were mentioned.Message ID: @.***>

[srhhnry]

Here's a much shorter version--down to 15 screens and 1080p

https://drive.google.com/file/d/1KVznH8AhZ-hym0cTSgeu2Qs1PfNZw14L/view?usp=sharing

[srhhnry]

@afeld I think I will need your help for getting this to a different state

[srhhnry]

Need to replace GIF here: https://docs.google.com/presentation/d/1Vawi8d70jtKfL-u5lwM05CcDyQ5zB764/edit#slide=id.gcd07a00814_0_16

[srhhnry]

Do any of these need to be redone? Thoughts?

[afeld]

Sorry, haven't gotten a chance to get back to this. Will try to do some experimenting this week.

[afeld]

I think we want to try creating a GIF from images (the screens in the prototype) with delays between each rather than from video frames, which will give us more control over what's shown and make the file size much smaller. Some options:

• https://www.nytimes.com/2022/01/12/technology/personaltech/how-to-make-gifs.html
• https://imgflip.com/gif-maker
• https://www.adobe.com/creativecloud/photography/discover/animated-gif.html
• https://motionplugin.com/
• https://gifmock.com/

[afeld]

Unless using one that integrates with Figma, the steps will be:

1. Export (some of?) the screens from the prototype as images
2. Throw them into one of the programs above
3. Tweak settings:
   • Frame delay
   • Looping
   • Dimensions — this will affect the GIF file size
4. Generate

[afeld]

Created!

The file, along with the supporting screenshots and Photoshop file are available in Drive. This probably wasn't the most efficient way to do it, but it used tools I already had, and worked fine:

1. Opened the Figma prototype
2. Used the Screenshot utility on macOS to take screenshots that were consistently positioned and sized
   • The frames are different sizes, and I wasn't sure how to easily export/create consistently-sized screenshots with the mobile device frame. Someone more experienced with Figma/Photoshop could probably do that easily.
3. Followed the Photoshop GIF tutorial
   1. Dropped the screenshots in as Layers

Some design decisions I made, which can easily be altered if anyone has strong feelings:

• Excluded some of the click-through screens from Login.gov to make the GIF loop shorter
• Made the start and end frame delays (two and three seconds, respectively) longer than the middle ones (one second) to emphasize the "speeding through"
  • One second seemed like the right duration to allow people to read the title and get a sense of each frame/page, without leaving time to get lost in the fine print
• Didn't bother showing anything "below the fold" of any page
• Only showed the form fields filled-in

Closing this as done, but happy to tweak based on feedback.

[vykster]

@afeld would you also please make a version of this with the short-flow -- presuming someone already has a login.gov account?

[afeld]

@srhhnry @Indiajar Do we have the screens for @vykster's request in Figma, by chance?

[srhhnry]

Yup, it's a prototype (so under the prototype section) entitled "Senior Mobile Current Login User Prototype" and found here: https://www.figma.com/file/SeSd3LaLd6WkbEYhmtKpO3/Benefits-(IAL2-Login.gov)?node-id=5414%3A21915

Not sure this is helpful, but I made a video walkthrough of that prototype for Olivia, which can be found here: https://cal-itp.slack.com/files/U032BKMAHA9/F03VCRWCYLB/benefitsdemo_currentloginaccount.mov