The “Lovebomb”: A digital learning onramp
Toward the end of last year, my colleagues Atul & Jess created an awesome project — what they called the “Love Bomb Builder.” While essentially just a tweaked version of the Web page maker they use for Hackasaurus, it’s pretty awesome — while having fun along the way, it provides an easy way to get your hands a little dirty with code, learn something, and then have an awesome (better than a) card at the end that you can be proud of and share widely.
But while it’s already on the right track, what we want to do is further evolve it, into something a bit more polished and broadly approachable, which could satisfy the following three objectives — and launch for Mother’s Day:
1) Provide an approachable, fun onramp into our learning offerings
2) Teach a little bit (and possibly more) of code, without being too scary for a non-coder
3) Grow our base of supporters
Michelle Levesque and I did some brainstorming this week, and here’s what we started to come up with on where it should go from here. A basic framework (along with plenty of outstanding questions) is below — whattaya think?
— Take Jess’s “<3 Generator” mockup as the starting point. (Concept #2 in this post.)
— Have a few more initial templates the user could choose from (some themed around Mother’s Day, for launch)
— Have the main creation go as follows:
- Allow the user to click on elements of the card to change them (as in the mockup). This would allow the user to edit without actually directly altering code, but would show the code surrounding the element. Ideally, this would also include Atul’s positioning add-on to allow people to easily move elements around on the page.
- Have the right-hand 1/3 of the page show the lovebomb’s code as it stands (updating as elements are edited as in step 1)
- Have key page elements highlighted in the code (colors & fonts, in particular), so a user could click on the highlighted piece of code and choose from a drop-down menu of options and see the love bomb updated immediately.
— The code editor should be easily hidden, and we should be able to govern based on a URL parameter whether or not it’s initially visible by default. This would allow us to tailor the initial “cody-ness” of a user’s experience, so that those coming in through less technical channels (e.g. a tweet from @Firefox or the FF & You newsletter) can still have something that’s approachable.
— Once published, we should provide the current menu of options to publish, as well, hopefully, as a direct “email this lovebomb” ask that then allows us to have an email signup checkbox (this could be integrated with a BSD share form or something?).
— We should add a persistent email signup as a footer, like in some of Jess’s other mockups.
— And we should create a directory/gallery of people’s lovebomb’s, so that others can see what’s been done and build off of it.
Some outstanding things to think through:
— What code, precisely, do we display around each element when someone clicks to edit? Is it too imposing if we expose the text as well as the html and css that govern the element?, since the css is what contains that actual words that people will see (colors, underline, etc). Perhaps we could make it so that when you hover over any bit of the css, there’ll be an explanation of what it is? Or we could build in dropdowns/menus to allow you to change the formatting without changing the code, but that then show you the resulting change in the code?
— What are we actually calling this? We don’t want “Lovebomb” to be what this goes broadly with, but it’s not like it’s an card maker, either. Any thoughts, internet?
— How well can we integrate email signup as an action, so that we’re able to keep users engaged and move them further along in learning after they make their love bomb? Anything we’re missing besides figuring out an integration at the end and having it as a persistent footer?