Great UX Design Video: The User Is Drunk


Bonsai: The Internet’s academic advisor

After taking all of the feedback I received to heart, I mocked up a clickable version of my site. If I had more time, I’d like to tighten up all of the layouts and really make it visually stunning. This is a mock-up for proof of concept so only key links work, but please do have a look:

Screen Shot 2013-04-29 at 12.44.58 AM

User Testing – The Feedback

WOW. I got some amazing feedback from my class- Thanks everyone!

After listening to an example of user testing suggested by the UX syllabus, I led a feedback session with the entire class. User testing is usually done with a linked wireframe, one person at a time. I asked the class specific open ended questions at each step of the site, and got a similar experience, receiving lots of thoughtful opinions at once!

The best thing I could have done was to record the audio of my session. With so much constructive feedback, It was great to listen to it again in detail. I was so helpful that I will record every feedback session I can from now on!

Here’s a summary of my questions & the feedback I received:

Will you fill out the entire form?

  • Yes
  • I wouldn’t fill out the time because It may reduce my chances of finding what I want
  • It should be a sort later
  • Categories of time
  • Search by other criteria then filter by time

Can you tell me what you see here in the search results?

  • Confused about the time parameter
  • Reaction to layout: Netflix interface — Each row would be different types of movies
    • When she sees a line of things she assumes they are similar and the next line is different.
    • Sort by tab will make it better
    • Sort tag vs pre-sorting
  • Filter time once search results are presented

Any feedback on the sign up form?

  • Get person’s level of expertise 
  • Get preferred learning style
  • Sign up whenever – use
  • Sign up WITHOUT bookmarklett
  • Make every action cancelable
  • Log in with Facebook & Twitter accounts

Would you know how to install the bookmarklett?

  • Called something that says what it does
  • Cancel button
  • You have to drag for it to go away
  • Keep the fun copy
  • People don’t read anything
  • Change the sign up language to allude to the installation of the bookmarklett
    • Install the bookmarklett to create collections
    • Collect your knowledge from the greater internet
  • Make the user aware that they are signing up to use the bookmarklett
  • Allow a user to sign up without the bookmarklett

Would you fill out the form after hitting the Collect bookmarklett?

  • Why would you collect a 1 star lesson?… You wouldn’t.
  • Don’t ask for a rating when collecting… only when editing materials
  • Assume that the first person that tags content likes it and would give it 5 stars

Would you click the tell us more link? What would prohibit you from using it?

  • Say “Tell us more” not “can you tell us more” – be more direct
  • I’m not sure why I would do this? 
  • People love to talk about and rate shit…
  • If it popped up it would be more scientific
  • Use an iframe model where it pops up to the side. It will be there in real time to take notes, and you can even have a timer that automatically tags the site with the length of stay on the page.
  • Integrate the types of reactions that people have during different parts of the content. Similar to iBooks where there is a “people often highlight” section showing the path of other users.
  • I would want the interface laid in the screen and lets me take notes while viewing the content instead of waiting to tag it at the end.
  • Collect info when people are looking at the content even if they don’t submit the form
  • History – you would learn how much time YOU spend on different topics
  • bookmark tagging — look at it
  • I want to see my learning path

Collecting the cover image / categories:

  • “The Pinterest model for education”
  • Like the option to create your own board on Pinterest

Your collections scroll thru or select from list?

  • The ability to share the collections with others or curate for a class is a nice feature
  • Is there a way to sequence these things? — Needs the ability to reorder materials within the collection
  • Give drag handles automatically to the person who is the collection “owner”

Give a way to Edit Notes

iFrame may work out as a better way for collecting

Greg suggested checking out, and liked the ability I showed about screen-shotting the thumbnail on the page.

User Testing

Tomorrow, I’d like to use my critique time in class to do a quick user test of my site.

On the UX syllabus, the homework suggests to “define the things you would want a user to understand or do.” I came up with some example questions that may be hard without a clickable prototype, but here they are:


  1. Understand that the site is for discovering and collecting educational content.
    • What do you think the site is about?
  2. Know to fill out the entire form.
    • What would you do first?
  3. Understand that there is a way to collect their favorite tutorials.
    • How would you find a tutorial you searched for in the past again?
  4. Use the bookmarklett with ease.
    • What would you do if you just found a great article you’d like to return to?
  5. Feel an attachment to their collection like a personal bookshelf.
    • Would you use it? Why?
  6. Know where their collections live.
    • How would you view a specific collection?
  7. Edit their description.
    • How would you add to your description?
  8. Know how to log out.
    • How would you log out?

What do you expect to be able to do?

What would make it more useful?

Where can it go? How else could you use it?


UX Compared: Collection Based Interfaces

My site’s purpose is discovering and collecting educational material.

I’ve selected collection based interfaces to better understand what makes them successful and to determine the best way to present collections on my site:

iBooks is a great example to look at because it organizes books- the original container of knowledge. It allows the user to place their books into collections to make them easier to access. It hides these collections behind the “collections” button. I think this is really smart because it’s not overwhelming. The word “Books” at the top reminds me which collection I’m in if I forget where I am. I do wish there was a “View All.”


The kindle app also allows the viewer to see books in collections, but I think the interface is more confusing with cloud and device at the bottom. It does however, have a view for all items. Also, It allows the user to see how far they are in the book with the dots info-graphic.

Etsy does a good job at keeping their interface simple and visual. Even without breaking the large amount of info into categories I can quickly scroll down and visually find what I’m looking for pretty quickly.


The Dropbox app is an example of a “Finder” style file browser but with visual previews. This offers the user a concrete view of their heirarchy of the structure of their files. This interface is very useful, but for my purposes I would want to change two things: Make the file list hide away (to make less choices apparent to the user ) and to make the visual preview more plentiful — If the viewer could show multiple previews like the Etsy image above (or large icon view with info in the Apple Finder ) I think it would be easier for learners to find their stuff.


YouTube does a nice job of this. The collections or “Playlists” are a group of videos that have a thumbnail image associated them to clue the user into what type of content is inside. I still have to click into the Playlist to see what’s inside.


iTunes breaks down information that is already grouped together – Albums. It allows for browsing by category that is clear and understandable.


iTunes U Presents already curated content in classes similar to syllabi from top universities. They are smart to make this information easily available. Similar to my idea, they list the type and duration of the content. As an already curated course, the order is important. I would like to allow my user to create their own flow and order for their collections.


The App Store app allows the user to browse basic information about their search results….


Then to tap to view more information including a longer description and more preview images. I really like this idea of presenting basic info first then giving more for only the ones the user is interested in.


The Pinterest interface is the most similar interface I know to what I am trying to do. They are strictly a site based on collections curated by the user. In their app, they present the collections in the form of “Boards” that have visual thumbnails to hint at what’s inside. The interface is clean and easy to navigate. They are however, more focused on the user and social followers that I want my site to be.


Pinterest’s idea of “View All” — showing all of the users “Pins.”