Production Processes

INTERACTIVE DESIGN

TWO SEMESTER PROJECT OR One semester project

Interactive design for websites and apps. This project will include a working, navigable website or app plus a document capturing the design and development process.

DELIVERABLES

  • Project definition documentation
  • Benchmarks
  • UX Stories
  • Content map
  • Wireframes
  • Design
  • Development
  • Testing
  • Process Document (PDF, Google Doc or Other)

FIRST REVIEW: PROJECT DEFINITION

(1st Semester)

1 - 2 SENTENCE LOG LINE THAT INCLUDES:

  • genre
  • target audience
  • delivery system
  • objective
  • emotional connection

Example log line: "In this Storybook Tablet App, three road construction toys, just children themselves, come to life and help each other work through typical emotional trials and tribulations. We aim to teach kids, ages 3-6, how to understand their emotions and move past feelings like frustration and anger to feelings of joy, laughter and purpose."

FUNCTION

  • Minimum 3 benchmarks with great UX that is similar to your project - screen shots with links
  • Interview Potential Users
  • UX stories (written) for each use case scenario

BRAND

  • Perform a differentiation search and list at least 3 other benchmarks that are already in your conceptual space. Show screenshots of them (and link if avail.)
  • Describe how you will differentiate your concept and make it memorable
  • SEO strategy outline (for web sites only)

AESTHETICS

  • Minimum 3 benchmarks utilizing designs that will create similar emotions - screen shots with links


SECOND REVIEW: UX/UI DEVELOPMENT

(1st Semester)

UX DEVELOPMENT

  • Content Map
  • Wireframe layouts for all targeted display screens (at correct pixel dimensions)
  • Design Wireframes for all targeted delivery methods (ie: desktop, tablet, phone, vr, etc.)

ADD COMMITTEE NOTES TO JOURNAL (OPTIONS BELOW)

  • Allow them to edit your document directly
  • Write your own notes based on their verbal feedback
  • Copy and paste notes from email or other correspondence
  • Include any visual image mark-ups (place them directly in the document)


THIRD REVIEW: VISUAL DESIGN - LANDING SCREEN

(1st Semester, 2nd review for One Semester Project)

VISUAL DESIGN

  • Full color layout of landing screen.
  • Don't place in interactive environment yet
  • Design screens at the correct pixel dimensions so they can be used in the site construction
  • Design and integrate any content needed to complete the screens
  • If you are using video or other media yet to be produced - create a custom thumbnail image for it
  • Pay attention to layout conventions & visual hierarchy
  • Check color shift and contrast and adjust to work on a variety of computer displays (create jpegs screens for the tests)

ADD COMMITTEE NOTES TO JOURNAL (OPTIONS BELOW)

  • Allow them to edit your document directly
  • Write your own notes based on their verbal feedback
  • Copy and paste notes from email or other correspondence
  • Include any visual image mark-ups (place them directly in the document)

FOURTH REVIEW: VISUAL DESIGN - REMAINING SCREENS

(1st Semester)

VISUAL DESIGN

  • Full color layout of remaining screens.
  • Don't place in interactive environment yet
  • Design screens at the correct pixel dimensions so they can be used in the site construction
  • Design and integrate any content needed to complete the screens
  • If you are using video or other media yet to be produced - create a custom thumbnail image for it
  • Pay attention to layout conventions & visual hierarchy
  • Check color shift and contrast and adjust to work on a variety of computer displays (create jpegs screens for the tests)

ADD COMMITTEE NOTES TO JOURNAL (OPTIONS BELOW)

  • Allow them to edit your document directly
  • Write your own notes based on their verbal feedback
  • Copy and paste notes from email or other correspondence
  • Include any visual image mark-ups (place them directly in the document)

FINAL REVIEW: VISUAL DESIGN - REFINE

(1st Semester, 3rd Review for One Semester Project)

VISUAL DESIGN

  • Refined (based on committee reviews) Full color layout of all screens.
  • Don't place in interactive environment yet

FIrst Review: VISUAL DESIGN - REFINE

(2nd Semester)

USER TEST

  • Live Prototype
    • Build in Adobe XD or similar tool (optional) and allow users to navigate
    • or
    • Prepare and show screens in pdf or similar format and review with users
  • Reference the User Testing Guide on the DLC
  • Write user test notes and put them in your Drive folder

SECOND Review: CONSTRUCTION

(2nd Semester)

ALL IMAGES PLACED INTO DEVELOPMENT ENVIRONMENT

  • For every screen

CREATE A SOUND DESIGN PLAN IF REQUIRED

  • Typically needed only for multimedia or games

THIRD Review: DEVELOPMENT

(2nd Semester)

FOR NON-MULTIMEDIA WEBSITE

  • Link all navigation
  • Finish all copy
  • Create meta and image tags

FOR MULTIMEDIA APP

  • Link basic navigation
  • Animation, video & sound completed

FOURTH Review: DEVELOPMENT

(2nd Semester, 4th Review for One Semester Project)

FOR MULTIMEDIA

  • Link all navigation
  • Complete any advanced functional coding
  • Animation, video & sound integrated

ADD COMMITTEE NOTES TO JOURNAL (OPTIONS BELOW)

  • Allow them to edit your document directly
  • Write your own notes based on their verbal feedback
  • Copy and paste notes from email or other correspondence
  • Include any visual image mark-ups (place them directly in the document)

FINAL Review: USER TESTED & TUNED FINAL

(2nd Semester, Final Review for One Semester Project)

TESTED AND TWEAKED

  • Perform a usability test with 4-6 people
  • Revise as necessary based on user testing
  • Test function & layout... then tweak until it is cross platform

TURN IN

  • All associated files for website or app only (not the design .psd, etc. files)
  • Complete PDF or Google Doc pitch that includes every element from Reviews 1 & 2 listed above. Include a link if it is live.