DES 157 / PROCESS DESCRIPTIONS

File structure

• Create a folder titled "project" in your main web folder
• Create a folder titled "process" in your "project" folder
• Each process activity should be titled and structured
  as described below and saved in the "project" folder
• Note: All images should be sized and optimized for web
• Update your portal with direct links (as titled below) to each process activity

Topic Brainstorm (.5 points)

• Brainstorm three possible topics that interest you
  and that fit into one of the ISEA 2017 subthemes
• Save as topicBrainstorm.html or topicBrainstorm.jpg or topicBrainstorm.png or topic.pdf in the process folder
• Update the first link on the portal under "project" to "topic brainstorm"
  and link it to the "topic" file you just made
• Commit all changes to github
• Submit the URL for this process activity to the Canvas Assignment

Comparative Research (.5 point)

• When starting on a project, it is worthwhile to survey
  comparable projects, noting their assets and drawbacks
• Choose two real-world websites, apps, projects, etc, that have
  close similarity to your topic interest (content, intent, target audience)
• Critically evaluate both projects in terms of interface design,
  interaction design and overall experience using compare/contrast
• Summarize research in 1-2 pages
• Include an image of each project's interface (cite the source if it is not your own image)
• Save as comparative.html or comparative.pdf in the process folder
• Remove all links under "project" on your portal after "topic brainstorm"
• Create the second link under "projects" on your Studio 1-portal titled "comparative research"
• Commit all changes to github
• Submit the URL for this process activity to the Canvas Assignment

Topic Choice & Partnerships (.25 point)

• Drill down from your topic brainstorm and choose a topic
• Consider whether you will work individually or with a partner on the project
  If you plan to work with a partner, include the parter's name
• Note: All process materials are to be completed individually
  (even if you are working with a partner) until otherwise notified
• Save as topic.html or topic.pdf in the process folder
• Create the next link under "projects" on your Studio 1-portal titled "topic choice"
• Commit all changes to github
• Submit the URL for this process activity to the Canvas Assignment

Background Research (2 points)

• Read at least three sources of information on your subject, such as short articles.
  Your research should be exploratory and academic; it will help you to think about
  your project in deeper (and broader) ways. Research can include form and content
• Include bibliography (MLA format)
• Summarize research in 1-2 typed pages
• Submit printed out with lastName, firstName, DES 157 in upper right
• Save as research.html or research.pdf in the process folder
• Create the next link under "projects" on your Studio 1-portal titled "research"
• Commit all changes to github
• Submit the URL for this process activity to the Canvas Assignment

ISEA Proposal Draft (.5 point)

• Write a draft proposal for Artist Talk/Work In Progress
  details here: http://isea2017.isea-international.org/
  template here
• Note: If you are working on your project with a partner, you may submit this proposal together and include on both portals
• Create the next link under "projects" on your Studio 1-portal titled "proposal draft"
• Commit all changes to github
• Submit the URL for this process activity to the Canvas Assignment

ISEA Refined Proposal (.75 point)

• Refine your proposal for Artist Talk/Work In Progress
  details here
  template here
• Email/submit your proposal to ISEA (isea2017@ucaldas.edu.co)and cc Spencer
• Create the next link under "projects" on your Studio 1-portal titled "proposal"
• Commit all changes to github
• Submit the URL for this process activity to the Canvas Assignment

Needfinding (.5 point)

• Step 1: Observe
  • Watching how other people do things is a great way to learn user goals and values
  • Observe the successes, breakdowns and latent opportunities that occur when
    another person (hopefully in the target audience) interacts with a similar system
  • Partner with a student from class or a friend outside of class and have them interact
    with one of the comparative projects that you identified in your comparative research
  • Document your observation (notes, drawings, photos, etc)
• Step 2: Brainstorm
  • Review your outcomes from step 1 and brainstorm a list
    of at least 7 specific user needs for your final project
  • Use phrases such as "needs a way" or "needs to be able to"
• Step 3: Post
  • Save 10 user needs and a documentive image as
    needfinding.html or needfinding.pdf in the process folder
  • Create the next link under "projects" on your Studio 1-portal titled "needfinding"
  • Commit all changes to github
  • Submit the URL for this process activity to the Canvas Assignment

Visual Research (.5 point)

• Create two different visual explorations, saved as
  moodboards.html or moodboards.pdf, etc, in the process folder
• Note: Images do not have to be copyright free, but each
  moodboard shows a different, broad and deep visual exploration
• Create the next link under "projects" on your Studio 1-portal titled "visual research"
• Commit all changes to github
• Submit the URL for this process activity to the Canvas Assignment

