Skip to content
February 17, 2012 / Ben Simon

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.

It’s evolved a bit since then — both in terms of what’s actually at and in terms of some additional mockups that Jess put together for what it could become.

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:

  1. 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.
  2. 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)
  3. 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?



Leave a Comment
  1. lia sophia scam / Jan 18 2014 10:23 am

    There are literally hundreds of options, which
    can be overwhelming. After a brief history on the Lia Sophia Company,
    Deb showed a few of her favorite pieces and
    then told us to have a ball. Usually, the
    particular non-stick pan should be washed soon after something is cooked in it.

  2. I got this web page from my friend who shared with me on the topic of this web page and at the moment this time I am
    browsing this web site and reading very informative articles or
    reviews at this time.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: