Production Processes

Interactive Mock-up

SINGLE SEMESTER PROJECT

A UX design and Visual Design mock-up for a complex interactive project. This includes a PDF or Google Doc that needs to look professional in presentation and layout.


DELIVERABLES

  • Project definition documentation
  • Benchmarks
  • Journey Map
  • Content map
  • Wireframes
  • Design
  • Process Document (PDF, Google Doc or Other)

FIRST REVIEW: PROJECT DEFINITION

1 - 2 SENTENCE LOG LINE

  • 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 yours - screen shots with links
  • Interview Potential Users (optional)
  • UX Journey Maps for each use case scenario (include images and text)

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.)
  • SEO strategy outline (for web sites only)
  • Describe how you will differentiate your concept and make it memorable

AESTHETICS

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

SECOND REVIEW: JOURNEY MAP

JOURNEY MAP

  • Include every step of the experience
  • Also include before and after (problem presented / problem solved)
  • Create graphical storyboards
  • Include notes on or under the boards
  • The boards must stand on their own (without you having to explain them)

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: UX DESIGN

CONTENT MAP - include on every screen / page:

  • Actual screen / page names that will be used in the final
  • Secondary Navigation Buttons (if req'd)
  • Lines connecting secondary nav. buttons to their destinations
  • List of content

WIREFRAME LAYOUTS

  • Create at exact scale for every targeted screen size
  • Show in a device
  • Include every screen / page
  • If animated: include animation and sound notes under each

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

COLOR LAYOUTS

  • Include all page types (not all pages)
    • Landing
    • Typical Content
    • Contact
    • About
    • Etc.
  • Design screens at the correct pixel dimensions for targeted devices
  • Design and integrate enough content to complete the screens
  • If you are using video - 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: CONTENT DESIGN

ADD CONTENT AND ADDITIONAL LAYOUTS

  • Include all pages
  • Design screens at the correct pixel dimensions for targeted devices
  • Design and integrate all content needed to provide a full understanding of most user experience scenarios.
  • Design a store icon (if it is an App)
  • If you are using video - 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)
  • Perform user testing and include results in your final document

TURN IN

  • Complete PDF or Google Doc that includes all planning and design elements listed above.


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)