Audience Research/Persona (.75 point)

• Audience research is an important process activity that helps build understanding and empathy for the users of your project. Audience research can take many forms including demographic research and surveys. Research is often compiled into fictional personas (with an image) that
  serve to represent the behaviors and goals of a hypothesized group of users
• Create one audience persona with an image
• Consider the following details: demographics, behavior patterns,
  goals, skills, attitudes, and environment
• Example persona guidelines for beginners here:
  https://blog.bufferapp.com/marketing-personas-beginners-guide
• Save as audience.html or audience.pdf or audience.jpg, etc. in the process folder
  
• Create the next link under "projects" on your Studio 1-portal titled "audience"
• Commit all changes to github
• Submit the URL for this process activity to the Canvas Assignment

User Goals (.5 point)

• Consider the following questions and write a quick response for each:
  • How will your users understand the content of the project?
  • How will your users understand the primary objectives?
  • What content and features do your users need, and in what form do they need it?
  • How do your users think your interactive projects should work and what are
    their experience levels with the type of media you are creating?
• Note: If you are working with a partner, you may do this activity
  together, but each student must post the response to the portal
• Save as userGoals.html or userGoals.pdf or userGoals.jpg, etc, in the process folder
• Create the next link under "projects" on your Studio 1-portal titled "user goals"
• Commit all changes to github
• Submit the URL for this process activity to the Canvas Assignment

Storyboards (1 point)

• Documentation (images) of two storyboards created
  in class with a one paragraph summary of learning outcomes
• Storyboards should convey:
• setting
  • people involved
  • environment
  • task being accomplished
• sequence
  • what leads someone to use the app?
  • what steps are involved?
  • what task is being illustrated?
• satisfaction
  • what motivates people to use this project?
  • what does it enable people to accomplish?
  • what need does it fill?
• Save as storyboards.html or storyboards.pdf or storyboards.jpg, etc, in the process folder
• Create the next link under "projects" on your Studio 1-portal titled "storyboards"
• Commit all changes to github
• Submit the URL for this process activity to the Canvas Assignment

Site Flow (.25 point)

• Mapping the content organization and/or flow of the system. For websites this is the
  organization scheme (such as time-based (newest item first), subject based, task-based, alphabet-based or a combination of techniques), categories (organized topic areas), labels (making sure that the language used will communicate successfully with the target audience)
  and sitemap (draw a schematic-view of the structure).
• The site flow should:
  • Establish hierarchy of information:
    Do you want to present information on the same level?
    Or direct users to select areas?
  • Show the logic of your design decisions and allow you
    to plan the most elegant way to build the project
  • Document information architecture decisions that
    will be useful during maintenance and future upgrades
• Find more information here: https://en.wikipedia.org/wiki/Site_map
• Save as siteflow.html or siteflow.pdf or siteflow.jpg, etc, in the process folder
  
• Create the next link under "projects" on your Studio 1-portal titled "site flow"
• Commit all changes to github
• Submit the URL for this process activity to the Canvas Assignment

User Flow / User Journey (.5 point)

• Map the main paths you expect your users to travel
  with your project and consider obstacles and movement
• Find more information here:
  http://uxmovement.com/wireframes/site-flows-vs-user-flows-when-to-use-which/
• Create the next link under "projects" on your Studio 1-portal titled "user flow"
• Commit all changes to github
• Submit the URL for this process activity to the Canvas Assignment

Paper Prototypes (.5 point)

• In 10 minutes or less, prototype the interface and features of your project
• Use one piece of paper for each page/interactive screen
  and then have users try them out in a usability test
• Have your users indicate where they want to click to find the
  information and you change the page to show that screen
• For more information: http://www.alistapart.com/articles/paperprototyping/
• Time permitting, iterate and improve your prototype for a second round of testing
• Save image and one paragraph description as paperPrototype.html in the process folder
• Create the next link under "projects" on your Studio 1-portal titled "paper prototype"
• Commit all changes to github
• Submit the URL for this process activity to the Canvas Assignment

Wireframe (.5 point)

• Wireframes are meant to show the skeletal structure (placement of navigational and content elements) in a very simplified visual style, such as dark gray outlines with no fills, to generally map out the location of features. The main goal is to communicate behaviors and features,
  not visual style. It is important to keep detail to a minimum so that the communication and feedback are entirely about the behaviors and features
