write('now') - GR6

html: Security restricted macro is not allowed. An edit restriction is required that matches the macro authorization list.

html: Security restricted macro is not allowed. An edit restriction is required that matches the macro authorization list.

Unknown macro: {style}

#ul
{
list-style-type:none;
margin:0;
padding:0;
padding-top:6px;
padding-bottom:6px;
}
#li
{
display:inline;
}
#a:link,#a:visited
{
font-weight:bold;
color:#FFFFFF;
background-color:#000000;
text-align:center;
padding:8px 24px 8px 24px;
text-decoration:none;
text-transform:uppercase;
}
#a:hover,#a:active
{
background-color:#2E2E2E;
}
.slideshow {
font-family:Arial, Helvetica, sans-serif;
width:1010px;
height:655px;
overflow:hidden;
background-color:#000000;
color:#FFFFFF;
border:5px solid #000000;
}
.slideshow > ul {
margin: 0;
padding: 0;
}
.slideshow > ul > li {
display:inline;
margin:0px;
padding:0px;
font-size:1px;
margin-right: -1px;
}
.slideshow > ul > li > div {
display: none;
text-decoration: none;
float:left;
}
.slideshow > ul > li > div > p {
font-size:11px;
text-align:center;
padding:0px 5px 0px 5px;
margin:0px;
color:#FFFFFF;
}
.slideshow > ul > li > div > a > img {
border:2px solid #707070;
width:1005px;
}
.slideshow > ul > li > img {
border:2px solid #707070;
margin:0px;
padding:0px;
width:80px;
height:60px;
}
/* Shows slides when mouse pointer is over a thumbnail image */
.slideshow > ul > li:hover > div {
display: block;
}
/* Highlights the thumbnail image when mouse pointer is over it */
.slideshow > ul > li:hover > img {
border-color:#FF6600;
}

Design

Please hover over each thumbnail to display the screenshot with a description underneath. We recommend browsing the thumbnails from left to right.

html: Security restricted macro is not allowed. An edit restriction is required that matches the macro authorization list.

