GR3 - Paper Prototyping

Prototype photos

First Iteration - Creating the card as the administrator

1

Homepage, not logged in.

2

Choosing a card design from a grid of radio options.

3

Writing the first message (as the admin) to the card.

4

Giving details about the recipient.

5

Inviting friends by emailing a participation link.

6

The finished page showing a preview of the card.

7

A page shown when the card has been finalized and sent with a viewing link.

8

A dialog box shown to encourage the user to sign up for an account if they choose to.

Second Iteration - Creating the card and editing the card as administrator

9

New homepage, sans login form.

10

Choosing a card design using a horizontal slideshow pane with a preview and scrollbar.

11

Designating the recipient.

12

Giving information about the creator (administrator).

13

Viewing a populated card as the administrator/creator.

14

Viewing a populated card as a participant.

15

Viewing a spam message on the card and choosing to delete it, as administrator/creator

16

Screen showing the participation link and the administrator link.

17

Confirmation dialog showing a viewing link.

Briefing

A friend's birthday is coming up and you just bought a card for everyone to sign.  Problem is not everyone is around and/or are too busy to stop by your room to write a message on the card. Luckily for you, you can use Eloha to create e-cards for whatever occasion and collect that special collage of messages from friends in all geographic locations.

Scenario Tasks

1.  Creator, Steve Jobs, creates a birthday card for his precious daughter, Jeanette, on Eloha and sends out invitation to Tina Hu, Joseph Tsieh, John Liu and other family friends to sign. Her birthday is July 5.
2. Friend, John Liu, receives the invite link to go on and sign the ecard to Jeanette. He writes “Happy Birthday” but saves before finishing his message.
   1. A day later, John comes back and finishes his message with “wish you the happiest day ever!” before saving his message for good.
3. The creator, Steve Jobs, logs back on to the page after a week, 2 days before Jeanette’s birthday, changes the style to something else, deletes a spam message from “DFJLH” and marks the card ready for submission on Jeanette’s birthday.
4. After having a nightmare about Jesse Liu writing something nasty on the ecard to his daughter, Steve Jobs revisits the card the night before her birthday and reads over Jesse Liu’s message to Jeanette before finally hitting submit and going back to sleep.

Observations

Wednesday:

User #1
We gave our first test user task #1 - to create a card. He tried to create an account from the home page (fig. 1) before creating a card but changed his mind halfway through and went back to the homepage to create a new card for Jeanette. He had trouble figuring out the “Name” field for the recipient form (fig. 3). After much hesitation, he typed in his own name instead of Jeanette’s name. Then, when it came to emailing the edit-card-link to friends (fig. 5), he was surprised that the “email” link opened up his mail client instead of his gmail. Immediately afterwards, he realized that he had typed Jeanette’s name as “Jeanete” and looked everywhere for an admin page to correct the mistake (There wasn’t an admin’s page).

User #2
We gave our second test user task #3 and #4. He entered his message and changed the styles correctly, but complained about not being able to see a preview/thumbnail of the picture he uploaded (fig. 3) because he suspected the picture wouldn’t look as good in the card anymore as an attachment. Once he hit the edit card page (fig. 6), our second test user tried to find who else had joined and written in the card, a collaborator’s list, but couldn’t find one (there wasn’t one). Once finished task #4 of editing, he clicked “send” by accident instead of “save” and sent the half-finished card out.

User #3
Finally, we gave our third test user task #2 of signing the card. He clicked on the invite link correctly and started typing his message. However, once halfway done with his message, he hit “save” instead of “write” and didn’t know how to view his message again once he clicked on another person’s name. He also complained about not being able to see a list of other people signing the same card. Towards the end, when it came time to create an account (fig. 8) so he can sign back in to finish his half-finished message, he gave up out of frustration and closed the whole page. He complained that he had to create an user account just so he can type in two sentences for birthday card. He preferred to have just called up Jeanette and wished her happy birthday over the phone.

Friday:

User #1
Our first test user was confused about the save and send button, and wasn’t sure what they did so he hit “save” instead of “write”. (Fig. 13) Also, he wasn’t sure whether the message was automatically saved.  Then, we noticed that we should’ve had some sort of error checking before the user is done writing the message into the card and clicking the send button so he can catch any blatant mistakes he made.  The Birthday only needs to have a month and day, no year required. (Fig. 11)  And Finally, we noticed the order in which we presented the link that the user could use to send to his friends came too early on in the creation process.  (Fig. 16)This caused the user to forget about the link when he was done writing his message of the card.

Some of the other minor observations that we noticed was that on the homepage, the user was not sure what the admin link did.  (Fig. 13)  It also wasn’t obvious how the user would be able to edit a message.  And finally we realized we needed to change the name of ‘edit link’ because it didn’t convey the idea to the user of what he or she could use.

User #2
User #2 clicked on save button as opposed to write when he wasn’t supposed to save the work that he had.  (Fig. 14)  We noticed the buttons were very confusing for our user, which could be caused by the clutter of buttons on the UI.  We felt this user did not have an intuition of what was going on during the card creation process.  He also felt unsure about the collaborator’s list and why it existed.  (Fig. 15)  There was also no scroll bar on this list for the user to check on other users.  Like the first user, this user was also confused about the link for friends and the admin link.  And finally he had trouble figuring out how to edit messages, and figured out that he had to click on the tag cloud to bring up write/edit options underneath after some hints from the facilitator.

User #3   
The third user seemed to get everything that we wanted to happen and understood what was going on from the start of the card creation to the end of sending it out to friends. 

Prototype iteration

We received really strong complaints about having to create user accounts from the first iteration and decided to do away with user accounts completely in the next iteration - substituting “edit links” and “admin link” to replace the role of user accounts (fig. 16). This way, users had disposable unique URL links to their edit pages and could have a card up and running within minutes without the hassle of signing up a new account.

Also, from user #2 and #3’s suggestions, we added a “collaborators” list on the right of the edit page (fig. 14) with list of names as links to contributor’s messages in the card. This helped, to our surprise, our test user in the second iteration when he had to find the “DFJLH” nonsense message to delete. We expected him to hunt down the name from the tag cloud but he chose to  use the collaborator’s list to nail down the target within seconds.

In our first iteration, all participants had to write their messages on a separate page from the card’s viewing page (which had to be sent out). (See fig. 3 for an example as the administrator).There was a lack of instant feedback. In our second iteration, we decided to merge the two tasks of writing a message and viewing that message and others on the card onto one page (see fig. 13). When the user enters a message and writes it into a card, the message is immediately put into the preview pane above the message form. There is instant feedback on where the message (in this case, where the name of the user who wrote the message) goes which is valuable to the user. Additionally, it also displays who the other participants are and where their messages are in relation to the current user’s. In the same vein, we improved our choose/edit styles page in the second iteration so users can also see live feedback of their choice right underneath and see how it all fits in with the existing messages in semi-full-page-mode before settling on a choice.