Saige Danby
PGN1-01.png

Interactive Short Story

 
PGN mockup.png
 

Interactive Short Story

WEB DESIGN, illustration, interaction design (Feb 2018)

The Brief:
Choose a short story from McSweeney's to create an interactive and responsive website for. My short story was titled A Post Gender Normative Man Tries to Pick up a Woman at a Bar, and was structured as a monologue of a man trying to talk to a woman.

My Solution:
A "pick your path" quiz version where the user chooses how the story ends. Since the structure was a humorous monologue, I realized the opportunity to write content that could be used as replies that could direct the user seemlessly to a new section of the story.

 

PROCESS

 The story took place at a bar, so through visual research and ideation, I decided the visual direction would be to create gifs of neon sign style illustrations. The process early on included story boarding, sketching potential illustrations, and writing content for the replies.   

The story took place at a bar, so through visual research and ideation, I decided the visual direction would be to create gifs of neon sign style illustrations. The process early on included story boarding, sketching potential illustrations, and writing content for the replies.

 

 With many paths possible through the story, I wanted to have a different neon sign illustrated gif for each quiz prompt. The artboards I used to create those are shown above. In total, I had nearly 20 different web pages each with a different gif.   

With many paths possible through the story, I wanted to have a different neon sign illustrated gif for each quiz prompt. The artboards I used to create those are shown above. In total, I had nearly 20 different web pages each with a different gif.

 

Select Final Assets

PGN-1-asset.gif
PGN-asset-3.gif
PGN-asset-4.gif
 
 

Final Coded pages

Gifs animate each scenario. Response buttons change color on hover. Over 30 responsive web pages direct a 5 prompt quiz with 4 possible endings.

 
 
mockup 2-01.png
last Pgn-01.png
5-01.png
6-01.png