<DIV class="slideshow">
<UL>
<LI>
<IMG mce_src="http://i.imgur.com/mTGwak5.png" src="http://i.imgur.com/mTGwak5.png"></IMG>
<DIV>
<A href="http://i.imgur.com/mTGwak5.png" mce_href="http://i.imgur.com/mTGwak5.png" target="_blank" title="Click to see full image">
<IMG alt="write now" mce_src="http://i.imgur.com/mTGwak5.png" src="http://i.imgur.com/mTGwak5.png"></IMG>
</A>
<P>This homepage is simple: some text information and 3 buttons. These buttons describe and link to the three main activities on the website. This design is borne out of a desire to quickly convert the user from the homepage to an active user - writing or voting. We added these buttons in response to user testing, where users would be initially lost for where to start.</P>
</DIV>
</LI>
<LI>
<IMG mce_src="http://i.imgur.com/n8j12mi.png" src="http://i.imgur.com/n8j12mi.png"></IMG>
<DIV>
<A href="http://i.imgur.com/n8j12mi.png" mce_href="http://i.imgur.com/n8j12mi.png" target="_blank" title="Click to see full image">
<IMG alt="write now" mce_src="http://i.imgur.com/n8j12mi.png" src="http://i.imgur.com/n8j12mi.png"></IMG>
</A>
<P>This sign in page is designed to be fast, simple, and recognizable. Many websites use a similar layout of Header, Username, Password, and Submit. Accounts and sign in was added after user testing.</P>
</DIV>
</LI>
<LI>
<IMG mce_src="http://i.imgur.com/w2ryPrF.png" src="http://i.imgur.com/w2ryPrF.png"></IMG>
<DIV>
<A href="http://i.imgur.com/w2ryPrF.png" mce_href="http://i.imgur.com/w2ryPrF.png" target="_blank" title="Click to see full image">
<IMG alt="write now" mce_src="http://i.imgur.com/w2ryPrF.png" src="http://i.imgur.com/w2ryPrF.png"></IMG>
</A>
<P>Users are encouraged to sign up for an account on the website. Again, we follow a typical sign up layout, with the addition of the "Name" field. the page is designed for users to quickly signup and continue using the site.</P>
</DIV>
</LI>
<LI>
<IMG mce_src="http://i.imgur.com/3xYedY9.png" src="http://i.imgur.com/3xYedY9.png"></IMG>
<DIV>
<A href="http://i.imgur.com/3xYedY9.png" mce_href="http://i.imgur.com/3xYedY9.png" target="_blank" title="Click to see full image">
<IMG alt="write now" mce_src="http://i.imgur.com/3xYedY9.png" src="http://i.imgur.com/3xYedY9.png"></IMG>
</A>
<P>The writing battle is the crux of our website. Here, users can select a category and time limit and press "Start" to start a battle. After user testing, we added the tan-colored alert to help first time users understand the purpose of a battle. We also presented below the two usernames and text boxes as well as the Submit button. These help a user by helping them expect the interface during a battle.</P>
</DIV>
</LI>
<LI>
<IMG mce_src="http://i.imgur.com/pwecSLp.png" src="http://i.imgur.com/pwecSLp.png"></IMG>
<DIV>
<A href="http://i.imgur.com/pwecSLp.png" mce_href="http://i.imgur.com/pwecSLp.png" target="_blank" title="Click to see full image">
<IMG alt="write now" mce_src="http://i.imgur.com/pwecSLp.png" src="http://i.imgur.com/pwecSLp.png"></IMG>
</A>
<P>After the user presses start, we wait start looking for an opponent with the same requested category and time limit. Currently, our match making system does not account for win rates or any other user statistics.</P>
</DIV>
</LI>
<LI>
<IMG mce_src="http://i.imgur.com/OtfkdbX.png" src="http://i.imgur.com/OtfkdbX.png"></IMG>
<DIV>
<A href="http://i.imgur.com/OtfkdbX.png" mce_href="http://i.imgur.com/OtfkdbX.png" target="_blank" title="Click to see full image">
<IMG alt="write now" mce_src="http://i.imgur.com/OtfkdbX.png" src="http://i.imgur.com/OtfkdbX.png"></IMG>
</A>
<P>After an opponent is found, a short countdown plays, after which the user receives a topic. The timer starts ticking and the user starts writing. The user may submit his writing by clicking on the submit button. We added the submit button after paper prototyping to give the user a logical continuation step and comfort. After paper prototypic, we also added the competitor names, here Ben Bitdiddle and Alyssa P. Hacker, to make it clear that the user was competing against another user.</P>
</DIV>
</LI>
<LI>
<IMG mce_src="http://i.imgur.com/JEIO9MX.png" src="http://i.imgur.com/JEIO9MX.png"></IMG>
<DIV>
<A href="http://i.imgur.com/JEIO9MX.png" mce_href="http://i.imgur.com/JEIO9MX.png" target="_blank" title="Click to see full image">
<IMG alt="write now" mce_src="http://i.imgur.com/JEIO9MX.png" src="http://i.imgur.com/JEIO9MX.png"></IMG>
</A>
<P>When time runs out, the text box is disabled and the users begin waiting for results.</P>
</DIV>
</LI>
<LI>
<IMG mce_src="http://i.imgur.com/nbjr3ps.png" src="http://i.imgur.com/nbjr3ps.png"></IMG>
<DIV>
<A href="http://i.imgur.com/nbjr3ps.png" mce_href="http://i.imgur.com/nbjr3ps.png" target="_blank" title="Click to see full image">
<IMG alt="write now" mce_src="http://i.imgur.com/nbjr3ps.png" src="http://i.imgur.com/nbjr3ps.png"></IMG>
</A>
<P>At this point, the pair of writings is added to a queue of writings which require votes. Other users on the site can go to a "Vote" page to vote on a random piece of writing. The interface here is very similar to the battle page, for consistency. We add our green voting buttons to allow for voting. A user selects piece and presses Submit. If a piece is not selected, we assume the user is abstaining. After user testing, we enabled users to de-check a vote box and added the alert box.</P>
</DIV>
</LI>

