Saige Danby
PGN1-01.png

Interactive Short Story

 

Interactive Short Story

WEB DESIGN, illustration, interaction design

 

Our brief for this school web design project was to take a short story from McSweeney's and create an interactive and responsive website. 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.

 
 
PGN mockup.png
 

CONCEPT

 

A "pick your path" quiz version where the user chooses how the story ends. The story structure itself is a humorous monologue, where a man is tries to “respectfully” hit on a woman. As the monologue is only him speaking, I realized there was an opportunity to write content of the woman’s replies, allowing the user to choose their own response and directly interact with 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-asset-3.gif
 
 
PGN-asset-4.gif
PGN-1-asset.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