Improve UX/UI on Badge Review Page

[chloeatplay]

Problem "Is it possible to fix the layout of the text on the review pages so that it is easier to read?"

@iamjessklein is this the same like #70 ? Truth is that w redesign of this page woudn't be bad - to fit our original display ideas ehemm ehemm ;)

[iamjessklein]

@chloeatplay : yes it's the same as #70 and I agree, if it matched the original designs this would solve the problem as well. :+1:

[chloeatplay]

Had some time yesterday/today to update the original lovely UI designs Jess made based on Nichole's feedback and the user testing to achieve a) better readability b) improved UX/UI to make the experience faster more enjoyable c)show an example of how Rainbow Comments (#80) might be implemented in this page, without changing the API. These changes will improve our Aestemia offering and make it more appealing / product like for others than csol to use. Don't freak out- I m labeling this P3 :dancer: , so not for immediate release, even though we could start with pieces of it.

Layout without comments

Layout with comments (see also notes below)

1) Improved badge display so the summary is integrated 2) Created a slideshow for the evidence to improve a) readibility, b) display of work. This is an idea we could also implement in the core product as a portfolio/ evidence display module 3) Improved the checklist so "required" fields are highighted and checklisting is more playful 4) Integrated and designed the Rainbow Comment Idea re: #80 to match @toolness thinking of implementing this without changing the API.

Looking forward to everyone's feedback :koala: :palm_tree: cc @iamjessklein @erinknight @threeqube @toolness @cmcavoy @carlacasilli

[toolness]

Very slick!

[carlacasilli]

Very nice, @chloeatplay!

Question: does the X show up on rollover or when someone has indicated that the is /not/ included? I tend to read large red X's as this thing is missing.

[threeqube]

Joining the crowd. :+1: really nice @chloeatplay!

QQ as well: Where it says in pink 1) Badge Name, Issuer & Description (Links to activity page for more details), do you mean this links out to the badge detail page on the CSOL site?

[chloeatplay]

Thanks all! :fireworks: @carlacasilli good question, my thinking is that everything is in low opacity (like the last three ones) and when you rollover either the green [check] or red [x] come up. You can click either. I believe its pretty standard ux on mobile, @iamjessklein might have other ideas/suggestions too for sleek checklists.

@threeqube Exactly 1) Links to the CSOL site, so mentors can be fully aware of the activities the learners had to do to apply for this badge.

[threeqube]

Gotcha. Think it should pop open a separate window.

Btw, :heart: the rainbow comment facial expressions!

[iamjessklein]

@chloeatplay hover on mobile is not a super easy interaction so I think that you would have to have more of a click friendly flow on mobile devices - low opacity > touch > full opacity. But for this your solution works well. While we are on the topic of mobile, however, have you considered a responsive version of this page? There is a ton of information packed into the page before a user even get's to their main call to action, I might play around a bit with the hierarchy.

One additional thought here is if there is a way to progressively signal to the mentor that their assessment is about to "APPROVE" or reject the users badge application? You updated the look and feel of the "required" tags which definitely improves legibility, however taking that a step further, could there be some indication like you had on your original mockups with the koala, where you slowly are affirming that the applicant is getting the badge :+1: or not getting the badge :-1: based on your clickable interactions?

Great work, this looks really clean and improves legibility overall.

[carlacasilli]

Hey @chloeatplay @threeqube @iamjessklein , is this issue still open or should it be closed?

[chloeatplay]

open.

[threeqube]

Yep.