Badges Proposed Website Design

Proposed Website Design
** Legend:
Green: remix
Orange: goal
Purple: beginner (bronze)
Blue: intermediate (silver)
Yellow: advanced (gold)

Alex, a female middle school student (and fictional Looking Glass user) has found her way to the user index page.

Notes: The page is broken up by categories of user. The photos (or cards) are the profile picture of the user with their stats underneath. (member since, gender, number of worlds, challenges, and entries). The three circles on the right hand side of the picture denote the number of badges at what level the user has. The percent in faded-out green corresponds to the percent of badges in that level that are remix badges. This three circle design, which appears through the website, is designed to give the badges a level of importance. They communicate to the users how “cool” or complicated a world (or a user) is. The faded out green sections allow for the complexity of the world to be shown while preserving the rank of a full (and fully colored) badge over a remix (faded-out green) badge . You can also note that the “Users Like You” users are, like Alex, female and just starting out in Looking Glass.

Alex mouses over the one of the pictures  in the “Most Followed” category and sees that it flips around and gives her the option of following Maria (another Looking Glass user) or seeing Maria’s profile. She chooses to follow Maria and then see Maria’s profile.

Notes: For the gear badges, the big gear is the color of its difficulty and the smaller gears are colored according to the difficulty of nesting that skill in the main skill. However, this is potentially confusing. Another possibility is to abandon the flowered view of the gears and have each main skill and nested skill be a single badge represented by a big gear with a little gear. Maria’s profile picture has her badge count displayed. Her badges are currently sorted by most recent, but they could be sorted by most difficult.

Alex thinks Maria’s badges look kind of cool. So, she mouses over one of them.
Notes: The “Learn more about this badge” option will take the user to the information page for Array

Alex clicks on the option to “See Maria’s worlds with this badge.” She is then taken to the Maria’s World Page, but she only sees the worlds that have an Array.  

Notes: The world thumbnails have the same three circles as the user pictures. They denote the number and difficulty of the badges and are colored by the percentage remixed. The “See all” option will display all the Maria’s worlds.

Alex thinks the clown one looks kind of interesting. So, she mouses over the thumbnail.


Alex sees a description of the world and then clicks on it. It takes her to show page for that world.

Notes: The sidebar here is on the left hand side. Check out Mary’s drawings for a view of the sidebar on the right. The “More Cool Worlds” heading refers to suggested worlds. These worlds would be chosen based on the user’s goal, following, level, and tags of the world. If you mouse over the thumbnails on the side bar, the info for them would appear. If you clicked on them, it would take you to that show page. If you click on any of the plus signs, it will make that section expand while the other ones contract. On the comments section, in order to leave a new comment you must click on the button which will expand the comments form or bring out a new dialogue box. See Mary’s blog for more info on the comments, see Genevieve’s blog for a look at searching and tags.

Alex is so incredibly excited by all the worlds she has seen that she goes into the IDE and builds a world of her own. After she shares the world, she gets this dialogue box:

Notes: After you have uploaded your world, it would be nice to get automatic feedback of the badges you have earned/the goals you have achieved. If this doesn’t fit with how we design the tests to run, we can also have an option to “See how many badges your world earned” that will link to a page on the website. The “Click here to set more goals” options will send you to the Badges page. The hope is that this will continue the setting goals and achieving goals cycle.  

Unfortunately, Alex has to go to swim practice. So, she just exits out of Looking Glass. However, the next time she logs onto the website (it just so happens she goes to the world index page) she is greeted by a flash notice. (In the meantime, Alex has also set a few goals for herself, including the Boolean badge and the Do Together-Count Badge)

Notes: All the worlds that have the user’s goal badges are highlighted in the goal color. On the right, instead of the three circles, there is a block with the name of the goal badges it has clearly marked. If you mouse over that name (as seen here) you will be able to once again see the badges that the world earned. Currently, the sort is in magic, which should bring up the goal worlds toward the top of the listing. (See Mary’s blog for a more indepth explanation of magic sort). The flash notice on the top congratulates the user for her more recent badge and urges her to set another goal.

Alex is buoyed by the congratulations and heads on over to her own page.

Notes: When the user is looking at her own page, she sees a “My goals” section up top. Those goals are highlighted in the goal color. The badges that are remixed are a faded out green color in the middle, with a colored ring around the outside that corresponds to their difficulty.

Alex mouses over her Do Together gear badge

