Alicia Scarborough ITGM Thesis
☰

In order to provide fresh content and experiences for interactive stories social media can be leveraged as randomizers and authoring sources for branching storylines. My system, Troll-Me-A-Story, does so by allowing users to add scenes to stories in play, vote on story actions and share on social media to promote participation.

This thesis will analyze how social media can be leveraged to provide fresh content and experiences for interactive stories by using it as randomizers and as an authoring source for branching storylines. Interactive stories are usually a solo experience and lack the variety that a larger audience would invoke if they had the opportunity to be involved in the creation of the story. By researching interactive stories of the past along with games that have a social aspect the analysis would garner the information needed to build an application that could provide a platform for social interactive stories. Such platform would allow users to create scenes, collaborate with other users on stories and share on social media to promote participation.

THE PROJECT

Design a website where users can interact with one another's stories and either hinder or help their progress along the way. This site/application will allow for registered and un-registered users to play a story path based on events and requested assistance in tweets or facebook posts.

Utilizing social media services such as Twitter and/or Facebook outside users can interact with their friend's stories without needing to sign up to add to the story. Instead of posting usual pleas on social media networks the posts will give users the option to mess with their friends and to pose new challenges as they try to work through their current story line.

THE PROTOTYPE

The visual portion of my thesis will be an online application for interactive stories where users will be able to add a story node or event that either enabled or hindered a user’s progress of a story. The users will be able to create a profile that includes an avatar, choose or create a team and select a story starting point with a template story path. As the users interact with one another the story paths can branch off to create an interesting story line however the user can choose to end the story at any time to start a new one. To promote the collaboration amongst social media the users will be able to post to Twitter and Facebook announcing their progress and issue a challenge to outside users to be a deciding factor in their story paths.

This project will utilize web technologies such as PHP, MySQL, HTML, CSS and JavaScript for the website. For the social aspect it will use Python or PHP to communicate with the Twitter and Facebook APIs for posting to Twitter and Facebook.

THE PROCESS

Research

To gain an understanding of social games on Facebook and alternate reality games a deeper study or competitive analysis will be implemented on games such as Castleville, Candy Crush Saga and SpyFeet. Also a look back at the predecessors such as Erasmatron or Storytron, which were about interactive storytelling, StoryBird, which is an online site where authors and illustrators collaborate with one another to create a story, and BioWare’s Never Winter Nights World Builder, which allowed for world building and on the fly creature creation or creature control during game play, will be examined.

For the technical part of the visual thesis research will involve understanding the rules and regulations to the Facebook and Twitter APIs, proper database architecture, and the necessary requirements of obtaining an SSL certificate to adhere to Facebook and Twitter application standards.

Prototype Phase 1 - Low-fidelity Prototype

Wireframes will help guide the first iteration of the prototype as it is created in proto.io to allow for rapid creation to test the different user flow of the prototype. A video will be taken to demonstrate the user flow.

Goals of the prototype:

  1. Discover the user flow for the different user types and validate that they make sense
  2. Assess whether if the designed user interface for the application needs minor or major improvements to allow for intuitive navigation

Link to Prototype: https://foxglove1028.proto.io/share/?id=57893ba6-c0cd-4bde-a8ec-9a0944ca6d1a&v=3

Prototype Phase 2 – Mid-fidelity Prototype

Second iteration of the prototype; taking the information gathered from the first prototype the second version will implement the suggested changes to improve the overall application. Also at this phase the aesthetics of the application will applied to test out the overall look and feel. Design comps will be provided for this portion of the prototype to present the intended design direction of the application.

Goals of the prototype:

  1. Revalidate the user flow for the different user types based on the changes that were made from the suggestions of the first prototype
  2. Re-assess the designed user interface to check for any additional changes that may need to be make it easier to use from the user's standpoint
  3. Evaluate whether or not the aesthetics of the site fit the pre-cognition of interactive stories for the user and to ensure that its design does not detract from the interactive story content

Link to Prototype: https://foxglove1028.proto.io/share/?id=1591374b-f7c4-41e3-99fe-d5aace5f6492&v=1

User #1 Test:

