I recently completed a project called “Stories of Your Life”. It was a grueling, marathon project, but I learned a lot and am very proud of the results. As such, I wanted to do a little show and tell on the project, and show some screenshots of the finished product.

Handing off the final CD sure gave me a new respect for software developers. Rolling out web applications is such a forgiving process – you do testing up front, but if something goes wrong after roll-out, it is usually a fairly simple matter to correct it. Sending a CD for mass-duplication, and knowing that any problems are going to be nearly impossible to rectify is a stressful business. 🙂

Stories of Your Life is an application based around the national best-selling book Once Upon a Lifetime by Pat A. Williams. I worked directly with this lovely, vibrant woman in interpretting and enhancing her printed work for the digital medium. Briefly, it is a Windows application that guides you through recording the stories of your life with over 2000 questions in 15 categories and 78 subcategories. In addition to formatted text, you can associate photos, audio and video with your answers.

I believe it is quite unique as a retail product built with Flash, and with its amazing blend of “multimedia presentation” and “desktop application”.

The application was built using FlashMX, and ScreenWeaver. I was very happy with ScreenWeaver, with the exception of a major bug that causes a BSOD fatal exception when writing large files (as yet unfixed, but I worked around it by using a series of smaller appended writes instead). Read on for a short tour of the software.

Click on any thumbnail for a larger image.

Introduction

Following a login screen, the software opens with a short intro animation (which you can skip with the escape or space key) choreographed to some lovely custom-scored music by James Mireau (a friend and very talented musician).

This animation transitions into the main screen, which presents all the major areas of functionality in the application. All of the hands on the clocks in the application move at varying speeds, but are kept slow enough so that they do not distract the user.

Tutorials

The video tutorials for the application were recorded with Camtasia Studio, and compressed using Sorenson Squeeze (which I had to buy, despite having won it in the Interaction 2003 contest last February, because Eric Dolecki has apparently decided to keep the prizes for himself).

Recording the tutorials, and synching them with the voice-overs was one of the most tedious tasks in the development of Stories of Your Life, but the results are great.

Question organization

Working with over 2000 questions, each with an associated answer, media and meta data was quite a challenge in FlashMX. Questions were organized into 78 XML files (one for each subcategory), category information is indexed in another file.

As each question is answered, a new file containing all of the text, media and meta data is saved, and a subcategory index file is updated. This index provides quick access to information regarding each question’s state: whether it has been answered, whether it is ‘marked’, and whether it has media associated with it.

All file i/o is managed through two functions, to make development easier, and all xml data is intelligently cached to reduce the need to re-load or re-parse files.

The questions are presented in an easily understood “Question Guide” interface, which tested very well with our beta testers. This guide relies on the answer indexes mentioned above to display information on which questions have been answered or have media attached, as well as letting users modify the “marked” attribute of answers directly.

Printing

Because Flash is completely unable to handle the type of report generation that was required for this project, we took the rather unorthodox approach of offloading all printing to Internet Explorer. An HTML document is generated in Flash based on an externally defined report template, then opened in IE to facilitate printing. CSS was used to define page breaks, margins and the like.

This had the added benefit of allowing users to email their stories, and copy the fully formatted text into MS Word, which we chose to suppport from within the application.

Text editor

The text editor in Stories of Your Life allows users to format their answers using text styles, colors and alignment. It seemed like a straightforward addition, but it turned into a nightmare.

Firstly, text editing in Flash has a ton of bugs, such as the dreaded “wrapping spaces” bug, where it wraps spaces on the end of a line to the front of the next line, creating an uneven left margin. With some experimentation, and extremely hackish code, I was able to work around the worst of these.

Secondly, the HTML Flash generates has a number of incompatibilities with Internet Explorer (which we used for all print output). In normal circumstances, I would have worked around this by parsing the HTML as I wrote it to the IE HTML file – however, with over 2000 questions, this would take WAY too long. Instead, each time a question is saved, it is converted into IE friendly HTML, and then converted back to Flash HTML when it is opened again. This distributes the work, and results in no perceived delay for the user.

Answers and indexes are saved automatically whenever a user leaves an answer screen.

Media capabilities

Stories of Your Life also lets users associate media files (audio, video and photos) with their answers. The media buttons glow gold when there is media of the specified type associated with the currently displayed question.

Audio and video files are opened in the appropriate external player, while the internal photo viewer lets users flip between images, and rotate them. We originally had a built-in audio player but it was scrapped to accommodate audio files other than MP3.

Usability

Our goal was to develop an application that had essentially no learning curve, and our testing shows that we have largely succeeded. We went through multiple rounds of usability testing and revision, and the result is an attractive, consistent, intuitive interface that is highly functional. I still have some minor reservations about certain aspects, but it is a good compromise between usability and aesthetics.

Stories of Your Life is being pressed and packaged now, and should begin distribution shortly (the details of where and how are being worked out). I’ll try to post back here when it is available to purchase.

While I was in charge of programming, information architecture, usability, and a lot of general project management, the beautiful aesthetic design was the brain-child of Chris Caldwell, who did a smashing job interpretting Pat’s vision for the application, and adding his own touch to it.

It’s hard to believe its all done. 🙂