PROJECT 2

INTERACTIVE STORYTELLING

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

Tell the history of a person, place, or thing.
Tell a story about a collection of objects.
Choose an existing article or chapter.
Choose a topic of interest, then inform, persuade, or entertain.
Demonstrate a “How to” process.

WWU Student Examples

STUDENT ADAA SEMI-FINALIST WINNERS

Banned Books (chapter)
27 Club (history)
Battle Leftovers (collection)
Appalachian Trail (history)
History of the Beatles (history)
Zombie Ants (article)

PROFESSIONAL

CA Interactive Annual 26

Competitive and Inspirational Research
Find different websites relevant to your site. These sites are your possible competition and can be inspiration. In order to attract your audience to your site, see what’s possible, and stay current, you need to know what’s out there. Compare and contrast the sites you found:
- What is your first impression / first impulse?
- Is the site organized and consistent?
- Is there enough or too much content? Is the content interesting/relevant?
- Does the appearance of the site reflect the content?
- What stands out, both good and bad?
- Take screen shots of relevant pages of these websites and explain why you chose them.
Content Breakdown: Breakdown the text. Are their any word/image associations? What is the story structure? How can the story be broken down? What are innovative approaches to organize and represent the story?
Brainstorming
Conduct a free-write on your topic. Create a word list from this free-write and then mind-map around these words and build out associations. Ask yourself: What stands out about the story or theme? What are the goals of the story?
Target Demographic
To help focus the intentions, goals, and design of the website, briefly define your target demographic in a short statement. Try to explain what type of user may visit your site, including age range, technological usage, interests, how they find your site and what they get out of it.
Written Strategy Statement and Goals
Based on your competitive and inspirational research, brainstorming, content breakdown, and defined audience – write your concept for how you will represent the story you were given. What are the design and user goals of the website?
Moodboard
Collect images, colors, type, etc. and any other visual inspiration that represents the personality of your story. Compile them into a moodboard that you will use to inform your design decisions.
Sketches
Knowing what content goes on the page, create rough sketches to help with grid structure, hierarchy, and consistency. Develop multiple sketches for desktop and mobile layouts.
Design Comps
After you have chosen sketches, flesh them out in Sketch. Design three different variations demonstrating your website’s look-and-feel. Each variation must include designs for both desktop and mobile.
Design Refinements & Wireframes
Choose a style, refine, and design the final desktop and mobile layouts, thinking about how it will translate into HTML/CSS by creating corresponding wireframes.
Coded Website
Your project grade is ultimately based on the final working prototype of your website and your process towards it. You will be building the website in Brackets using Skeleton framework, HTML, and CSS.
Usability Testing
Test classmates on the usability and design of your coded website. Make any necessary adjustments.
Case Study
Complete a case study that narrates your journey through decision making and learning insights. It provides rationale for your solution.

These checkpoints will be evaluated and discussed over the course of the project.

Audit

research – competitors and inspirational
content list – words in story, list of possible images and interactions
brainstorm results

Define

target demographic statement
goals of concept (example: inform, entertain, interact, instruct, persuade. Visual goals. Interaction goals. Usability goals.)
strategy statement

Design

moodboard
site-map (if there are any interactions or links)
sketches
design ideation

Build

wireframes
coding prototype
usability testing

Usability is crucial for this project, and should be a key component of your design process and final design decisions. Not only will you create interactive prototypes for testing and your own creative process, but these experiences should also be reflected in your case study, outlining the evolution of your process.

That being said, we're going to keep your approach options flexible for this one. You are not required to use a specific software. Choose whatever software you desire. InVision, Sketch, Adobe XD, or another. The goal is not in what software being used, but what the final result is, and what value it brings to your final project.

Note: Usability is a key component of the evaluation for Project 2. Your Usability Prototype should answer these questions: Usability Testing Sheet. For more information, see Evaluation below.

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)

FINALS/PROJECT 2 UPDATE

We will not be meeting for our final on 20 March 2020. I have updated the project submission deadline to reflect the end of our finals period: 10am on 20 March 2020.

Other than these two changes, expectations for your Project 2 Finals submission remain the same.

For more information regarding the SARS-CoV-2 and COVID-19 situation, and it's impact on this course, please see the VIRUS ONLINE CLASS UPDATE page. Also, you can stay up-to-date with the University via the WWU Coronavirus Information Website.

Please let me know if you have any questions regarding this change in scheduling.