Prototype Phase 3 - Low-fidelity Prototype v.2 - Wires

Reworking the second iteration of the prototype and building it with the Bootstrap 3.0 framework. Video to follow with user interactions.

Goals of the prototype:

  1. Discover the user flow for the different user types and validate that they make sense
  2. Assess whether if the designed user interface for the application needs minor or major improvements to allow for intuitive navigation

Link to Prototype: http://wires.trollmeastory.com/default.html

Prototype Phase 4 – High-fidelity Prototype

Frameworks Used: AngularJS, jQuery and Slim PHP (for web services)

This prototype will be implemented will be exported to a PHP version of the application and will be hosted in its own domain. At this point the prototype will apply the intended look and feel for the application while also implementing the necessary changes that the last prototype had revealed upon testing. User testing will be crucial at this point to help point out any flaws that may have been missed in the past iterations of the prototype. Additional wireframes will be drawn out as needed for documentation purposes if new screens or current screens need to be changed out.

The communication between twitter and Facebook will be heavily tested during this phase to pinpoint any of the bugs or complications that may arise with this application.

Goals of the prototype:

  1. Test the stability of the PHP and MySQL code; Implement a stress test on the application such as multiple users posting or adding new story nodes or making changes to their profiles
  2. Test the communication between the social app APIs for Twitter and Facebook; note any issues that occur so that they may be fixed
  3. Tweak the look of the site if deemed necessary

Link to Prototype: http://highfidelity.trollmeastory.com

Final Design

Frameworks Used: PHP, jQuery and Slim PHP (for web services)

At this point the inner workings of the application will still need to be refined however most of the issues should be addressed and resolved. Only small changes to the design or code should be needed at this point. Monitoring of the social media APIs will still be needed just in case additional changes need to be made with the application’s code to adhere to their standards.

The final design was derived from the high fidelity and user testing. Due to the lack of pictures in the high fidelity prototype many of the users were uninterested in playing with it. Thus, more imagery was needed to entice the player into playing the game. The design was updated along with the story navigation. The story was incorporated into the user's own profile to reduce the amount of pages that a player had to click through within the application. With this final beta prototype the players did interact with the application more often and were able to create chapters for their fellow players.

The story line seen in the stories of the players at the very top with the title shows the chapters created and story deviations made by other players.

Link to Prototype: https://www.trollmeastory.com

INFLUENCES

StoryBird

Collaborative Story-telling/writing - Wonderful example of collaboration online to create stories.

Interactive Story Blog

Blog on a combination of interactive stories and essays about interactive storytelling.

Amber

A diceless role-playing game created and written by Erick Wujcik, set in the fictional universe created by author Roger Zelazny for his Chronicles of Amber. The players take a hold of the storyline are allowed to come up with different avenues of actions for their characters. Very open ended storytelling.

SpyFeet

This game is pretty cool for it waits for the player to walk a certain amount before the next iteration of the story is unlocked/told. A great example of using social media to push the story along.

Facebook - Mark Zuckerberg

His platform is the most popular social space online and is used by millions. He is an inspiration because he made the social sphere open to more than one target audience. Facebook is an online social networking service. Mark Zuckerberg is one of five co-founders of the social networking website Facebook.

Zynga Games

A provider of social game services founded in July 2007. Known for their games such as FarmVille and CastleVille. Their game CastleVille tells the player a story in small parts as they finish requested tasks to continue the storyline.

Jim Butcher

Author of The Dresden Files. Absolutely a true inspiration for his storytelling abilities. The reader is pulled into the world of his characters and is told an amazing tale each time.

Minna Sundberg

Creator of the online comics "A Redtail's Dream" and "Stand Still Stay Silent" Another inspirational author and artist. Sundberg's story and artwork is truly superb and is an excellent example of how to plan and foreshadow stories.

Ted Talks

Talks such as "Storytelling Techniques" and "Open & Close a TED Talk" are great examples of setting up a story and how to engage your audience.

TedTalks is a global set of conferences owned by the private non-profit Sapling Foundation, under the slogan "ideas worth spreading". Since June 2006, the talks have been offered for free viewing online.