• More information here: https://en.wikipedia.org/wiki/Website_wireframe
• Save as wireframe.html or wireframe.pdf or wireframe.jpg, etc, in the process folder
• Create the next link under "projects" on your Studio 1-portal titled "wireframe"
• Commit all changes to github

Interactive Protoype 1 (.75 points)

• An html click-through of main navigation and interactions (think of as an interactive wireframe)
• Include a footer with links to html and css validation
• Save as index.html with associated files as necessary (css, js) in a "proto1" folder within the "project" folder
• Create the next link under "projects" on your Studio 1-portal titled "prototype 1"
• Commit all changes to github
• Submit the URL for this process activity to the Canvas Assignment

Comps (1 point)

• A comp is a full graphic layout of an interface with as
  close to a fully developed look and feel as possible
• Create two completely different comps to show two completely different possible design directions
• Save as comps.html or comps.pdf or comps.jpg, etc, in the process folder
• Create the next link under "projects" on your Studio 1-portal titled "comps"
• Commit all changes to github

Style Tile (.25 point)

• According to A List Apart, a style tile "is a design deliverable that references website
  interface elements through font, color, and style collections delivered alongside a site flow, wireframes, and other user experience artifacts... They’re sample options that spur discussion with stakeholders on a common visual language. Containing sample UI style swatches, a style
  tile illustrates how a designer translates a stakeholder’s brand to the web. When a client uses
  the word “friendly” or “clean” to describe the site they want, the style tile visually represents those adjectives. Style tiles offer a catalyst for discussions to clarify and refine the client’s preferences and goals."
• Save as styleTile.html or styleTile.pdf or styleTile.jpg, etc, in the process folder
• Create the next link under "projects" on your Studio 1-portal titled "style tile"
• Commit all changes to github
• Submit the URL for this process activity to the Canvas Assignment

Interactive Protoype 2 (.75 points)

• Updated html click-through with more visual fidelity based on comps and style tile
• Include a footer with links to html and css validation
• Save as index.html with associated files as necessary (css, js) in a "proto2" folder within the "project" folder
• Create the next link under "projects" on your Studio 1-portal titled "prototype 2"
• Commit all changes to github
• Submit the URL for this process activity to the Canvas Assignment

Interactive Protoype 3 (.75 points)

• Almost completed project; ready for user testing
• Include very small links to html and css validation
• Save as index.html with associated files as necessary (css, js) in a "proto3" folder within the "project" folder
• Create the next link under "projects" on your Studio 1-portal titled "prototype 3"
• Commit all changes to github
• Submit the URL for this process activity to the Canvas Assignment

Target Audience Test (1 point)

• Audience testing is a vital part of the design and development
• Create at least three tasks for your target audience to test/accomplish during
  user testing. The tasks can be communicated as alert messages or printed out
  on paper (the room will be silent during testing)
• Create a list of questions you will ask to understand/evaluate the
  audience member's experience/feedback. The evaluation questions
  can be asked orally or through written form
• Learn more about audience testing from usertesting.com
• Save as audienceTest.html in the process folder
  
• Create the next link under "projects" on your Studio 1-portal titled "audience test"
• Commit all changes to github
• Submit the URL for this process activity to the Canvas Assignment

Target Audience Test Results (1 point)

• Summarize your target audience test results with visual documentation
• Include a description of the experience, what you learned and
  how you plan to update your prootype based on the feedback
• Save as audienceTestResults.html in the process folder
  
• Create the next link under "projects" on your Studio 1-portal titled "audience test results"
• Commit all changes to github
• Submit the URL for this process activity to the Canvas Assignment

Final Project

• Create the final project in its own folder within the "project" folder titled final
• Include very small links to html and css validation
• Save as index.html with associated files as necessary (css, js)
• Create the next link under "projects" on your Studio 1-portal titled "final"
• Commit all changes to github
• Submit the URL for this process activity to the Canvas Assignment

Critique Presentation

• Create a pdf presentation that showcases the highlights of your entire process at key learning moments. Choose at least three of the following process materials to present as critical / pivotal points in your process: topic, background research, comparative research, needfinding, proposal, visual research, audience research, storyboards, user goals, paper prototype, wireframe, site flow, user flow, comps, style tile, preliminary prototypes, target audience test and results and final prototype
• Be prepared to discuss your thinking and making, including your initial inquiry, visual inspiration / exploration, challenges, feedback that led to implementation and successes (what you learned)
• Your presentation should last 2 minutes or less
• Save as presentation.pdf
• Create the next link under "projects" on your Studio 1-portal titled "presentation"
• Commit all changes to github
• Submit the URL for this process activity to the Canvas Assignment