Website Refresh: openbadges.org

Last week I worked with the Open Badges team to refresh the openbadges.org site. I came into the project about 2 weeks prior to the launch, so there were some seeds of ideas to work from- mainly due to the work of Erin Knight, Carla Casilli and Sunny Lee, however some of the things that I worked on include:

• A new, clean and streamlined look and feel
• Many new assets including character illustrations
• Direct entry points for various constituents
• A slideshow and quiz that educates you about badges and then gives you a chance to earn a badge 
• A pathway to push the badge to your Backpack and check out all the features

The launch was timed to coincide with the Digital Media and Learning conference, which gave me the unique opportunity to design the site and then immediately watch tons and tons of users try it out and respond. Obviously users immediately responded to the design, because they were used to something that looks sorta like this:

and got this:

 

Since the site was very content heavy- I tried to create illustrations  that where whimsical but fairly clean. I will say that we did add some fun little animations to the project just to spice things up a little. Gladis, the name of the character on the landing page actually wiggles after about 20 seconds for example and the badges actually scale up on hover. We did this to infuse some sense of play into the work. With the characters, I was ultimately trying to have each character embody the identity for the pathway to engagement with the site: an issuer, user and displayer. I did a ton of illustrations  and work for the site- but  here are the character illustrations:

                          


Another feature to the site is taking a quiz to earn your first badge. To do this, we designed a modal window that would allow a user to get a brief schooling in badges-- get the ironic pun? This is something that definitely needs to be iterated on some more to be a bit more of an authentic experience- but hey, we are Mozilla and we iterate in the open.

Since I came into the project as a bit of a special forces unit, I am probably not going to be too involved with this work in the future- but I really had a fantastic time working on it and being part of a bigger team. Big shout out also goes to Mike Larsson who worked closely with me on coding and helped make  decisions about the design direction. And of course- Brian Brennan, Atul Varma and Chris McAvoy helped us to iterate and pushed the project forward.