Week 3

Week 3: Schematics / Wireframes V
Topics:

•Single Page Architecture (SPA)
•Storyboarding II
•States and Conditional or Modal Interactions
Exercises:

Review key design differences between page-based site design and Single Page Architecture (SPA) designs.
•States - persistent changes to the entire screen or application
•Conditional or modal interactions - temporary changes to the current screen that returns to the parent screen or state when the interaction is complete.
Lightbox 2.0
The Gap
Broadmoor Hotel
Motel 6
Super 8 Motel
Design a BillPay application for online banking:
•Design as single page architecture (SPA)
•Identify and storyboard the states of the application
•Identify and storyboard conditional or modal interactions
•List any transitions or motion graphics and produce simple animatics
•Create the experience using a common task: Pay the entire monthly balance for a PG&E utility bill by the due date
Improve the sign-up experience for a content site that has a paywall. The London Times newspaper charges for access to news content, but the modal intercept that appears when people attempt to read a news story from the homepage does not clearly communicate what their options are.
•Is it obvious that there’s a free trial available? How long does it last and what content does it apply to?
•How do you feel about being required to enter your date of birth into a registration form? And your full postal address? And being asked to enter your phone number?
•What paid packages are available? What’s the difference between “subscription” and “membership”?
•What tangible freebies do you get with membership?
•Screenshots and Design Challenge (HTML)
Assignment:

Create storyboards to illustrate how to create a custom vacation for the project site. Include any adaptive interface elements (e.g., form fields that change conditionally, modal components that present options or explanations.) Annotate the states, modes, and conditions under which the transitions or changes occur.