888272 - Design a webmaker.org-styled Thimble template for teaching kits

Status: RESOLVED FIXED

(Webmaker Graveyard :: webmaker.org, defect)

Description

[Cassie McDaniel [:cassiemc]]

We hope to deliver a design by end of next week or soon after that is based on some of the other internal page designs of the site, along with the style guide (see bug 888251). We'll then template it up so content team can have a solid base to remix from that matches the current site style/voice.

Initial requirements for this are gathered here: https://etherpad.mozilla.org/webmakerstyleguide We will be copying content from existing guides as a model for future guides.

Comment 1

[Cassie McDaniel [:cassiemc]]

Attachment: First stab at /teach template

This is where we ended up last week with the Teach thimble template. Still a ways to go. Most notably, we still need to consider these things in the design:

    Mobile view

    Expandable tags section

    way to incorporate photos

    better way to incorporate print icon

Still planning to have a more finalized version of this for Tuesday after the Webmaker call.

Comment 2

[Cassie McDaniel [:cassiemc]]

Some more designs here:

http://cl.ly/Q8lp
http://cl.ly/Q9Md
http://cl.ly/Q9GD
http://cl.ly/Q8sy
http://cl.ly/Q8sf

Will add the next steps after the meeting with Brett, Laura, Matt, which is happening shortly.

Comment 3

[Cassie McDaniel [:cassiemc]]

Next steps:

Teaching kit
* like the overall direction
* more options for how a small photo could be incorporated
* add "badges" that align to web lit standards as component (prob. in righthand column)
* remove "who is this for"
* simplify tagging expansion functionality / design for lots of tags possibility

Activity
* How does this look without an illustration
* Quick overview should include:
  How long it takes
    15-30 min
    under an hour, 30min - an hour
    1 hour +
  What is the setup / Audience?
    entire room, small groups, individual
  materials
