Creation as Curation Annotated Wireframes

Meg McGrath Vaccaro

MFA ITGM SCAD Spring 2013

Creation as Curation
Project Description
This thesis visual project will be a proof of concept social networking site that allows users to share and nd things to do. By casting the user in an active role, users will be afforded discursive agency to interact with and respond to the content they are generating. Users will be able to create new things to do by documenting the outcome of their project and steps by which others can reproduce it. Other users can decide to do a thing already in the system by following the instructions and then uploading their documentation. This model recognizes that not everyone needs to come up with original content in order to contribute to the system. Additionally, it allows for iterations on an idea to improve it. Most importantly, it will offer a framework of interaction models that actively engage the user to empower their discursive agency, so that our online communities can become venues for rich cultural dialogues.

System Architecture

System Architecture
User Flow

home

about

help

logged in?

no

yes

non-logged in homepage for new user conversion

logged in homepage

sign up

log in

recent and active things to do

Create a Thing

Account Info

documentation of thing page

instructions

who else has done this

Do this Thing

Comment/ Note

Log in/Sign in

Log In

User Flow
Log In

Enter Email

Remember Password?

No Yes
Enter Password

Forgot Password

Login

See logged in homepage

Log In

Wireframes
1

A Log In link will be present in the top right of the screen. This is a link because two buttons would require unnecessary cognitive processing of visual information which could dissuade users from taking any action. Registered users have more impetus to work harder to get to their content therefore the UI for them to log in can be less visually demanding.

Log In

Wireframes
1

After clicking on the Log In link, a modal including the log in form will drop down. To log in, users will need to provide the email address they registered with and their password. If they have forgotten their password, clicking on the Forgot Password? link will begin the forgot password ow (not annotated in this deck). This is a link because it is not the primary action we would like the user to take at this moment.

3 4

When the user has completed the form, they can click the Log In button to log into their account. As the primary action we would like the user to take in this scenario, this needs to be a button with a primary visual design treatment.

Log In

Wireframes
1 2 2

When the page refreshes after logging in, the user will see their info in the top right, including their avatar. Their full name, as entered in reg, will appear as a link. Clicking on this will allow the user to access menu items to navigate to their content and take account related, high level actions.

Sign Up
User Flow

Sign Up Form

Enter Full Name

Set Password

Enter Email

Conrm Password

Set Avatar?
Upload Avatar

Yes No
Agree to TOS, Privacy Policy, Email

Welcome Email

New User Experience

Log In

Wireframes
1

A Sign Up button will be present in the top right of the screen. This is a button because it is the primary action we want users to take when they land on this page. Existing users will be able to log in via the link to the left.

Log In

Wireframes
1 1 2 2 5 3 3 4 4 6

After clicking the Sign Up button, a modal including the sign up form will overlay on the homepage. Users will be asked to ll out: Full Name Email Address Password A password strength indicator will be next to the password eld Personal information could be collected at this time, but future iterations will explore making this an optional request to esh out ones prole after reg. A short text description will quickly explain why a user should reg and include a link where they can learn more if they still have questions. Clicking the Sign Up button will send the request to create the new account to the server and the ow will continue.

Log In

Wireframes
1

1 2 3

When the page refreshes after logging in, a conrmation banner will be at the top of the page and will greet the user by their name. The user will see their info in the top right, including their avatar. Their full name, as entered in reg, will appear as a link. Clicking on this will allow the user to access menu items to navigate to their content and take account related, high level actions.

Creating a Thing to Do

Creating a Thing to Do
User Flow
Create a Thing to Do
Add Instructions

Set Title

Enter Title and Description for Step

Upload Documentation

Upload Documentation

Type?

Type?

image

video

audio

image

video

audio

Add another step?

Add Text Description?

yes No

Add More Documention?

yes

no

Done

Creating a Thing to Do
Wireframes
1

When a user clicks on the link that says their name in the upper right of the screen, a dropdown menu will appear with contextual account related navigation options and actions. The last menu item is a large Create a New Thing button.

Creating a Thing to Do
Wireframes
1

2 6 3 2

