<A href="https://wikis-mit-edu.ezproxyberklee.flo.org/confluence/display/6DOT813sp13/write%28%27now%27%29+Main+Page" mce_href="../../../../../../../../../display/6DOT813sp13/write%28%27now%27%29+Main+Page"><IMG mce_src="http://i.imgur.com/Z8RG17z.jpg" src="http://i.imgur.com/Z8RG17z.jpg" width="400px"></IMG></A>
<UL id="ul">
<LI id="li"><A href="https://wikis-mit-edu.ezproxyberklee.flo.org/confluence/display/6DOT813sp13/write%28%27now%27%29+-+Main+Page" id="a" mce_href="#home">Home</A></LI>
<LI id="li"><A href="https://wikis-mit-edu.ezproxyberklee.flo.org/confluence/display/6DOT813sp13/write%28%27now%27%29+-+GR1" id="a" mce_href="#news">GR1</A></LI>
<LI id="li"><A href="https://wikis-mit-edu.ezproxyberklee.flo.org/confluence/display/6DOT813sp13/write%28%27now%27%29+-+GR2" id="a" mce_href="#contact">GR2</A></LI>
<LI id="li"><A href="https://wikis-mit-edu.ezproxyberklee.flo.org/confluence/display/6DOT813sp13/write%28%27now%27%29+-+GR3" id="a" mce_href="#contact">GR3</A></LI>
<LI id="li"><A href="https://wikis-mit-edu.ezproxyberklee.flo.org/confluence/display/6DOT813sp13/write%28%27now%27%29+-+GR4" id="a" mce_href="#contact">GR4</A></LI>
<LI id="li"><A href="https://wikis-mit-edu.ezproxyberklee.flo.org/confluence/display/6DOT813sp13/write%28%27now%27%29+-+GR5" id="a" mce_href="#contact">GR5</A></LI>
<LI id="li"><A href="https://wikis-mit-edu.ezproxyberklee.flo.org/confluence/display/6DOT813sp13/write%28%27now%27%29+-+GR6" id="a" mce_href="#contact">GR6</A></LI>
</UL>
Design
Please hover over each thumbnail to display the screenshot with a description underneath. We recommend browsing the thumbnails from left to right.
<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>If the user does not want to compete in a writing battle, they may instead do a freestyle writing, which has the same timed session and topic category choices. </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>The profile page displays a history of the user's past writings, and is sortable by votes or by date. The colors indicate whether the writing won or lost in a writing battle, or whether it was written during a freestyle session. </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.
The backend is implemented using Node.js, Mongodb, and is hosted on Heroku. Our implementation includes user registration, logins, competitor matching during a writing battle, and voting on writing battle pieces. The registration process stores the user's name, email, username, and password in the database. In the login process, the user enters their username, password, and can choose the "remember me" option, which stores cookies in the user's browser such that the site remembers the user as long as they do not log out.
The battle page is implemented by making database calls to save the user's preferences during the battle (e.g. topic category and time). When another user chooses preferences that match another stored session in the database, the two players will be matched in a writing battle. If the user does not select a category to write about, they will be assigned a random topic. At the end of a battle or freestyle session, the user's writing is saved to the database.
The voting page displays the writings by going through the list of writings from battles that are saved in the database. It displays one battle at a time, saves the user's votes, and iterates through each piece of writing.
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.
Collect the usability problems found by your user tests into a list. Assign each problem a severity rating (cosmetic, minor, major, catastrophic), and brainstorm possible solutions for the problems.
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:
User description
The co-editor in chief of a high school literary magazine.
The user is an MIT student who fits into the category of amateur writers.
Test description
The user test was conducted in person, such that we were able to observe the user's actions. For the battle task, the user was paired with one of our group members and was able to see her opponent's screen as well.
Usability problems
1. [major] The user did not realize that the sign in page was not a registration page, and when asked to register, attempted to sign in. After the second error message, however, she found the registration link and registered and logged in successfully.
Possible Solution: Put the registration and sign in boxes side by side on the same page.
2. [minor] The user did not realize that a topic was assigned after choosing a category on the battle page. However, it did not pose a significant problem, because the writer seemed engaged in the topic choice anyways.
Possible Solution: Make the topic choice a different color.
3. [minor] During the freestyle challenge, the user did not understand what the different colors on the profile page meant, but when explained the significance of red and green, she understood that blue indicated a freestyle writing.
Possible Solution: Make a key to describe the meanings of the different colors.
The user enjoyed the site design and liked the overall concept, especially as it was different from other motivational writing sites online.
User 2:
User description
A liberal art undergraduate at Standford University. She is an amateur poet and fiction writer. Some of her work has been published in poetry anthologies.
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
1. [major] User was not sure if she have to pick a category for the battle. She also hesitated about what topic to choose.
Possible Solution: Change "all" choice in the category to "any topic" or "random topic" to give the user a better description.
The categories of topics could also be varied including science fiction, poetry and so on, though that could come later when the site has more users.
One additional feature we could consider is to let user write their own topics for the battle who can then be paired up with a user who choose "any topics".
2. [minor] When performing sign up, the page first lead to a sign in page with "create an account" at the bottom.
The user first entered her name and password in 'sign in' field before realizing that she needs to create a new account.
Possible Solution: Make "create an account" bigger font so first time users will notice and click on that first.
3. [minor] The user feedbacks that "number of losses" on the profile page may discourage user from using the website to write.
Possible Solution: Remove "number of losses" from profile page and only show "number of wins".
Overall, the user enjoyed the battle experience and thought it is a cool idea to battle with her peers.
She liked the time limit is relatively short (1 min, 5 min, 10 min) so users can be focused for the duration but not bored by the long writings.
User 3:
User description
An MIT student who is part of a literary society in MIT and reads and writes science fiction.
Test description
Like the first user test, this study was was conducted in person in the same manner as described above.
Usability problems
1. [minor] The user was confused if the opponent was human or a computer. However, when starting the battle, he realized that he was being connected to a human opponent.
Possible Solution: We had already implemented a fix to this problem by adding info windows for first time users that explain each page. The battle info window describes that the user is being connected to another human opponent.
The battle also displays the opponents name when it begins.
2. [major] On the vote page, the user was confused as the most recent battle was displayed with the wrong vote topic.
Solution: This is more of a backend problem that we can fix.
3. [minor] When voting, the user missed the submit button and the vote was not recorded.
Possible Solution: We could remove the checkmark voting buttons and have the user click on the piece of writing itself to vote. The piece that the user chooses would turn green, and the submit button would be the only button at the bottom of the page.
4. [cosmetic] The user was slightly surprised when clicking submit on the freestyle page as the result was slightly different from clicking submit on the battle page. Unlike on battle, the user is no longer able to start writing again.
Possible Solution: We could make the actions of these two buttons more similar to have consistency, although it earlier users preferred being able to finish their writing early rather than having to wait out for the rest of the time period.
Overall, the user thought the site design was fairly minimalistic and found it easy to navigate. He was also amused by the "play again" option on the freestyle page and went back for several more rounds of writing.
Reflection
It was an interesting experience designing a website for which we are not part of the user groups. The need-finding interviews with targeted users helped us to narrow down the problems.
The sequence from paper prototyping, computer prototyping to final implementation worked great for us. During paper testing, we were able to test the usability of the initial design. We easily made changes to the features, added profile and voting pages based on users feedbacks and had more users to test the second iteration. After paper prototyping, we were more confident and have clearer picture of how the pages flow from one to the next, which helped us in computer prototyping.
We put a lot of focus on the battle feature during both paper and computer prototyping. It was a good decisions as battle is a vital feature the website is based on. The users of the final product testing gave us a lot of positive feedbacks about the battle, which are the result of features added from previous testing.
During user testing, we received many great feedbacks from the users. We considered each and every one of them carefully. However, some of the comments are subjective to personal preference. There are even some contradicting comments from different users. We grouped feedbacks both on the severity and number of users with similar feedbacks. The changes we decided to implement are mostly feedbacks that more than one user mentioned during testing. If we are not sure whether to implement a change, we will ask the next user about the change after he/she finished the tasks.
If we were to do it again, we will definitely keep the same sequence of prototyping. However, we might shorten the computer prototyping phase and spend more time on backend implementation. Our project is very reliant on the backend for pairing and saving the work. It was very rushed near to end to finish the implementation. We could possibly worked on front and back end in parallel after the first round of computer prototyping user testing.