* Will be moving forward with blue background, 2 column layout (http://cl.ly/Q8sy)

Some bugs to be filed:
* Laura/Matt: comprehensive list of kits and activities available now (so we can build assets)
* Laura/Matt: list of standard tags that would be used for both skills and level to provide consistency across kits. Should align to web literacy standard.

Cassie needs to also design for:
* mobile views
* print styles
* views with generic "fill in here" data

Full notes from our meeting are here under July 9th: https://teach.etherpad.mozilla.org/GuideRevamp

Comment 4

[Cassie McDaniel [:cassiemc]]

Attachment: Teaching kit template v3

Have managed to simplify this a bit more. I've removed the "who this is for section" and I've combined "Skills" and "Level" as both are tags, and this should make it easier on the user to update. Moving to them to the right hand column also allows them to easily grow dynamically. I've removed the "all activities" link, because essentially clicking on the green activity tags would do the same thing (bring up a search for all activities).

We'll need to figure out how tags can technically be added to this template in an easy way for users, as we'd like to make the tags clickable – clicking a tag will bring up a search result with that tag.

Note – the Badges area on this design will NOT be implemented in this current iteration of the build, but I've included it to show how we should easily be able to add it as a design 'component' in the side column, once the functionality is in place for users to earn and display badges through Webmaker.org. So, just a placeholder for now.

If there are is other feedback re. this design, let me know, otherwise I'll ask Dale to start building this out tomorrow.

Chris, can you review the design of this for me?

Comment 5

[Laura Hilliger [:epilepticrabbit]]

Looking great Cassie! Quite like the simplification. 

Does it still make sense to call that section "skills" or do we need to find another word for it? If all tags are grouped together, maybe we should just call that area "Tags"?

With the new kits, we should be tagging "language" as well, particularly b/c we have people already translating this content.

Finally, in the Style Guide discussion - we need a way to indicate that makes have associated activities/kits or vice versa. Just wanted to call it out because I didn't see it in the etherpad. Example:

6 word memoir MAKE on the HOMEPAGE has a button that says something like "Teach this" which leads to the Teaching Kit the make is associated with.

Comment 6

[Cassie McDaniel [:cassiemc]]

(In reply to laura from comment #5)
> Looking great Cassie! Quite like the simplification. 
> 
> Does it still make sense to call that section "skills" or do we need to find
> another word for it? If all tags are grouped together, maybe we should just
> call that area "Tags"?

"Tags" works for me.

> 
> With the new kits, we should be tagging "language" as well, particularly b/c
> we have people already translating this content.
> 

I'll confirm that this should be a tag, it may need to be another field. 

Chris/Ali, can either of you comment on this? Do we have a localization field in the Make API that allows us to list the languages each make is available in? If so, this should allow us to surface the language in its own area rather than lumping all the tags together.

Laura, for most other attributes, you should be able to tag it whatever you want, just make sure the categories and options show up in the list of tags you guys are hacking away at in bug 891526, so we have a clear idea of what the tags will be used for and can provide some consistency across the UX.

> Finally, in the Style Guide discussion - we need a way to indicate that
> makes have associated activities/kits or vice versa. Just wanted to call it
> out because I didn't see it in the etherpad. Example:
> 
> 6 word memoir MAKE on the HOMEPAGE has a button that says something like
> "Teach this" which leads to the Teaching Kit the make is associated with.

I'm not sure we have this functionality planned for at the moment, there is currently no place for it in the UI. I've filed it as a separate bug, in bug 891867.

Comment 7

[Ali Al Dallal [:alicoding]]

I know that in the actual database model we have a field called "locale" which indicate what language is that project (en_US).

But Chris would be the best to confirm regarding the MakeAPI to list all of the Makes in a specific language.

Comment 8

[Chris DeCairos (:cade)]

There's a wrapper method around every make returned from the MakeAPI that queries the MakeAPI again for Makes that are localized versions of the source make.

Docs can be found here: https://github.com/mozilla/makeapi-client#locales-callback-

Comment 9

[inactivate account for kate]

Comment on attachment 772866 [details]
Teaching kit template v3

Looks good, a few things I noticed
- For each item in the agenda, the #activity looks a bit more clickable/noticeable than the item itself. Will the entire line be clickable or just the title? Also, does this layout work well well with longer titles/text? I wonder if you really need the #activity label at all
- The print button is a bit hidden/doesn't look like a button
- I prefer hanging bullet points, but up to you
- The yellow background seems kind of out of place to me, I think the colours in the main section would look better against light grey

Comment 10

[Laura Hilliger [:epilepticrabbit]]

>Also, does this layout work well well with longer titles/text?
Good point - more often that not, titles are probably more than a word. (e.g Hacking Public Domain E-Books for Use in the Classroom)

Comment 11

[aklee237]

I'm going to build on the 3D thimble page and make it a hacktivity kit in time for the Aug 1st Maker Party. I will try to incorporate some of these ideas. Thanks for forwarding me this epileptic rabbit!

Comment 12

[Matt Thompson (@OpenMatt :OpenMatt)]

 
> > we need a way to indicate that
> > makes have associated activities/kits or vice versa. Just wanted to call it
> > out because I didn't see it in the etherpad. Example:
> > 
> > 6 word memoir MAKE on the HOMEPAGE has a button that says something like
> > "Teach this" which leads to the Teaching Kit the make is associated with.
> 
> I'm not sure we have this functionality planned for at the moment, there is
> currently no place for it in the UI. I've filed it as a separate bug, in bug
> 891867.

* Designs are looking great! :) 
* I don't think this is a blocker or key requirement right now.

Comment 13

[Laura Hilliger [:epilepticrabbit]]

(In reply to aklee237 from comment #11)
@Alex - Just a couple FYIs 
--They're now called "Teaching Kits" :)
--This bug is the template production (which is blocking the production of kits, relevant to you). Bug 891407 is listing specific kits we have requests for, and there are separate bugs for individual kits where production has begun (see bug 892432)

Welcome to Bugzilla!

Comment 14

[Matt Thompson (@OpenMatt :OpenMatt)]

@ Cassie: any blockers here? Let us know if you need anything further from us to move forward.

Comment 15

[Cassie McDaniel [:cassiemc]]

Matt, no more blockers, just need time now. :)

Thanks so much for the reply Kate. I like the design review process. I've incorporated the changes I could. Going to hand off to Dale to begin building this morning.

Still to do:
* Mobile view
* Print styles

(In reply to Kate Hudson (:k88hudson) from comment #9)
> Comment on attachment 772866 [details]
> Teaching kit template v3
>
> Looks good, a few things I noticed
> - For each item in the agenda, the #activity looks a bit more
> clickable/noticeable than the item itself. Will the entire line be clickable
> or just the title? Also, does this layout work well well with longer
> titles/text? I wonder if you really need the #activity label at all

Totally agreed, I've rejigged this area.

> - The print button is a bit hidden/doesn't look like a button

Yeah I definitely struggled with this. I think having it in the top right area of the page does prioritize it, but have now also made it into a more noticeable, square button.

> - I prefer hanging bullet points, but up to you

It's tricky to have hanging bullets with this two column layout. I tried moving in all the titles in the R column, but it looked wonky. In this case, feels like the strong vertical eye-line down this column is more important than hanging bullets. But I definitely appreciate this level of detailed feedback!

> - The yellow background seems kind of out of place to me, I think the
> colours in the main section would look better against light grey

I had to change the background from the light grey as this lives under the make details bar, which didn't provide enough contrast. It's also meant to signal that this is a different section and type of content. I have changed it to blue to match the activities.

I've also designed the on-states for all links, and updated the check boxes to font-awesome icons. Will upload attachments shortly.

Comment 16

[Cassie McDaniel [:cassiemc]]

Attachment: No photo view

Comment 17

[Cassie McDaniel [:cassiemc]]

Attachment: One small photo view

"Photo" area could be a larger logo for partner content, an icon or illustration, or photo as demoed here. Should be reflect the content and match the larger teach-template thumbnail.

Comment 18

[Cassie McDaniel [:cassiemc]]

Attachment: On states for all links

Comment 19

[Cassie McDaniel [:cassiemc]]

Attachment: Print styles

Simplified some of the styles and removed backgrounds for how this should look on print. .5 inch margins all around, printable type sizes and colours have also been adjusted. Looks great on a test print! 

Some tips I found in optimizing this design for print: http://www.webdesignerdepot.com/2010/01/10-tips-for-better-print-style-sheets/

Comment 20

[Matt Thompson (@OpenMatt :OpenMatt)]

@ Cassie: one question: didn't we talk about taking out the "all activities" link? Because a) it may not be too remix-friendly and b) it feels like more of a UI element?

Comment 21

[Cassie McDaniel [:cassiemc]]

Matt - that sounds wise! Will leave a comment for Dale to exclude this piece of funcationality.

Comment 22

[Cassie McDaniel [:cassiemc]]

Attachment: mobile-teaching-kit-template.pdf

Yay, mobile styles finally done. FYI, I removed the "teaching kit" banner for this view (it was conflicting with the title by the time I made it legible, and figured it wasn't imperative).

Comment 23

[Cassie McDaniel [:cassiemc]]

The final mobile psd (teaching-kit-mobile.psd) and accompanying jpgs are in: google drive / production / teach / mobile / teaching-kit-mobile.psd.

Closing this bug, now! Any follow-up comments should be filed in the build bug: https://bugzilla.mozilla.org/show_bug.cgi?id=891546