A new navigational waynding banner will appear with a title describing the process the user is now in. A stepped process will show the user how long the process is and how far they have progressed The user will set a cover image or video for their thing. This is the main visual for identifying the thing. Set a title for the thing. Add as much content to the documentation as desired. Not shown: this tool bucket will be at the end of all content so that users will easily be able to add content as they build the story of their thing. If they would like to add content in between two types of existing content, there will be an abbreviated tool bucket that users can use to insert content. Mousing over content will give access to tools to move, edit, delete.

4 5 5

Additional project data can be entered on the right of the screen. When the user is done creating the steps of the instructions, they can click the save and continue button to proceed. Clicking the Cancel button will cancel the entire process and return the user to where they were before starting the Create ow.

Creating a Thing to Do
Wireframes
1

The stepped process will update to show progress. Not shown: Clicking on the previous step will bring users back to the documentation screen, asking whether they would like to save their instruction progress before doing so.

1 5 2 3 2

Each Step will need to be named with a title. Following the same pattern from the Documentation step, users will be able to add, edit and remove content to their instructions. A + Another Step link will be present at the bottom of the last Step. Clicking this will create a new Step, including all UI present from the rst step shown here. Not shown: mousing between steps will allow you to insert steps.

As steps are added, a navigational list will populate on the right. When the user is done creating the steps of the instructions, they can click the save and continue button to proceed. Clicking the Back button will return the user to the previous step. Clicking the Cancel button will cancel the entire process and return the user to where they were before starting the Create ow.

Creating a Thing to Do
Wireframes
1

The stepped process will update to show progress. Not shown: Clicking on the previous step will bring users back to that part of the process, asking whether they would like to save their progress before doing so.

1 3 4 2

The tite of the Thing to Do will appear here Clicking on the Instructions link will pop a modal with the instructions for doing this thing (not shown) Clicking this edit button will bring users back to the rst step of creating a thing to do. The cover image or video will appear here. The additional documentation will appear here and will ow down the page as long as there is content. The metadata supplied about the project will appear on the right side. Clicking the Publish button will create the thing to do in the system, publish it to a public URL and make it searchable in the system. Clicking the Back button will return the user to the previous step. cancel the entire process and return the user to where they were before starting the Create ow.

3 5

10

10 Clicking the Cancel button will

Creating a Thing to Do
Wireframes
1 1

The page refreshes to show the published state of the Thing to Do. As this is the users thing, there remains an edit button on this view. Clicking on the Edit button will bring users back to the rst step of creating a thing to do, will all of the information previously entered in place.

Viewing a Thing to Do

Viewing a Thing to Do
User Flow

Thing to Do

Instructions

who else has done this

Do this Thing

Creator

Documentation

Comments and notes

Comment/ Note

Avatar Name Location? Date/time created Bio?

Media + Copy

Author Date/Time Comment What are they ref.

Viewing a Thing to Do
Wireframes
1 1 2 3 2

The title of the Thing to Do Clicking on the Instructions link will pop a modal with the instructions for doing this thing. Clicking on the ReVerb It button will start the Do this Thing process. Cover image or video. Further documentation Metadata about Thing to Do Sticky footer remains xed to the bottom of the browser window until it hits the page footer (not shown) Clicking on the ReVerbs button will expose the documentation from other users who have done this thing. Clicking on the Notes button will expose the notes on this thing.

4 5 6 7 6 8

7 8 9 9

10 See #3 11 Clicking on the Add a Note

button will start the add a note process (not shown) start the share process (not shown)

12 Clicking on the Share button will

11

12

10

Viewing a Thing to Do
Wireframes
1

Clicking the Instructions link will pop a modal. Clicking on the ReVerb It button will start the Do this Thing process. Clicking the X button will close the modal. Title of step Media and text description of the step Navigational list of all steps Clicking the Next Step button will navigate to the next step. Will not be present on last step Not shown: Previous step button will be present on all steps aside from the rst one and will navigate back one step.

3 4 5

4 5 6

6 7

Viewing a Thing to Do
Wireframes
1