Notes: On mouseover, the gear badges shows the other possible badge extensions. It could show them all,  or it could just show the ones we think or most logical for the user to pursue next. The user also has the option to set that possible badge as a goal at that time. If we do end up abandoning the flowered gear image, the user could mouse over the badges section and light colored ghost badges could pop up at the bottom. These badges would be not-yet-achieved badges in the user’s skill level.

Alex then mouses over one of her goal badges


Note: the options are to “Learn more” or “Remove as a goal”

Alex clicks on “Learn More” and is taken to the info page for the boolean badge.

Notes: Underneath the title is a short description of the badge and (possibly) some tips on how to earn it. Since most users are non-programmers, this page gives them a small explanation of the concept. Most of the learning, though, will be by example and actually coding. The worlds listed are sorted based on the people the user is following. The plus sign on the right hand side will take you to the Badges page. See the bottom of the blog for a sketch of how an interactive info page might look.

Alex mouses over one of the worlds. (We are going to pretend that instead of a clown, there is a picture of a butterfly and a sun)


Alex then click on the description and it takes her to that show page.

Notes: Since this is world has a boolean in it (one of the user’s goals), there is a little box on the top of the side bar. The box suggests that the user bookmarks the world in order to help earn the badge.

Alex bookmarks the world and then opens up Looking Glass. The opening page dialogue looks something like this:

Notes: On the upper right hand side is a bulletin board like on the user page. It just shows the user’s goals. In order for this to be able to work, the user must be motivated to sign-in before starting to work in Looking Glass.

Alex opens up a new world and begins coding.

Notes: On the upper bar are little icons of the users goals. This will hopefully remind them of what they are trying to achieve when building their world. However, it’s  possible the icons are two small and will be ignored by users

Alex, contrary to any naysayers, notices the icons on top and hovers of the ones on the right.

Notes: The pop-up dialogue would remind the user that they should remix that skill into their world to earn the badge. Possibly we will want more direct instruction. The “Learn More” choice will open up the info page for the badge on the user’s web browser.

Alex then mouses over the goal icon on the left.

Notes: Since Alex already has a remix badge for Do-Together with a Count, the suggestion is just to remember to add in into the world.

Remember the Boolean info page? Well, since we’re playing pretend anyway, let’s pretend that Alex clicked the option to “See all Badges” (or that she followed any of the “Set a New Goal!” suggestions)

Notes: This is the Badges page. The bulletin board on the right are activity badges. The one of the upper left is for suggested badges. The one on the lower left is for skill badges. The skill badges are currently sorted by magic, which will sort based on the user’s skill level and the people she is following.

Alex hovers over one of the activity badges.

Note: Activity Badges don’t have info pages. If you hover over them, they will give you a short description of how to achieve the badge and a link to navigate to the pertinent part of the website.

Alex then decides to expand the skills badges by clicking on the plus sign on the right side of the board.

Notes: The expanded version just takes over all the space on the badges page.

Alex shrinks down the skills portion by clicking on the minus sign in the left corner. She then mouses over the left-most suggested badge.

Notes: This suggested badge was picked based on the badges the user has already earned. She can choose to set it as a goal or go to its info page.

Alex then mouses over the middle suggested badge

Notes: This suggested badge was chosen because the user set it as a goal. She can either navigate to its info page or remove it as a goal.

Next, Alex mouses over the suggested badge on the right.

Notes: This badge is suggested because it was earned by one of the people the user is following.

Okay. More pretend. This time, let’s go back to the badge info page and pretend that it is interactive.

Notes: Sorry the picture turned out so fuzzy! The side bar on the right has worlds that have the badge in them. If you mouse over,  it will give you its info. (Just like on the rest of the site). The middle box is an interactive part. On the left, it will present a problem that you can’t solve without the badge. You then watch the video of what the world looks like without the badge. You can see the code underneath. (These are all pre-recorded)

Alex watches the video where the bunny only hops once. The middle box changes to:

Notes: the next one asks you to help add the badge into the video so that it works. (Side note- I realize this tutorial is a much better explanation of “While” than “Boolean”). As soon as you drag and drop the code, the upper video will start playing.

Alex drags the boolean on the left into the while loop on the right and then the video starts to play.

Note: After the user drags and drops, the video will start to play.

Alex is delighted to see that the bunny hops while the man is facing it. Now she knows what booleans do!

The end.

Well folks, I hope you enjoyed by project proposal. Please leave me any questions, comments, or suggestions you have below. If you would like to see a close up of any of the pictures, go here.