MVP review

[mattrosno]

The intent is for this microsite to live at badges.carbondesignsystem.com so we don't need to mess with GitHub authentication and the GitHub and Acclaim API logic on carbondesignsystem.com right now.

I'm using our default page type for future portability, so if it makes sense in the future for this to be natively part of carbondesignsystem.com, it'd nicely plug in.

Current status: I have not implemented the actual POST to Acclaim to issue the badge as well as on-success POST to SurveyGizmo to capture the feedback. Also, have not built form submitting error and success messages. Right now a valid form submit just shows form data in an alert.

Link to review: https://carbon-badges.vercel.app

More background here: https://github.com/carbon-design-system/carbon-website/issues/986

Design Review

• [x] Side nav auth with GitHub
• [x] Copy
• [x] Loading states
• [x] Form fields
• [x] Form validation
• [x] Form messages

Code review

• [ ] Need tests?
• [ ] Need comments?
• [ ] Any vulnerabilities?
• [ ] Storing token okay?
• [ ] Need to pass state in GitHub OAuth? "An unguessable random string. It is used to protect against cross-site request forgery attacks." https://developer.github.com/apps/building-oauth-apps/authorizing-oauth-apps/
• [ ] Coding conventions

Unauthenticated

No badges

My badges

Pristine form

PR validation, all states

[jeanservaas]

I have one initial question... why do we need a dedicated website for this?

Also I have a few issues with the design / user flow here:

The unauthenticated view breaks the pattern for the nav, rather than seeing where I am, I suddenly see a log in panel. I can see maybe having a prompt in the main content area... and you do have a log in prompt there too, but then there's redundancy.

Also, @aagonzales made a good point, logins / logouts are usually in the header area.

More than just design finesse, I think this needs some finesse from a UX/user flow perspective and I would love to get some other opinions @laurenmrice @aagonzales @designertyler @janchild

[mattrosno]

@jeanservaas rationale for doing this in a separate site for now is included in the linked issue - specifically this comment on: https://github.com/carbon-design-system/carbon-website/issues/986#issuecomment-666586587

Since this uses GitHub OAuth flows, there is no use for login inputs. That gets handled on the GitHub side of the authentication flow.

I referenced the "split-screen" example spec from here: https://www.carbondesignsystem.com/patterns/login-pattern, each page only having one primary button here: https://www.carbondesignsystem.com/components/button/usage.

Our UI shell usage has no mention of log in/out which may be the underlying issue that you've identified: https://www.carbondesignsystem.com/components/UI-shell-header/usage. If that's the case, is there a path forward that isn't blocked by UI shell guidance?

[designertyler]

You might be able to get rid of the left nav and only use the header. I can help spec a simple login/logout with using header conventions if you want.

An example of Cloud's logged out Cloud's logged in

This seems unnecessary with the email field down below saying something similar. I'd vote for removing the notification since this message pretty clear

What about a vertical progress indicator to track the completed steps rather than the notifications?

I'd try to avoid showing an error before the user has had a chance to prevent it.

The yellow "not found" message might be misleading. It looks like there's an issue with connecting my GH account, but it might be that I haven't started that step.

Can I only leave feedback if I click the "Apply for badge" button? It might be good to let someone leave feedback if they aren't able to apply for a badge by separating this feedback from the badge application.

[mattrosno]

Log in/out

I'm game for whatever. I thought this "Join GitHub" link was nice, although if applying for the badge, you should already have a GitHub account. If a log in link in the header, would that take you to a log in page that has this below?

My emails

I considered not having that and only relying on the email dropdown and help text, but then we have to way to tell them via direct link how to verify an email address. https://docs.github.com/en/github/getting-started-with-github/verifying-your-email-address

I'm expecting that most people use personal email address with public GitHub, and have not yet verified their work email address. A badge application needs an IBM email address for the badge to show up in Bluepages, so verifying your work email is the one prerequisite here beyond doing the tutorial, so we need to be upfront about that.

Also, the "My badges" section below it is populated based on verified email addresses. Another reason why I pulled it to the top.

Badge application

Progress

I considered and tried a vertical progress bar but ran into UX and technical issues. Technically, clicking on a step tried to submit the parent form and I couldn't find a workaround. It's as if our progress bar is not built to reside in a <form>. And the UX, I wanted to directly link to the found PR for each step. Instead of messing with progress item tooltips to show that information, it seemed the straightest forward to simply include the PR links in notification messages.

Not found

We could go with "not completed"? We're trying to communicate that the PR for step X for tutorial Y does not exist for the logged in user.

Feedback

I'm intending to only collect feedback when applying for the badge. It's all optional. There's always the standard webpage feedback dialog to collect random page feedback?

[jeanservaas]

Seems like we could have a little more fun with this if it's going to be a stand alone without really pushing too hard on the theme.

I'd expect to see some kind of landing page if this is a microsite. Since there's no real navigation and a lot of redundant info when you land on the site, I think you could just ditch the side nav altogether for the whole experience... just like we did for ibm.com/design and the new accessibility site.

But that way, we get rid of a dead zone and put the log out where people would expect to see it, up at the top in the header.

Haven't totally figured the header/log out pattern out yet, but you get the picture

@designertyler also made a lot of great points above about some ways to fine tune the experience internally, which I think we should look at. But I wanted to first just address this thing as a microsite, and really make it feel like one.

[mattrosno]

@jeanservaas @designertyler I wasn't expecting all this but I like it. I'd be game to 1) drop side nav, 2) informational log in page, 3) log out in header, 4) standard badges page style, so it still feels part of Carbon website.

And on the badges page, using only available components (from Carbon components and Gatsby Theme Carbon components) for simplicity and speed.

[jeanservaas]

Great, glad you like it.

I agree, no new components, banner style is exactly as Carbon's is, the only real difference is the informational log in/landing page. I can do the illustrated version of the landing page, but the simplest thing to do probably is to just use the logo. We can choose between a dark or a light landing page and I think either would compliment the Carbon site.

The only slightly new elements that might require very minimal (I hope) dev intervention are these:

1) positioning the logo graphic on the landing page

2) It would be great to put the Carbon pictogram at 64px on the site in this position to hold the space, since we don't have the side nav. This is something that is already happening on the accessibility and /design sites... Everything else on the page is exactly as it would be on the Carbon site. It could go straight into markdown.

3) Deciding on how to position the login on the header... maybe @designertyler can help with this

[theiliad]

This is great 🙌 🎉

[mattrosno]

@jeanservaas no preference light or dark for login landing page. Can you also draw it up on mobile and provide Carbon pictogram source and I'll make it happen?

I say we don't do any header links. We can link to Carbon and GitHub in some badge page resource tiles.

Having it say the logged in user's name (or GitHub handle) with log out icon (and text if you prefer) all in the right side of the header makes sense here.

[mattrosno]

Some concepts from @designertyler on possibly moving My Badges, Application, and Support to 3 page tabs, as well as showing all available badges and progress towards each to incentivize completion of all... or simplifying the page so the form is in a modal.

[theiliad]

Some concepts from @designertyler on possibly moving My Badges, Application, and Support to 3 page tabs, as well as showing all available badges and progress towards each to incentivize completion of all... or simplifying the page so the form is in a modal.

Looks great!