UX Movement

This site I use to refer to specific wireframing techniques. A progressive user experience blog devoted to promoting usable and intuitive user interface design.

BIBLIOGRAPHY

The Wolf Among Us

Excellent interactive story game that immerses the user into the storyworld. Their choices influence the story as they progress down the storyline.

Fable III

Another interactive story game where the player's choices affect the outcome of the overall game story. It is reminiscent of BioWare's Never Winter Nights.

World of Warcraft

A game that I frequently play and enjoy. This game series has some elements of interactive story telling but most of the quests or tasks are set to a defined path with little to no deviation.

The Witcher 2

This game was not as fun to play as "The Wolf Among Us" but it was interesting on how they implemented interactive story telling. The stories are sectioned off by quests and each story node is played after the player meets the necessary requirements to continue that particular story.

CastleVille

A game on Facebook and is part of the Freemium category. It is free to play but rather annoying with the constant "Buy this" prompts. The story is linear but can be fun as the player finishes each task to continue the story line.

Facade

When interactive stories are mention this particular game comes up a lot. It is considered interesting because of how it uses the AI to determine the next path in the storyline.

QR Codes Kill Kittens: How to Alienate Customers, Dishearten Employees, and Drive Your Business into the Ground

ISBN:9781118732755
Gives a list of what businesses should not do to improve their business.
I chose this book because it gives some helpful tips about how to not annoy your audience with specific marketing techniques.

21 Recipes for Mining Twitter

ISBN-10: 1449303161
This short and concise book offers a collection of recipes to help you extract nuggets of Twitter information using easy-to-learn Python tools.
This book provides information needed to pull data from Twitter.

Evil by Design: Interaction Design to Lead Us Into Temptation

This book gave me an insight as to how today's programs, apps and marketing are utilizing sin to attract potential customers.

Approaching persuasive design from the dark side, this book melds psychology, marketing, and design concepts to show why we're susceptible to certain persuasive techniques.

The Design of Everyday Things

Another great reference that helps make sure that the design and architechture of my project is an easy to use program. The Design of Everyday Things is a powerful primer on how-and why-some products satisfy customers while others only frustrate them..

Interactive Storytelling

Some of these papers have provided rather insightful suggestions and observations when it comes to digital storytelling. The ones that I am focusing are on pages 26, 176, 186, 210, 216 and 299.

The full and short papers have been organized into the following topical sections: interactive storytelling theory, new authoring modes, virtual characters and agents, story generation and drama managment, narratives in digital games, evaluation and user experience reports, tools for interactive storytelling.

inklewriter

This program allows the user to write their own interactive stories that other users can try out.

How side projects saved our startup

In this blog post the company "The Crew" exposes how offering somethign for free can get you noticed and get you more business. This is an interesting article about the online social sphere.

PAPER

