Showing posts with label wireframes. Show all posts
Showing posts with label wireframes. Show all posts

Tuesday, November 12, 2013

Badge Directory: A Yelp for Badges


Over the Summer, I started working (although I haven't gotten super far) on an idea for a Badge Directory - that was kind of like a Yelp for Badges. I have previously talked about this here . This is definitely in the realm of prototyping for a future addition to the Open Badges world, but the general idea is that it's a directory that leverages community input to categorize, group and rate the fidelity of the badges. This could be combined at some point with the idea of a Badge dashboard for users, but independently I see this as having some value as a service or a tool on to itself.

When I initially mocked up the concept for a badge directory, I was smack in the middle of thinking about how cities (like the City of Chicago) might benefit from a directory. At the time I made this sketch:

A mobile - first design made sense as the geographic location was deeply tied to badge or content discovery for participants in the Chicago Summer of Learning. So I could literally imagine a game - like alert notification if a user had geolocation services on their mobile devices. 

 

At some point, I sat down and tried to make this a real thing - which forced me to think about it in terms of a tool or a service that might be more broadly used. When I considered all of the things that I was imagining the tool doing (recommendations based on interest, location, skill, peer group etc) I realized that I needed some sort of way to collect the data. This began my investigation into creating a community crafted directory - aka a "Yelp for Badges." 
  Initially I started by thinking about the structure of the service as a searchable - interactive filter layer for public badges. 



 

Here is what a badge detail might look like (below):






Some features that I added here that don't currently exist are:
  Goal Group - this allows a potential badge earner to build a collection of badges that they intend to pursue and to declare a goal for that collection. This could take the form of badge pathways where someone says - my goal is to become an expert at woodworking and then all of the badges that they add to that group represent the learning map for how they are going to achieve that goal. These groups could be made public and could potentially be forkable.

 Badge Rank - the idea is that an algorithm will be generated that helps to contextualize badges in relationship to one another. The algorithm( in theory) will take into account crowdsourced feedback and evaluate the metadata contained in each badge as well as other factors that I am sure I have not thought about at this point.

  License - think of this as a creative commons license for badges. I am actually really excited about this - but the general idea is that is that like a work of art or a concept, people have different ways that they intend the badge to be used or reused - and this will give the author control over their intent.

  Reviews - users of the directory will have the ability to read and write reviews for individual or groups of badges. This helps us with the possible problem of the badge ecosystem being flooded with meaningless badges - the reviews (hopefully) will force content providers to put out high quality work (and if anything could just keep badgemakers on their toes). As I worked a little more on the UX wireframes, and got some initial feedback. I realized that I needed to  raise the hierarchy for search and make it easy to access, consistently placed and focused on specific forms of output: goals, reviews, badges. Here, I also explored visualizing badges as pure text.
 




Finally, I started to incorporate the idea of a user dashboard and backpack into the directory. If you are making goal groups, and badges and are able to get recommendations - then really, what if the interactions were combined to give a user control over their learning data - before, during and after the act of doing whatever it is that they are doing to learn a skill or concept. 




So, let me take a second to talk about the Backpack sync that I incorporated into the mockup above. Imagine you are logged into the directory - as a user - via twitter (for this example) . As a user, you want to get recommendations on your interactions on the site as well as the knowledge of badges that you have already earned. Here, you sync to your backpack (s) - have your services talk to eachother and eventually earn recommendations for goal groups, learning maps, badges and peers based on this newly expanded perspective of what is in essence, your profile.
 

I still have a lot more to think about, and am frankly writing this post so that I can keep track of my thinking and get some feedback. Some things that need to be thought about here are : how are badges added to the directory? Is there something in the badge specification that would need to be altered to accommodate this? Is there a different view for badgemakers? Can I make a badge directly from the directory? How does this work relate to BadgeKit? How is this moderated? …. and I'm sure much much more.  I look forward to hearing feedback and talking more about this.

Tuesday, January 22, 2013

Make - First Interaction Design

 On the Webmaker community call and on his blog this week, Brett Gaylor presented that we are currently aiming to solve several key design questions for Webmaker. You can read about the challenges and solutions here.

In an effort to move Webmaker into a space where from the moment you come to the site - you are encouraged to make something (what Brett is calling "make - first" interaction design) , I am going to show some prototypes that I have been working on. 

You can see all of them here in larger, more legible form.

Even though the fidelity of my prototypes might seem more polished then usual, as always please note that these are mockups and prototypes designed for the purpose of iteration, so please give me feedback and ideas for things that I should consider when moving forward with the design. 

landingpage-wire-annotated

First, lets take a look at the Landing page. The idea here is that from the moment that you land on Webmaker.org you are given the call to action to tinker and interact with content in a very real way. What you are looking at is actually a meta "Animated webpage" project that is comprised of several types of projects - so in essence the content type becomes a gallery. The page is instantly hackable and as the user, starts tinkering with an x-ray goggle like interaction- they can choose to deep dive and reveal the more advanced editing tools. While this is a mockup for the landing page - you could imagine that it is also a prototype for how a user might be able to pull and view content from the gallery - so the user gets the opportunity to digest a project first as consumable content and then engage with it as a hackable medium. This kind of interaction was deeply inspired by my reading of the work of Mimi Ito - particularly in her book Hanging Out, Messing Around and Geeking Out. Here is what it might look like with some timely content.

The next mockup is a first iteration of what a gallery could look like for us. A user does not have to be logged in to view the gallery, but if they are they will have a more personalized lens as well as the chance to engage with the content creators. 


In this mockup (which admittedly is the most nascent) you see a view of what a user might see if they are clicking on a particular users name - it's a filter of the content that the user made public. This could include their projects, badges or assets. Ideally this page will have some level of hackability - a la MySpace - so maybe the CSS of the page could eventually be modified by the individual users - since in essence this becomes a bit of a portfolio page. To be clear, I'm not saying it should look or feel like MySpace - but there was a certain level or ownership and creativity around that kind of personalization.

Finally, I'd like to share with you the prototype that I hacked up with Atul yesterday. It's a prototype, so you know don't tweet far and wide - but you can check it out to start to see what it would be like to have hackable content on a landing page and remember to click "D" for deep dive to bring that content directly into Thimble. 

Friday, October 30, 2009

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.