Design review of Teachable module for Club Captains

[flukeout]

The Clubs team has created an account and some training materials over at https://mozilla.teachable.com/

I'll do a design review to make sure the customizable elements like typography & imagery are "on-brand" and lookin' sharp.

This issue has a few parts

• Provide some actionable guidelines for the Clubs Team so they can make changes
• Provide the Clubs Team with assets like icons, logos & photos to achieve the above
• Create a scaffolding for a style guide for other teams based on the findings

Progress so far This design audit doc has an outline of the needed style guide components as well as a list of the areas where the design can be improved.

Up next

• Provide some guidelines to the team to fix the problems

[Carotejada]

[flukeout]

In my proposed changes for the Teachable presense, I've drawn from the colors and styling that we've established in the Clubs Guides like http://mozilla.github.io/learning-networks/clubs/design-thinking/. This gives us some colors & imagery to work with.

Teachable Setting Changes

These are the proposed changes to be made within the Teachable interface, in the Theme settings panel.

Colors Listed according to the available settings in Teachable..

• Nav Bar & Footer Background - #294690
• Nav Bar Links - #ffffff
• Buttons & Links - #009a6f
• Headings - #1e3369
• Homepage Heading & Subtitle - #ffffff
• Course Page Heading & Subtitle - #ffffff
• Body Text - #8c8c8c

Here it is in context...

Logo & Background

• Homepage Background Image
  • Currently red with the Fundraising fox, which is not on-brand
  • Potentially use http://mozilla.github.io/learning-networks/clubs/assets/img/header.jpg
  • Use .5 Darkening Overlay
• Replace Site Navbar Logo with transparent white image
  • Use https://dl.dropboxusercontent.com/u/109902/mozilla-clubs-logo-header.png

Typography

• Use the Open Sans option

How does this make things look?

Here's the School Page...

Here's the nav bar when it's collapsed...

To-do

• Figure out Favicon
• Figure out avatar for the Author
  • Maybe create a Clubs version of the Dapper Fox mascot?
• Provide guidelines for the photography & type treatments in the course content

[flukeout]

Another option is to go with a solid color for the homepage, which mimics the Clubs Guides a bit more, I've mocked it up here.

cc @amirad @Carotejada What are your thoughts about all of this so far?

[amirad]

Looks on brand! I'm pro solid colour.

[amirad]

@flukeout I also just gave you admin privileges on the site you can make any changes right in the program and/or let us know what we need to change

[Carotejada]

Thank you @flukeout I like the solid color option! As @amirad said, its on brand.

However it seems a bit "serious" for Clubs. I wish we could communicate some of its essence: playful, fun, engaging, diverse and multicultural.

Is there a way we could have the Fox? @hannahkane share with us this one:

[flukeout]

@amirad Thanks for the admin priveleges, I'll dig around a bit.

About the fox - we've had feedback from MoCo that thare are too many foxes suddenly floating around. The fox you're suggesting is from the End of Year fundraising campaign specifically, so I don't think we should re-use it. Creating the Science Fox kind of set a bad precedent.

I think the bigger problem is that Clubs doesn't have a well-defined identity and logo, beyond a couple of colors and the "Mozilla Clubs" wordmark. To make things more fun and approachable, I think we should rely on some positive and inviting photography (the one I chose might not be the best one) - do you have a resource of good, high-quality photos from clubs?

Secondly, we should discuss taking on the work of creating a true visual identity for the Clubs Team. I'll being it up in our stand today and report back.

So yeah, do you have some good images we can try out?

[Carotejada]

@flukeout let´s have a cat instead! [Mal chiste]. You know better about all this fox thing, so I won´t insist.

I agree with you. We need an image for Clubs, it will help us a lot, and I know you can help us create something beautiful.

About the pics, we relay on our club members' publications. I am not sure about the resolution but let me look for some good ones, and I will share them with you.

Thank you!

[hannahkane]

Sorry for causing confusion with the Dapper Fox earlier! I agree with @flukeout that we shouldn't use it in this context.

I wouldn't let the branding piece be a blocker for Teachable. We can add this to our backlog eventually, but may not be able to get to it soon. If you're comfortable with it, @amirad and @Carotejada, I'd suggest making use of the solid color background and some nice photographs in the meantime.

Also - I might be alone in thinking this - but I actually think a photo of a human might be a more welcoming image for the Instructor avatar anyway. :)

[Carotejada]

No worries @hannahkane we can find a way to make it cool without the Fox. BTW this looks really good https://redpen.io/jv7dd38e552814c20a.

[flukeout]

Since I have admin access to the Teachable account, I've made some changes...

Changes made so far

• Using all of the colors suggested above above
• New favicon - a white mozilla "m" on blue
• New School Hero image - dark blue with faint light logo (see below)
• New Course Hero image - I darkened the existing image so that the course title and CTAs are more visible

Up Next

• Making styling updates to the course content

Currently it looks like there are two courses, Clubs Training Modules & Clubs Training Moduiles _backup - will you be copying the content in _backup to the empty course when it's ready?

If so, I can I make my changes in the _backup course? cc @Carotejada @amirad

[amirad]

These look great! Thanks Luke.

We're not copying info from the backup but you now have access to the actual content so beautify away!

[Carotejada]

Thank you @flukeout it does look neat! Just ignore the backup. We will update it once all changes (design and content) are applied.

[flukeout]

I'm going to close this issue and file additional follow up issues.