Project 2: Interactive Storytelling

ASSIGNMENT BRIEF

Online editorial platforms are trying new and exciting ways of presenting content to make full use of the digital experience. Your challenge is to bring a short story to life, while considering the flow of content, visual design, expressive web typography, animated and interactive enhancements, and overall responsive nature. You will be designing and developing a more experiential single-page website of around 1,000-1,500 words. It is critical that you experiment with the format to create a unique viewing experience, while still considering the flow of information and usability.

Use one of the following for content:

  1. Choose an existing short article or chapter
  2. Tell the history of a person, place, or thing
  3. Tell a story about a collection of objects
  4. Demonstrate a “How to” process

EXAMPLES

WWU Student Examples

Student ADAA Semi-Finalist Winners

Professional

PROJECT SPECS:

Click to see parameters:

  1. single-page (unless your concept promotes multiple pages then I am open)
  2. HTML / CSS / Skeleton Framework
  3. responsive (desktop + mobile breakpoints)
  4. at least 1 css animation/transition
  5. Google Fonts and/or Typekit Web Fonts
  6. approx. 1,000 words
  7. original or copyright-free assets
  8. optimized images (Export > Save For Web (Legacy) in Photoshop)
  9. organized files / folders / code

DELIVERABLES

Click to see final deliverables:

  1. Single-Page Responsive Website (linked to Sandbox)
  2. PDF or Prototype of Final Intended Design: this is just in case you cannot get the layout coded exactly how you intended (linked to Sandbox)
  3. Case Study PDF or Google Slides:  (linked to Sandbox) You will be writing a case study that addresses the following outline which helps to evaluate your solution to the design brief. Case studies narrate your journey through decision making and learning insights. Point out any surprising or counter-intuitive lessons from your process. Include any additional content and photos to support and explain your case study. Your case study will be in the form of a approx. 1,000 word PDF with plenty of images, process, etc.
    1. Background: A brief introduction of the project: the brief, synopsis of the story you chose, why you chose it, etc.
    2. Solution: What was your proposed solution for the project? This includes how you approached the problem and overall strategy statement.
    3. Process: What steps did you take to reach the final product
      1. Research – What kind of research did you conduct to immerse yourself in the project? Competitor research/inspirational research? What were the main takeaways?
      2. Content Breakdown – How did you break down the structure of the story? What themes arose? What image associations were there?
      3. Target Audience – Who is your target audience? How did you determine this?
      4. Brainstorming – What type of brainstorming did you do? Did you do a free-write, word list, mind-map, do’s and don’ts list, and more breakdown of your narrative? What came out of it?
      5. Concept Evolution – Why did you choose the direction that you did? What were your user and narrative goals? Were there other concepts or ideas you explored before coming to the final direction?  
      6. Visual Design – How did you reach your final visual design? Show moodboard, several sketches/wireframes, initial visual designs, and refinements. What feedback did you receive about the different designs and refinements?
      7. Usability Testing –What did you learn during testing? Were there any patterns? What refinements did you implement for the final design?
    4. Outcome: What was the end result?
      1. Final Design – Clearly show final comps for both mobile and desktop.
      2. Challenges – What were the challenges you had to overcome?
      3. Reflection – What did you learn from completing this project?
      4. Vision/Future Goals – Is there any room for growth with this project?

Click to see process checkpoints you conduct during the duration of the project:

  1. Web Design Process Checkpoints: Well-performed and documented process will make it easier and quicker to construct a case study.
    1. Audit
      1. research – competitors and inspirational
      2. content list – words in story, list of possible images and interactions
      3. brainstorm results
    2. Define
      1. target demographic statement
      2. goals of concept (example: inform, entertain, interact, instruct, persuade. Visual goals. Interaction goals. Usability goals.)
      3. strategy statement
    3. Design
      1. moodboard
      2. site-map (if there are any interactions or links)
      3. sketches
      4. design ideation
    4. Build
      1. design prototype
      2. wireframe
      3. coding website
      4. usability testing

EVALUATION

Click to see evaluation criteria:

Concept/Design/Usability: 60%
Functionality: 20%
Case Study: 20%

Concept

  • concept strength & execution
  • communication of story
  • appropriate audience
  • enhancement of story for digital platform

Design

  • visual structure
  • typography
  • visual assets, supporting graphic elements, & color scheme
  • responsive visual design translation

Usability

  • overall user-friendliness
  • information architecture (organization of content)
  • clarity of buttons, links, or interactive elements
  • usability of responsive design translation

Functionality

  • overall functionality on desktop & mobile (lack of error, image optimization, web fonts)
  • CSS (one custom CSS document, skeleton CSS, organization, execution)
  • HTML (organization, execution)
  • integration & quality of css animation/transition

Case Study 

  • Background: clear & convincing argument explaining the brief, story, and strategy statement
  • Research: demonstration of process through research, content breakdown, brainstorm, free-write, word list, mind-map,  audience, moodboard
  • Concept Evolution: demonstration of concept evolution through goals, user flow, sketching/wireframing, visual design iterations, refinements, user testing
  • Outcome: explanation of outcome through final design, challenges, reflection, and vision
  • Design: overall case study design and appropriate amount of content (1000 words + images)

SCHEDULE

Click to see schedule:

Week 5

2.01:
In Class: Project 2 Introduction

Due Next Class:
choose story
competitive and inspirational research
content breakdown

2.03:
In Class: Brainstorm session. Go over story, research, and content breakdown. 

Due Next Class:
brainstorm results
target demographic
goals
strategy statement

Week 6

2.8:
In Class:look at brainstorm results, target demographic, goals, strategy

For Next Class:
moodboard
sketches of flow of content (desktop + mobile for each)

2.10:
In Class: look at sketches and moodboard

For Next Class: 
3 design comp variations (desktop + mobile)

Week 7

2.15:
In Class: initial critique of design variations

Due Next Class:
refine design

2.17:
In Class: look at refinements

Due Next Class:
refine further and draw wireframes of design

Week 8

2.22:
In Class: look at refinements/wireframes

Due Next Class:
start coding

2.24:
In Class: continue to code

Due Next Class:
continue to code

Week 9

3.1:
In Class: continue to code

Due Next Class:
continue to code

3.3:
In Class: continue to code

Due Next Class:
continue to code

Week 10

3.8:
In Class: usability test
Finish website and case study

3.10:
In Class: usability test
Finish website and case study

Finals

Tuesday, 3.15:
Final Critique: Project 2 and Case Study linked to Sandbox