The Segue Institute
SegueInstitute.com is the online home of The Segue Institute, a fictional paranormal research institute that features prominently in the works of paranormal romance author Erin Kellison.
I have to admit right up front, I am really proud of this site. Not that I'm not proud of my other website work; I am, very much so. However this is the first site where I really was able to pull out all the stops, creatively and programmatically. And I think we succeeded on many levels.
Many months ago Mrs. Kellison and I started throwing around ideas for a Segue website. It was our first foray into viral marketing, and we really wanted to make it something that would be evocative of the Segue world, and a great interactive experience.
This is usually the point in the project description where I say how we kept things simple, nothing too exciting, etc. Not so on this project. The Segue Institute is supposed to be a super-high-tech research facility, with top-end security. Knowing this, I kicked around some ideas for the site design, taking lots of inspiration from Mark Coleran's Fantasy User Interfaces, as well as from the gurus at 2Advanced Studios (still the most impressive Flash developers I've ever seen).
For many various reasons, I decided to create the site using HTML for markup and JQuery for all the animations. I utilized several stellar JQuery plugins for the animations, including the Easing plugin, BlockUI, and HoverIntent.
Cool Stuff: a few points of interest on the site:
- Login: in keeping with the hi-tech theme, we wanted to have the main entry point to the site be a login page, and have the feel of logging in to the Segue intranet. The login is based on a series of words and phrases related to Mrs. Kellison's Shadow Series books.
- Retinal Scanner: my favorite part of the site. Silly, but loads of fun. I'll probably write up a blog post about this one and how I created it...once I get the blog going.
- Interactive map: the wraith map was part of the very first version of the Segue site, and has stuck it out through many iterations since then. The one thing we added for the final version were the wraith images in the tooltip/hover content. These were created by the extremely talented Ms. Laron Glover. Very cool. The hover content/tooltips/whatever you want to call them are generated using a nifty trick I learned from John Resig's blog: create some content inside a <script> tag with the "type" attribute set to "text/html", and the browser will ignore it completely until you're ready to use it.
- Logs: these are basic "lightbox"-style popups with custom content inside. Mrs. Kellison is actually writing these logs on an ongoing basis and is creating an entire story-within-a-story here. Very nice.
- Personnel: we took the viral marketing to a new level with this section. Each character from the Shadow series now has his/her own Twitter account, through which they have ongoing conversations with each other. This section provides the entire Twitter feed for all the Segue personnel. I initially set this up to pull in the feed via the Twitter Search API using the hash tag #SegueInst, however we soon discovered that this is less than stable; if the hash tag is not tweeted regularly, it is not picked up by the search at all. So I changed it to pull in all conversations based on each user, then I sort the results by the timestamp.
- Games: Haunted Hangman has also been around since Segue v1.0. This game is just too much fun, with the perfect amount of creepiness from the ghost.
- Easter Eggs: these are little gems of hidden content sprinkled throughout the site. Most have been found by visitors to the site already, however there's one that still has not been found. More will be added over time.