Digital Credentials: Updated UX

[rhysyngsun]

• When a CourseRunCertificate or ProgramCertificate is created, a learner should then see a corresponding button/notice in their xPro dashboard that digital credentials are also available
• This button opens a popup dialog
  • On Desktop, this dialog explains that this functionality requires a mobile device (see mockup)
  • On Mobile, the learner sees buttons to install/use the mobile wallet app
• On mobile, learner is able to start the digital credentials creation flow via a deep link
  • On the technical side, this involves a browser redirect to the deep_link_url in the API response

APIs:

POST /api/v1/course_run_certificates/<UUID>/request-digital-credential/
POST /api/v1/program_certificates/<UUID>/request-digital-credential/

The request body can be blank or {}

Mockups

Desktop

Dashboard: https://projects.invisionapp.com/share/NE10C77DGTDB#/screens/446047644_Dashboard_Digital_Credentials_
DC Popup: https://projects.invisionapp.com/share/NE10C77DGTDB#/screens/446047646_Dashboard_Digital_Credentials_PopUp

Mobile

Dashboard: https://projects.invisionapp.com/share/NE10C77DGTDB#/screens/446047645_Mobile_Dashboard
DC Popup: https://projects.invisionapp.com/share/NE10C77DGTDB#/screens/446047647_Mobile_Dashboard_PopUp

[rhysyngsun]

PR for the backend API is over here: #2163

[arslanashraf7]

@rhysyngsun, I had a few queries while I'm working through this,

1. Is there a feature flag that we need to take care of while doing this ticket?
2. I am assuming the APIs that you provided will be consumed when the user clicks the Download Digital Credentials button here on mobile mock. Also are we handling the response of the API in this ticker?
3. Is there any transition states for showing Digital Credential on the dashboard and on mobile e.g. show in case if the user has not downloaded digital credentials already?

[rhysyngsun]

@arslanashraf7

1. The feature flag FEATURE_DIGITAL_CREDENTIALS was previously used and is set in RC at the moment, so you can reuse that.
2. Sorry, i guess the issue above wasn't clear, you should redirect the browser to deep_link_url. The serializer for this API response is here for some context, but you can also test it out in the DRF browseable API.
3. I'm not sure on this one since the digital credential itself is in theory the same as the certificate. The difference is the digital credential is something that can be claimed and associated with something external. I can see a use case for both hiding and continuing to show the button. @pdpinch, @Ferdi any thoughts?

[pdpinch]

@arslanashraf7 asked:

Is there any transition states for showing Digital Credential on the dashboard and on mobile e.g. show in case if the user has not downloaded digital credentials already?

@rhysyngsun replied:

I'm not sure on this one since the digital credential itself is in theory the same as the certificate. The difference is the digital credential is something that can be claimed and associated with something external. I can see a use case for both hiding and continuing to show the button. @pdpinch, @Ferdi any thoughts?

I'll just confirm Nathan's uncertainly. I really need to try out the whole flow before I can make decisions on UX refinements like that.

For now, let's just keep it simple and show it always. We can reconsider once we understand how things work better.

[arslanashraf7]

@pdpinch, Or if anyone could provide, Do we have below values available:

1. Do we have digital credentials consortium build link to be opened against Learn More button click ,as mentioned in this mock.
2. Can you provide me the link of the store application to direct the user to when the user clicks on Download On The App Store button as seen in the mock

[pdpinch]

We don't have final versions of any of these URLs yet, but please don't let this block us. We need to get this up on RC for functional testing. We can fix these links in a follow-up PR.

Do we have digital credentials consortium build link to be opened against Learn More button click ,as mentioned in this mock.

for now, we can use https://digitalcredentials.mit.edu/

Can you provide me the link of the store application to direct the user to when the user clicks on Download On The App Store button as seen in the mock

Neither the Apple version nor the Android version is public yet.

For iOS, I think we can use https://testflight.apple.com/join/fERBVJoU as a placeholder for now.

And for Google, let's use https://play.google.com/store/apps

[arslanashraf7]

@pdpinch, Sure thing! I'll just add the placeholder values and I don't think there is a google link button in design, but we can add it later when we decide to.

[arslanashraf7]

Closing, Associated PR(#2168) was merged and deployed on production!