I'm closing tickets that probably could use some TLC from a CSS expert. Tracking items here.

• clean up the section around the vimeo video.
• clean up the email sign up forms
• final badge award slide backpack needs to be centered.
• add top and bottom lines to 'what are badges' section
• add top and bottom lines to 'earn a badge' section
• format button in 'earn a badge' section

cc/ @carlacasilli @iamjessklein

Breaking down this issue into its component pieces: #2

cc/ @carlacasilli @iamjessklein

filepicker.io allows "uploads" from flickr, youtube, google drive, dropbox, or your local filesystem. It could be a great way to simplify submitting evidence for a online challenge badge. The API is entirely in JS, which is a plus.

/cc @threeqube @erinknight @iamjessklein - go to https://www.filepicker.io and try out the demo on the homepage.

@iamjessklein mentioned the vertical scroll doesn't seem too obvious. Should we request a design update?

The folks at wish would like to have their logo added to the splash site list. Below is a copy of their logo.

https://www.dropbox.com/s/v6eb53lvyzcnf50/New%20Wish%20Avatar.jpg

Vid: http://vimeo.com/31575035

I started sketching out some different directions to go with. These are all exploring the "E" = engineering badge:

• find email list
• create account
• confirm email address that the lists should come from
• create form
• add form to site

cc/ @carlacasilli @iamjessklein

• transfer existing badge 101 from openbadges.org
• update copy with chicago specific copy
• add chicago badge

@chloeatplay will be tackling this issue.

For the activities a user needs to be able to apply for a badge by uploading evidence using filepicker.io

The youth access an activity and reads the challenge page. There are instructions in page…. points out to sites. The youth should then be able to submit link to apply for the badge. Their application and evidence goes into a cue. Then, mentors from DYN will go to the cue via a "mentor" login through the site and review the submission and type yes or no, and possibly some small level of feedback.

@chloeatplay will be tackling this. I can't assign this to her until she is associated with the CSOL repo- attn @cmcavoy

It seems like the design is too wide and there's this weird horizontal scroll.

Is that something we can fix Chris?

Here's a mockup that adds some more details to the badge elements, an updated header, and overall more polish. Feedback welcome. All of this is fairly easy to incorporate without any DOM changes.

• take into account remixability
• take into account application of issuing organizations branding

cc/ @threeqube @carlacasilli

need to assign to Radhika

Should have routes to all the url's on the IA doc.

After setting a date for user testing, this plan should involve:

• identifying screeners and test scenario development
• recruiting participants, finishing testing scenarios
• testing prototype and begin analysis
• finishing analysis and reporting findings/feedback

This doc I created for Webmaker might also be useful : https://etherpad.mozilla.org/webmaker-usertestingkit

http://toolness.github.com/chicago-badge-studio/

This badge builder will be used by 100+ chicago orgs to design their badges.

https://etherpad.mozilla.org/badgebuilder
http://cl.ly/image/2q0j3b1Y2G0z

The ARIA landmarks of banner and contentinfo are used but not one for main (to highlight the main page content).

Personally this feels like the most important one. Looking at the content what is currently in the header looks rather like the main content so might want to have a think about that one.

• Change "programs" filter to "categories"
• Change /badges to /programs
• Change individual program view to include program description at the top, and badges at the bottom, with optionally more than one badge per program.
• Remove "recent badges" from claim page
• Add text input on claim page for "Claim Code"

http://www.google.com/webfonts/specimen/Open+Sans

We've got this pattern a few times, for example the partner logos:

<li><img src="img/organization_logos/after_school_matters.jpg" alt="After School Matters" title="After School Matters"></li>

This will cause a screen-reader to read out the name of the partner twice, and I don't believe is what is desired...

From the OpenBadger wiki,

The learner sees an ad on a bus for the CSOL and goes to the CSOL Portal. They find a listing of available programs and filter them based on their interests. Filters include things like location, STEAM classification and age level. When the learner finds a program they're interested in, they click through to the issuer's site where they find details about participating in the program.

• @threeqube to confirm https://www.dropbox.com/s/npo3swpy7ntszz9/Website%20language_updated.doc is the most final of final copies
• update copy

Currently sends the user to mozilla.org, need to change that to CSOL website.

• resize logos
• add logos to page

Logos are here: https://www.dropbox.com/s/zge8c8mqmtzmof8/morel%20ogos.zip

Hey @jdotpz I don't think I have access to the Goog account, can you set this up and attach the code to this ticket? I'll add it.

Breaking down this issue into its component pieces: Breaking down this issue into its component pieces: #2

Use this as a way to figure out the best way to design the templates ( #7)

These should take into account possibly designing a badge for select S.T.E.A.M. categories.

cc/ @carlacasilli @threeqube

need to design to Radhika

via bootstrap

Right now, after user selects answer, the button's don't reflect correct answer. Maybe we can have a visual check mark next to correct answer?

@stenington and I took a stab at this, iterating on the work that @andrewhayward already incorporated into http://csol-wireframes.herokuapp.com/

After researching ( http://dl.dropbox.com/u/52395152/coppa.pdf) we came up with a list of common elements for this kind of work:

• choose a fake name
• choose an avatar
• create a password
• first name + last name (optional)
• guardian's email (parent or coach)
• birth date
• agreeing to terms and conditions
• confirmation email

Ultimately this is the flow that we came up with:

Minimal Sign Up flow (with Persona):

1. Choose learner or coach/guardian/parental unit
2. (a) If signing up for learner account:

• present birthdate selector

• user enters birthdate

• if < 13:

  1. present username box (username maker) and parental email box
  2. completes and guardian is sent email - email instructs them to follow the workflow for signing up with persona for a guardian account to manage the child account, link to guardian login (we'll need separate guardian log in)
  3. user is logged in and able to do stuff? or has to wait for guardian to approve? not sure.

  *if > 13:
  1. present persona login button
  2. if creating persona account- users are given a prompt from persona to check their email for a confirmation. Confirmation Email says : blah blah redirecting in 5... or they have a shim and are logged in automatically on the site. user returns back to CSOL site after using persona and is signed in
  3. if they have a persona account - user signs in.

Notes: Persona alternatives? IF we wanted to offer alternatives to Persona as well. Any service that provides the site with the user's email address would work. we could offer it for >13s and guardians. The email would become the email that is required for badge issuance/the email that an <13 reported as their guardian's email

Devil's Advocate: if we're storing usernames, passwords and a guardian email address for < 13s. why not store username, passwords and user email for >13s and guardians? i.e. why use persona at all?

The next step here would probably be to wireframe this one out and then @cmcavoy can run it by legal.

http://badgemaker.toolness.org/

This badge builder will be used by 100+ chicago orgs to design their badges.

Brief on Badge Builder: https://etherpad.mozilla.org/badgebuilder

Will be assigned to ocupop. City needs this by March 11 meaning city needs site to be LIVE by March 11.
This needs the following:

• Finalize copy
• Finalize logo
• Have email sign up available

Right now the meta description is empty - I'm fairly sure when google indexes pages without a meta description it uses the first bit of text it finds on the page as it's description in search results.

In the case of the HTML we've got that would be

You are using an outdated browser. Please upgrade your browser or activate Google Chrome Frame to improve your experience.

I think we should be better safe than sorry and put something a bit more meaningful in there :)