- 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
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.