The creators of Paradox (Megan Dan and Lindsay), sculpted Dan's original idea for the project into what it is today. Dan pitched his idea to create a "choose your own adventure" type of story. He also pitched the name "Paradox" as well as having a time travel theme. Together, they built on Dan's original idea and decided to create a web based interactive narrative that involves animation and music/sound effects that gives the user the ability to change the story line at any given point.
Dan had been waiting to see Paradox come to fruition for a while now. Because of this, he had a lot of creative freedom when it came to the overall story line. He decided that the main character, Mr. Blue, was a Time Guardian who had his handbook stolen from him by a rouge Time Guardian out to cause him harm. The only evidence was a time portal left in his room. Mr. Blue steps through the portal to find that he is aboard Christopher Columbus' ship. The crew has lost their way and need Mr. Blue's help to get them to safety.
It was on this foundation that the entire branding was done, story was written, and animations were made.
The Process
Below is the step by step process that we followed to create Paradox. Click the link below to download a PDF version
Process Document >
1
The Time Line
First thing first, the creative team behind Paradox had to create a time line to follow in order to have the project done within the set scope of time. Of course, this time line wasn't quite as linear as originally planned and it went though many rounds of revisions throughout the process. That being said, in general, the group was able to follow the time line and completed a great piece of work in the end.
Lindsay and Megan, the designers of Paradox, led the overall look and feel of the project, although Dan's suggestion to have a Dr. Seuss look and feel played a big role in their general direction. The first step to the branding process was to create thumbnails.
After meeting as a group, the three creators agreed upon expanding on four of the logo thumbnails.
The final logo wound up being a combination of the two best logos from both Megan and Lindsay. With the incorporation of the clock from Linday's logo and the type for Megan's, Paradox now had a base look and feel to guide them through the rest of the creative process.
With the Time Line and Branding in place, it was time to get into the nitty gritty of the story/flow of the adventure. Creating a flowchart was essential to the written story as well as creating the animations. Dan, Megan, and Lindsay collaborated to create the flowchart below.
Based off of the flowchart, Dan created a more detailed path for Columbus and his crew to follow based off of the user's choices. Since Dan is such a great writer, Lindsay and Megan only had small adjustments to make to the overall story. It is Dan who truly owns this part of Paradox as his own.
With the story written, it was time for graphics! We made lists of anything and every graphic imaginable that Lindsay and Megan would need to animate. Even though these lists were extensive, they were constantly growing and evolving throughout the process. Lindsay conquered the different characters while Megan made different enviornmental elements that the characters would be featured in as well as other props they would use.
The graphics were done, and it was list time again! With a list of over 50 different animations to be done, there is no doubt that this was the most important process in making Paradox come to life. Since Megan was more experienced in using Adobe After Effects, she headed the project, producing 42 of the final animations. Lindsay was essentially thrown into the fire. Not only did she have to learn After Effects, but she had to create animations that followed the same general style of Megan's. This was no easy task, however, Lindsay persevered and the outcome was amazing.
While Lindsay and Megan were busy animating, Dan was scouring the internet for sound effects they would need. Not only did he find great open-source files but he also took it upon himself to create some of the sound effects.
6
The Implementation
Moving onto the final steps, Dan worked hard to make Paradox functional. However, in his efforts he overlooked the ease of implementing CSS. He used a built in program called "The Wizard" that exists in Visual Studio. The ease of linking the videos together was impressive, but it produced code that was nearly unmanageable. Lindsay and Megan did all of the CSS themselves by scouring through tables, within tables, within tables in an attempt to make Paradox as visually appealing as possible. The end result can be seen below..
After weeks of designing, coding, and user testing, the project turned out the way that the three creators had imagined it would. Below is a video of the site in action since it will only be live for a limited amount of time. Unfortunately, the screen capture caused some lagging issues so the animations are not a smooth as they are in the live site.
Now you can Enjoy your own Paradox experience! Create your own adventure and pursue the rougue Time Guardian in order to help Mr. Blue with his journey!
