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.

Infusing the Web with Play

Last week, the Mozilla Foundation crew held an All Hands. For the uninitiated, an All Hands is where everyone from the whole organization gets together and does mini design sprints on different topics and projects. This is super important for us at Mozilla because it gives our teams- who often are all over various parts of the world working remotely, a chance to have some much needed face to face time.

One of our sessions was focused on our potential future website at the Mozilla Foundation. With our new focus this year on really engaging different kinds of webmakers in authentic project based learning experiences, we were asked to envision what the landing page of our new site could look like. My team- which included Dan Sinker and Geoffrey MacDougall did a ton of brainstorming- but ultimately we landed on the idea that a user should be able to immediately come to our site and be able to make something.  Here is a sketch of what we came up with:

 

The basic concept here is that we offer our user various opportunities to make something with our web properties and tools. The "wheel" which is an homage to a wonder wheel or something that you would see at an amusement park or game show- is actually an interactive filter. I feel that although this might not be the end result, what is nice about this prototype is that it immediately evokes the idea of play or fun.  Sometimes we get so focused in filling our websites with information, that we lose the chance to highlight our core values and voice. I think that our mock up speaks with our voice and although there will be hopefully many iterations and other ideas, I hope that we always keep to our ultimate goal of empowering people to learn something through making something that they are passionate about.

Some Great Feedback

Last week I had my midterm review for my thesis class and then, coincidentally I had a full out crit on my website in my Advanced Web Class. I'll break it down here, because both crits were really useful and truly helped me take my work to the next level.

THESIS CRIT -( Tuesday)
For the midterm review I had three critics- Anthony Deen, Marco Tandefelt and Chris Prentice. Anthony, my studio professor is an architect who focuses on the integration of technology into his work. He is also very interested in community development and I feel that he has been a good advisor for me because of this innate understanding of the connection between public land and it's actual use by residents. Marco is a physical computing professor in the department, and I think because my project is anything BUT physical computing- he was able to offer up some good outsider advise. Chris, is my writing professor for thesis, however she is so much more. Anezka told us that Chris has an expertise in writing grants, and focusing on academic writing. However, I find that Chris is one of the few people who have really helped me to see the importance of my work and how the message of the project could be extended beyond the thesis.

Okay, so enough with the introductions. Here are the highlights of my feedback:

• I need to present my "big picture" ideas in a different way, because it is not communicating all of the legs of the project. Chris referred to this by saying I need a "30,000 ft map" of the project and Marco said that I needed to do a sales pitch, (which for some reason as I was standing up there made me think of Crazy Eddy from tv- we've got cables, we've got widescreen tv's....)
• I need to give clear user scenarios about the project. What would the experience be for a teacher vs a student?
• I need to describe the different levels of goals for different developmental age ranges.
• Everyone responded positively to my new web design (thank goodness I was very n vous about this) but Anthony noted that I now need to refine it in terms of communication vs. design.
• Finally, as I knew, I need to show some of my user testing.

Overall, all of this was really useful. I am going to make some time to meet with Chris and Anthony to talk about how I can achieve these suggestions, and really polish up my presentation for the symposium. The end is neigh!!!!

WEB DESIGN (Thursday crit)
I have to say that this was a refreshing crit. It has been a rare thing to get specific feedback on my designs in this program, usually the crits are focused on concept- which is fine, but sometimes you just need feedback. For this crit, my entire web class gave me feedback, as well as my professor Jay Van Buren. Jay has worked with a variety of clients, and is known for his work with non-profits and fine art institutions.

Highlights:

• think about the bubble background- maybe reducing the amount of bubbles and adding a more obvious gradient to achieve a "wave" effect.
• ABOUT page- split the page up into three pages. This will allow for tiered sponsors.
• TAGLINE- move the tagline to live underneath the logo. This came up in both crits. Apparently, placing it where I did, above the navigation produces legibility issues.
  
• the crab= "awesome", I need to go back and bring that same animated quality to the seagull and oyster. They don't have the same strength as the crab. (Chris also gave me this feedback so I am looking forward to doing this).
• LANDING page- I need to make the current beach conditions more kid friendly.
• There was also the suggestion of moving the characters to live just off the bubble shape. I need to try this out though, because I am not sure how it will look. I like how the whole site looks a bit like a big sticker.

And that's all. I am just going to keep chugging along and make my way to the end of the semester.

CUNY on Wheels has signed on!

A brief bit of exciting news- CUNY on Wheels will be donating a bus for the Earth Day launch. This is exciting, because the Earth Day celebration will be happening totally on the beach, so we are doing some mock workshops that will be on the beach but then we will also be user testing the website on the CUNY buses. These buses are fully equipped with computers and movie screens so it is quite an interesting opportunity. I mean, check out the bus in this picture- it's legit.

Website Creative Brief

I did THIS creative brief and brief competitive analysis for the oceanlab site. I am going to run this by a few of my potential users to get some feedback.

what I am building

Mocking It Up

Updated Site Architecture

Why the change? I realized that parents and teachers (ahem families and educators) needed to be separate from learning for this to be a kid-friendly site.

Site Architecture

I have been tweaking the site architecture. I went from having 5 sections to 4... among other things. I am still trying to think about what can be more dynamic on the site. However, after my thesis I am probably not going to be maintaining this. So- I am just thinking about what existing API's I can pull from.

Website Interactive Research

I have been re-thinking how to use the oceanlab website. At first I thought that it could just be a container for all of the different kinds of media that are connected to the project. However, after some thought and a good dose of inspiration- I have been thinking about more engaging ways to relate the student visitors to their coastal environment.

Here are some of my recent inspirations:

1. NY Times Interactives for the Style section showing people's houses.

This is pretty cool because it is really just a scene that has clickable hot spots with audio, visual or text embedded into it. It really personalizes the experience in a fun way.

2. Lost Here Felt There

This website features an image of a rainforest with a scroll over-able grid. On the grid you have the ability to click on squares which represent acres that you can pay to protect.The interface is really clean and nice, and its informative at the same time that it is getting you to take action.

3. Urban Plough

Urban Plough is a site that uses google map images of a farm and allows you to scroll through and look at the changes in the environment over the years. Additionally there is information that pops up about the land based on the year and then embedded within the images are markers talking about specific projects happening in that location.

Wireframes, Website and the big picture

I made some wireframes for the project website. Basically the components will be:

* I italicized big deliverables

ABOUT
mission
friends and allies
contact
fact sheet
day of action?

SPREAD THE WORD
tell a friend
logo, banners, video
posters, stickers
social networks


ANIMATION
PSA
GAME AND QUIZZES
fact game bubble game mobile/map game
PARENTS AND TEACHERS
fact sheet printables lesson plans




My thinking behind these two versions of the wireframes is that the visual hierarchy will be:
1. brand
2. what you can do on the site
3. a taste of the content
4. ways to connect through the site

I am not 100% in love with the way either of them look right now. I am going to take a break for a day and come back to it.