Production Processes

InteractiVe Mock-up

Single Semester Project

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

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."


Find one benchmark for each of these:

  1. Landing/Start Screen Style

  2. Navigation Style

  3. Architecture (Organization)

  4. Content (images, text, etc.)

  5. Color Scheme/ Emotional tone

Include screenshots with links. Describe why you chose each benchmark. Reference this Wheels Benchmarks example. Model yours after the left column (with the benchmarks).

UX Development

Create Interaction Stories

Create a Content Map or Game Loops

Describe Production Process

  • Design tools (Photoshop, etc.)

  • Prototyping (XD, etc.)

Wireframe Layouts or Game Loops

  • Reference This Example Wireframe

  • 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

Third 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

Fourth Review: Visual Design

Complete Additional Pages

  • Design and integrate all remaining pages

  • If your app includes videos - create a custom thumbnail image for them

  • Design and integrate all content needed to provide a full understanding of most user experience scenarios.

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

Revised Layouts Based on Feedback

  • Include all pages

  • Design a store icon (if it is an App)

Turn In

  • Google Slideshow that includes all deliverables listed above.