After clicking the ReVerbs button in the sticky footer, a drawer opens to expose all the ReVerbs of the thing. The cover image/video will be visible behind the drawer The title of the drawer will include a count of total ReVerbs of this thing. Clicking on a thumbnail of a thing will expose a quick view of the thing. It will include information about the user who ReVerbed it, as well as when and where they did it. A count of ReVerbs of this ReVerb A count of notes on this ReVerb All ReVerbs are represented by a thumbnail of their cover image/video Clicking the X button will colllapse the drawer.

1 3 4 8 5 6 7

6 7 8

Doing a Thing to Do (ReVerb It)

Doing a Thing to Do
User Flow

Thing to Do

Do This Thing

Thing is added to list of things to do

Go do thing

Upload documentation and text description

Done Thing gets added to the Reverbs for that Thing

Thing moved to your Things Done List

Doing a Thing to Do
Wireframes
1 1

Clicking on the ReVerb It button will start the Do this Thing process.

Doing a Thing to Do
Wireframes
1

Clicking on the ReVerb It button will pop a conrmation modal. Cover image/video. Short summary description. Creator or ReVerber information Clicking the ReVerb It button will add this thing to the users Things to Do list. Clicking the X button will close the modal.

2 3 1 6 4 5 2 6 4

Doing a Thing to Do
Wireframes
1

After clicking the ReVerb It button, the modal content refreshes to conrm the action. A message conrms the Thing has been added to do. Shows the list of Things to Do with the newest addtion at the top and decorated. Last list item shows the count of any things to do that do not t on the list. Clicking Do It Now will bring the user to the documentation ow. Clicking the X button will close the modal.

2 1 2 3 4 5

Doing a Thing to Do
Wireframes
1

2 2 6 3 3

A new navigational waynding banner will appear with a title describing the process the user is now in. A stepped process will show the user how long the process is and how far they have progressed The user will set a cover image or video for their thing. This is the main visual for identifying the thing. Set a title for the thing. Add as much content to the documentation as desired. Not shown: this tool bucket will be at the end of all content so that users will easily be able to add content as they build the story of their thing. If they would like to add content in between two types of existing content, there will be an abbreviated tool bucket that users can use to insert content. Mousing over content will give access to tools to move, edit, delete.

4 5 7

4 5

The user who created the Thing that is being ReVerbed will be prepopped here and will not be editible. Additional project data can be entered on the right of the screen. When the user is done creating the steps of the instructions, they can click the Save and Continue button to proceed. Clicking the Cancel button will cancel the entire process and return the user to where they were before starting the Create ow.

Doing a Thing to Do
Wireframes
1

After clicking the Save and Continue button, the view changes to the instructions screen. A modal pops asking users to make a decision about how they would like to proceed with describing the instructions. Description of the choice the user has to make: edit the previous users instructions or clear and start fresh. Clicking the Clear and Start Fresh button will close the modal and clear all the steps and return the view to the default, empty instructions screen. Clicking the Edit Instructions button will close the modal and let the user edit the instructions using the patterns established in the Create a Thing ow. Clicking the X button will close the modal.

3 4 5 4

Doing a Thing to Do
Wireframes
1

After getting the instructions the way they want, clicking the Save and Continue button, the view changes to the preview screen. Clicking Cancel will abandon the ReVerb It process and return to where the user was before starting this process.

Doing a Thing to Do
Wireframes
1 1

After clicking the Save and Continue button, screen refreshes to the preview of the ReVerb. Follows the same UI patterns from the Create a Thing preview. The only difference would be the inclusion of the creator of the thing being ReVerbed. Clicking the Publish button will create the thing to do in the system, publish it to a public URL and make it searchable in the system. Clicking the Back button will return the user to the previous step. Clicking Cancel will abandon the ReVerb It process and return to where the user was before starting this process.

Doing a Thing to Do
Wireframes
1 1

After clicking the Publish button, the page refreshes to show the published state of the Thing to Do. As this is the users thing, there remains an edit button on this view. Clicking on the Edit button will bring users back to the rst step of creating a thing to do, will all of the information previously entered in place

The page follows the UI patterns of the published state of a new Thing To Do. The only difference would be the inclusion of the creator of the thing being ReVerbed.