Difference between revisions of "Milestone 5"

From crowdresearch
Jump to: navigation, search
(Recommended Readings and Materials)
Line 72: Line 72:
* [http://uxmag.com/articles/storyboarding-in-the-software-design-process Storyboarding in the Software Design Process (UX Magazine)]
* [http://uxmag.com/articles/storyboarding-in-the-software-design-process Storyboarding in the Software Design Process (UX Magazine)]
* [http://www.fastcodesign.com/1672917/the-8-steps-to-creating-a-great-storyboard The 8 Steps To Creating A Great Storyboard (Fast Company)]
* [http://www.fastcodesign.com/1672917/the-8-steps-to-creating-a-great-storyboard The 8 Steps To Creating A Great Storyboard (Fast Company)]
* [http://www.lynda.com/Web-User-Experience-tutorials/UX-Design-Techniques-Creating-Scenarios-Storyboards/148581-2.html UX Design Techniques: Creating Scenarios and Storyboards (Lynda)] (note: requires you to sign up for a lynda trial)
* [http://www.lynda.com/Web-User-Experience-tutorials/UX-Design-Techniques-Creating-Scenarios-Storyboards/148581-2.html UX Design Techniques: Creating Scenarios and Storyboards (Lynda)] (requires you to sign up for a lynda trial)
* [http://www.amazon.com/gp/product/B004VFUOI8/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=B004VFUOI8&linkCode=as2&tag=crowdr-20&linkId=T4QCVDICEWI2TTZU Storytelling for User Experience (Amazon Kindle)] (note: full book costs money, but the free preview has an introduction and examples)
* [http://www.amazon.com/gp/product/B004VFUOI8/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=B004VFUOI8&linkCode=as2&tag=crowdr-20&linkId=T4QCVDICEWI2TTZU Storytelling for User Experience (Amazon Kindle)] (full book costs money, but the free preview has an introduction and examples)
== Recommended Readings and Materials ==
== Recommended Readings and Materials ==

Revision as of 15:48, 28 March 2015

This week's goal is to select 2 ideas produced during Milestone 4 and produce a low-fidelity prototype for each of them.

Due date (PST): 11:59 pm 1st April 2015 for submission, 9 am 3rd April 2015 for voting and commenting on others' prototypes.

Ideas from Milestone 4

First, pick a category and find 2 ideas within that category that you'd like to explore further by making prototypes. These are the ideas from Milestone 4:









Why Make Low-Fidelity Prototypes?

Too often, designers and engineers get deeply invested in taking a week or a month or multiple months to produce a single prototype, only to find that it doesn't address the user needs. The explicit goal of this milestone is to challenge ourselves to generate convincing but rapid prototypes.

Prototypes are, by nature, incomplete and low-res. As the d.school bootleg says, your goal is not to create a mockup or scale model, but to create experiences to which your users can react.

The crux of this milestone will be figuring out how to prototype ideas quickly and convincingly, without sinking untold hours into them. Don’t just start building a prototype — you won’t know what you should be prototyping and at what level of fidelity to get your question answered.

Instead, before you start the prototype, explicitly make a list of the questions that you have about the idea and the hypotheses you have about the answer to each question. Remember that each prototype asks a question. So, what's your design ideas's biggest unanswered question? Once you've decided on the question, figure out what kind of prototype you would need to build and how you would get feedback from users to answer it.

Types of Prototypes

There are many ways to prototype ideas, many of which are discussed in this HCI lecture series on prototyping. In this milestone, we'll be focusing on 2 methods: interface mockups, and storyboards.

Interface Mockups

If the primary novelty of your idea is the user interface, you'll want to create interface mockups. For example, suppose you're proposing an interface that makes it easier for requesters to build HITs. You'd want to create a mockup of your HIT builder interface and show how a requester would interact with that interface - clicking buttons, dragging widgets, etc - to generate their HITs.

There are a number of ways to generate interface mockups. We compare a few tools below:

Tool Pros Cons
Paper prototypes (sketch the interface with paper and pencil, and scan it) Quick and easy Resulting prototypes are not interactive
Powerpoint, keynote, photoshop, or illustrator Can create more realistic mockups, while maintaining a low learning curve (if you've already used the software) Resulting prototypes are not interactive
Interactive wireframes mockups using software like Proto.io or JustInMind. You can alternatively use InVision to add interaction to static images or mockups created in Sketch or Balsamiq Can create interactive, realistic prototypes Need to learn how to use the software.

You are welcome to use any tool you choose, so long as you can link to the prototype from your milestone page. We recommend proto.io because it provides a free 15-day trial and allows you to create interactive wireframe mockups online without any additional software. Please see the documentation for help on getting started. Once you have built your prototype, you can visit proto.io spaces and publish your project to get a publicly shareable link to your prototype.


Oftentimes, the problem you're addressing involves social interactions which are not fully captured simply by making interface mockups. For example, if you were proposing creating a conflict resolution system between workers and requestors, the main question you'd want to address with your prototype is what kinds of conflicts might emerge, and how your system will handle them. Hence, the prototyping technique we use is to tell stories about how you envision people will end up using your system in certain scenarios, using storyboards.

Storyboards are a visual medium that tell a story via a series of pictures and captions. They were originally used for prototyping movies, but are also great for prototyping designs by showing how users will use them in concrete scenarios. You can learn more about them at:

Recommended Readings and Materials

HCI lecture series on prototyping

Rettig M. Prototyping for tiny fingers. Communications of the ACM, 1994, 37(4): 21-27. Discusses the advantages of low-fidelity prototyping techniques, particularly paper prototyping. Although it was written in 1994, before tools like proto.io were available, many of the points it makes about paper prototypes also apply to those tools as well.

Some materials related to storyboarding:


Pick 2 ideas that were generated from Milestone 4 and produce prototypes for each of them. You can create interface mockups, storyboards, or both, depending on what you feel is most appropriate for the idea.


Create a Wiki Page for your Team's Submission

Please create a page for your team's submission at http://crowdresearch.stanford.edu/w/index.php?title=Milestone_5_YourTeamName&action=edit (substituting in YourTeamName with the team name), copy over the template at Milestone 5 Template .

[Team Leaders] Post the links to your prototypes until 1st April 11:59 pm

We have a service on which you can post the links to the prototypes you generated, comment on them, and upvote ones you like.

There are 2 submission categories, depending on the type of prototype:



If you made both an interface mockup and a storyboard for a single idea, submit separate links for each (you can link to the other prototype in the body of your post and in your wiki page).

Post links to your prototypes only once they're finished. Give your posts titles which summarize the idea you're prototyping. Do not include words like "Milestone", "Prototype", "Mockup", or your team name in the title (as the category you submit to already tells us that information).

-Please submit your finished prototypes by 11:59 pm 1st April 2015, and DO NOT vote/comment until 2nd April 12:05 am

[Everyone] Peer-evaluation (upvote ones you like, comment on them) from 12:05 am 2nd April until 9 am 3rd April

Post submission phase, you are welcome to browse through, upvote, and comment on others' prototypes. We encourage you especially to look at and comment on prototypes that haven't yet gotten feedback, to make sure everybody's prototypes get feedback.

Step 1: Please use http://crowdresearch.meteor.com/needcomments to find prototypes that haven't yet gotten feedback, and http://crowdresearch.meteor.com/needclicks to find prototypes that haven't been yet been viewed many times.

Step 2: Once you find an idea of interest or less attended, please vote and comment upon it. Please perform this action from 3 to 5 prototypes - this will help us balance the comments and votes. Please do not vote your team's prototypes. Once again, everyone is supposed to vote+comment, whether you're the team leader or not.

COMMENT BEST-PRACTICES: As on Crowdgrader, everybody reviews at least 3 prototypes, supported by a comment. The comment should provide constructive feedback. Negative comments are discouraged - if you disliked some aspect of a prototype, make a suggestion for improvement.

[Team Leaders] Milestone 5 Submissions

To help us track all submissions and browsing through them, once you have finished your Milestone 5, go to the link below and post the link:

Milestone 5 Submissions

Weekly Survey

Please fill out the survey at https://docs.google.com/forms/d/18dkZL6hdWRrIrnjtCBCYN5_B1J8pKuMf0IioSC2gtKM/viewform to give us feedback!