Using Social Media for Interactive Storytelling

  1. Intro
    1. Thesis statement and design context - In order to provide fresh content and experiences for interactive stories social media can be leveraged as randomizers and authoring sources for branching storylines. My system, Troll-Me-A-Story, does so by allowing users to add scenes to stories in play, vote on story actions and share on social media to promote participation.
    2. Problem Statement - The problem that I see with interactive stories are that they require the person to interact with one site or application. The interactive stories are left to the individual to decide the fate of the story with no one else’s input unless the story is read in group setting but still the choices are left to the individual who is controlling the story’s navigation. In other words interactive stories are their own silos.
    3. Proposed Solution - By introducing social media into the equation we are opening up the story world to a wider audience and allowing the story’s end point to be varied better. Providing a means of collaboration through social media to unlock/solve/choose the path of the interactive story will allow users to gain different perspectives or additional knowledge to the story in progress while still trying out what-if scenarios.
    4. Project Introduction - Design a website where users can interact with one another's stories and either hinder or help their progress along the way. This site/application will allow for registered and un-registered users to play a story path based on events and requested assistance in Tweets or Facebook posts. Utilizing social media services such as Twitter and/or Facebook outside users can interact with their friend's stories without needing to sign up to add to the story. Instead of posting usual pleas on social media networks the posts will give users the option to mess with their friends and to pose new challenges as they try to work through their current story line.
  2. Project Description
    1. Overview of “Troll-Me-A-Story” - Allow for users to collaborate through social media to create interesting story quests with an online application that will host the stories.
  3. Historical References
    1. Interactive Storytelling and Games - what constitutes as an interactive story and when is it considered a game? Can it be considered both? Or is a game just a game? - Here we will quickly review the usual arguments about what is and what is not a interactive story. Just a basic overview of what others have said in the past about interactive story games.
    2. The Predecessors of “Troll-Me-A-Story”
      1. Chris Crawford’s projects “Erasmatron and Storytron”
        1. Erasatron - an engine for running interactive story worlds. Users found the project to be difficult to use and thus it was considered to be a failure by Crawford himself.
          1. What it is and what it does
          2. Lessons Learned
        2. Storytron - a newer version of Erasmatron with improvements however it too was found to be difficult for the user to use easily.
          1. What it is and what it does
          2. Lessons Learned
      2. The Wolf Among Us
        1. About The Wolf Among Us - a good example of an interactive story game where the users' decisions weigh heavily on the outcome of the storyline and ending.
        2. Interactive Story portion - The player is only given a short amount of time to choose an action before the game chooses a default answer. This allows the game story to immerse the player into teh story world.
        3. Game portion - Utilizing the keyboard the player is given control of Sheriff Bigby at certain parts of the game. Sometimes it is to fight your way out of a tight spot and other times it is just gathering clues and inventory items.
      3. Fable III - This particular game has mixed reviews but is still an interactive story game. The player's choices do affect the storyline as well.
      4. World of Warcraft (WoW) - A multiplayer online game that is very popular. Blizzard comes out with an expansion for the game every six months to keep the game fresh and to keep the gamers happy. The stories within the game are not truly interactive and thus forces the player to follow a specific path. Only a few quests gives the player the illusion of an interactive story.
      5. The Witcher 2 - Story based game that depended on the quests. Each quest told a specific story in pieces as the player finished tasks along the way. The player's interaction with the non-player character did influence the storyline.
      6. Zynga’s games - utilizes the freemium principle allowing players to play their game for free and work to gain a certain goal or the player can choose to pay real money to advance to those goals.
        1. Castleville - released in 2011; it is another game created by Zynga and is widely popular on Facebook. It has a medieval setting and uses fantasy based creatures and characters to tell a story as the player completes daily grind tasks.
      7. Facade - An interactive fiction that was driven by the artificial intelligence (AI) in the program. The AI would choose the next path based on the player's written input.
    3. Gamification
    4. Storytelling
  4. User Personas
    1. Target Audience - The typical users of “Troll-Me-A-Story” would be those who like comics, role-playing games, stories and SciFi. Target age range would be mid-teens to mid-thirties.
      1. Personas
      2. Surveys to figure out their needs
      3. Scenario development
      4. Observation based on set scenarios
  5. Design Solution
    1. Increase outside influence on a group’s choice within an interactive story by allowing the group to post these choices to their various social networks.
    2. Do not require people who click the links to install the application. Allow them to peruse the site without interrupting their flow; if they choose to join they can choose to just follow a groups adventure or join in on the fun.
    3. Stories
      1. The story line is boring if kept linear. Adding the ability to alter the story line adds excitement and possibly intrigue from the end user.
      2. Continuous story lines would be beneficial thus allowing the user to explore the story world with follow up adventures and work on memory retention.
      3. New or mixed in characters would add variety to timeless tales and add that tiny bit of alteration to the storyline.
  6. Design Methodology
    1. Programming
      1. Programming Environment - Linux Based servers - LAMP-stack
      2. Programming Language - PHP, Python, MySQL, HTML, CSS3, JavaScript/jQuery, SOAP
      3. Tools - Twitter and Facebook APIs
      4. Navigational flow diagram
    2. UX and Logo Design
      1. Wireframes
    3. Character Design
    4. Game Stories
  7. Prototype and User Testing
    1. Low Fidelity Prototype
      1. Discovery of user paths
      2. Build initial layout
      3. User Testing
      4. Results
    2. High Fidelity Prototype
      1. Refinement of user paths and prototype based on findings from the previous prototype
      2. Test Social API connections
      3. User Test Results
    3. Final Beta Prototype
      1. Refinements of user paths and prototype based on findings from the previous prototype
      2. Refine Social API connections
      3. User Testing
      4. Results
  8. Reception of Troll-Me-A-Story
    1. Validation of solution (or lessons learned from solution)
      1. Story creation benefits
      2. Social media benefits - allows for easy sharing of events that happen in their stories and encourages a conversation between users on social media
      3. Lessons learned
    2. Feedback
    3. Area of Improvement
  9. Conclusion
    1. Attribution of best practices
    2. Reiteration of whether thesis goals have been satisfied