<LI>
<IMG mce_src="http://i.imgur.com/VX2SlsK.png" src="http://i.imgur.com/VX2SlsK.png"></IMG>
<DIV>
<A href="http://i.imgur.com/VX2SlsK.png" mce_href="http://i.imgur.com/VX2SlsK.png" target="_blank" title="Click to see full image">
<IMG alt="write now" mce_src="http://i.imgur.com/VX2SlsK.png" src="http://i.imgur.com/VX2SlsK.png"></IMG>
</A>
<P>This is the vote page if no writings need votes. Note that the buttons are disabled to avoid any confusion.</P>
</DIV>
</LI>
<LI>
<IMG mce_src="http://i.imgur.com/DShUHyF.png" src="http://i.imgur.com/DShUHyF.png"></IMG>
<DIV>
<A href="http://i.imgur.com/DShUHyF.png" mce_href="http://i.imgur.com/DShUHyF.png" target="_blank" title="Click to see full image">
<IMG alt="write now" mce_src="http://i.imgur.com/DShUHyF.png" src="http://i.imgur.com/DShUHyF.png"></IMG>
</A>
<P>After at least 3 votes are received, a winner is announced - the writer of the piece which received more votes. You win! appears in green for a the winner, while a red box appears for the loser. Clicking on View Results displays the number of votes for each writing. We chose this color scheme to allow for external consistency. In fact, throughout our entire website, we use green for success, red for losing, light blue for information, and dark blue for actions. </P>
</DIV>
</LI>
<LI>
<IMG mce_src="http://i.imgur.com/1T1kWfH.png" src="http://i.imgur.com/1T1kWfH.png"></IMG>
<DIV>
<A href="http://i.imgur.com/1T1kWfH.png" mce_href="http://i.imgur.com/1T1kWfH.png" target="_blank" title="Click to see full image">
<IMG alt="write now" mce_src="http://i.imgur.com/1T1kWfH.png" src="http://i.imgur.com/1T1kWfH.png"></IMG>
</A>
<P>words</P>
</DIV>
</LI>
<LI>
<IMG mce_src="http://i.imgur.com/UNXFKb2.png" src="http://i.imgur.com/UNXFKb2.png"></IMG>
<DIV>
<A href="http://i.imgur.com/UNXFKb2.png" mce_href="http://i.imgur.com/UNXFKb2.png" target="_blank" title="Click to see full image">
<IMG alt="write now" mce_src="http://i.imgur.com/UNXFKb2.png" src="http://i.imgur.com/UNXFKb2.png"></IMG>
</A>
<P>words</P>
</DIV>
</LI>
</UL>
</DIV>

Implementation

Describe the internals of your implementation, but keep the discussion on a high level. Discuss important design decisions you made in the implementation. Also discuss how implementation problems may have affected the usability of your interface.

Evaluation

Describe how you conducted your user test. Describe how you found your users and how representative they are of your target user population (but don't identify your users by name). Describe how the users were briefed and what tasks they performed; if you did a demo for them as part of your briefing, justify that decision. List the usability problems you found, and discuss how you might solve them.

Scenario

You are Mob Riller, a Harvard graduate. You have written a few books but none of them are published. Dejected and out of ideas, you decide to visit write('now') for inspiration and motivation for your next book.

Tasks

Task 1: Create an account and log in.
Task 2: Compete in a Writing Battle.
Task 3: Vote on other user's writings.
Task 4: Perform a freestyle writing task. Go to your profile to see your previous writings.

No demos are included in the briefing as the website is designed to have low entry barriers with friendly user-interface for first time users.

User 1: (Kim)

words

User 2: (Clara)

User description:

A liberal art undergraduate at Standford University. She is an amateur poet and fiction writer. Some of her work has been published on books and newspapers.

The user is my high school friend. She fits into our target population of active, amateur writers.

Test description:

Google hangout was used to conduct the test. The user shared her screen with us so we could see the cursor movements.

The user is briefed on the scenario as described above. She is given one task at a time to complete. We observed her during the test and at the end of the test, she talked to about us her overall user experience.

Usability problems:

When performing the task 1, ......

User 3: (Tim)

words

Reflection

Discuss what you learned over the course of the iterative design process. If you did it again, what would you do differently? Focus in this part not on the specific design decisions of your project (which you already discussed in the Design section), but instead on the meta-level decisions about your design process: your risk assessments, your decisions about what features to prototype and which prototype techniques to use, and how you evaluated the results of your

Child pages

write('now') - GR6

Design

Implementation

Evaluation

Scenario

Tasks

User 1: (Kim)

User 2: (Clara)

User 3: (Tim)

Reflection