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.

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

 

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.

 

Phase 3 – High-fidelity Prototype

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

 

Final Design

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.

Polish

If no additional changes need to be made then a final video will be made to document the different user flows on the site. Also another video will be made for the about page to encourage users to sign up with the application. The site will still be monitored for any problems or issues that may arise as the application gains more users.