Draft [Pending]

ABOUT

With 7+ years in the agency world working with the latest technologies my skills are always building to allow for easier adaptation to new web/digital goodies that may grace the internet.

For interactive stories I have enjoyed games that interweaved the stories into the game play such as Amber, Dungeons & Dragons and World of Warcraft. There are some older games such as the Kings Quest series offered by Sierra that I fondly remember from the 1980s and early '90s that have swayed my interests to how stories interact with today's web.

From a developer perspective my skillset leans more towards a LAMP-stack (PHP, MySQL, Apache, REST API, etc) where as my designer skills utilize the Adobe Suite to implement designs from paper concepts to the screen. Having knowledge of both spectrums allows me to understand what is and is not possible when designing and building web sites.

PAST WORK

The Dresden Files

Year: 2012 Summer
Redesign: 2014 Summer
Dimensions: 640px+
Media: Web | Digital | HTML/CSS/jQuery

more...
Design | HTML | CSS | jQuery
close

Use of simple HTML5 and CSS3 in tandem of a design that speaks volumes of The Dresden Files genre. The jQuery framework is used for scrolling to the different sections of the site. Also used for the book navigation

STAKE-A-VAMPIRE

Year: 2013 Spring
Dimensions: 1260x1240
Media: Web | Digital | Flash AS3

more...
Design | Flash | OOP | Actionscript 3
close

Stake a Vampire is a whack-a-mole type game where you stake a vampire that appears out of the coffin. Each level requires a certain amount to be staked before the timer runs out in order to move on to the next level. This game was built in Flash with Actionscript 3 Object Classes to control the game play.

ROUND ROBIN STORIES

Year: 2012 Fall
Dimensions: 3 1/2" x 5"
Number of Cards: 8
Media: Photoshop | Card Stock

more...
Design | Interactive Story
close

This project was to get children and young adults to collaborate on telling a completely random story based on the cards. However the testing phase of this project was more focused on parents spending time with their children and telling them a unique story each time with the cards.

Special Occasions

Year: 2013 Winter
Dimensions: 320x480
Media: Mobile | Digital | HTML/CSS/jQuery

more...
Design | HTML | CSS | jQuery Mobile
close

The Birthday Special Occasion Reminder application is a program that can be installed on a mobile device such as an Apple iPhone, Android phone, Windows Phone, iPad or other mobile devices that are capable of installing applications from Google Play, Apple AppStore or Windows Phone store.

WoW Gals

Year: 2013 Spring
Redesign: 2014 Summer
Dimensions: Minimum Width 320
Media: Web | Digital | HTML/CSS/jQuery

more...
RWD | HTML | CSS | jQuery | Modernizr
close

A World of Warcraft (WoW) Fan site that has a once a week comic featuring my characters from WoW as they progress through the game. It will also feature their communication with one another asking for an item or for tips of how to finish a specific quest. The banter between the characters as well as their situations will allow for a humorous storyline. This site's content will be easy to view on a mobile device with the use of media queries and JavaScript.

Dark Rising

Year: 2013 Fall
Dimensions: 8 1/2" x 11"
Pages: 55
Media: Documentation | InDesign

more...
Documentation | Game Design | Story
close

Demonstration of documentation skills to notate the necessary elements to create an application. Within this document it is noted as to what is need to create the game such as platforms and resources.