Levi’s Canada Hot Spot Microsite

u r l:
http://www.moock.org/webdesign/portfolio/levisite/

r o l e s:
Flash Development, Interface Design, Type Layout, Animation

a b o u t:
(1/5) Finished and posted in December 1997, the Levi’s Canada site was side-scrolling animated comic strip called The Hot Spot. Levi’s wanted to do something with their web-presence that was more than just a product catalogue. They wanted to give users an experience that expressed their branding message. The goal of the strip was to guide visitors to Levi’s content through the characters and narrative of the animated bar.

The majority of the interface was built in Macromedia Flash, allowing for sound, animation, and extended interactivity with objects in the comic environment. Traditional web-based info was offered to visitors without Flash, and was also linked to throughout the Flash-based bar via characters’ various story-lines. The image below shows the opening sequence with the character Shifty welcoming the visitor to the bar environment. Shifty is looking through a Levi’s logo that acts as the peephole on the front door of the bar/site.

The site is no longer available at levi.com, but may be viewed here in a partial form.

(2/5) Once you’re in the bar, you meet the owner of the bar, and main character, Tony. Tony introduces visitors to the story of the bar, and tells them about the juke box, the ‘main menu’ of the site. The map of Canada on the wall links to the Levi’s store locator, the radio starts and stops the background music, the cockroach (always present) starts a java applet which helps visitors find some clothes to buy, and the beating heart on the counter takes visitors to the match maker Valentine’s Day promotion. The arrows at the bottom of the screen scroll the bar scene left or right.

(3/5) Here we meet Phil and Gloria. Phil, of course, is in love with Gloria. And Gloria, of course is constantly rebuking him. This was one of the most successful panels of the bar with the target market. Visitors can choose the pick-up lines Phil uses to hit on Gloria, and see if she takes the bait…

(4/5) This is the jukebox that acts as the main menu for the site. Because of the experimental nature of the navigation in the Levi’s site, we wanted to provide users with at least one familiar way to get around. The jukebox served that purpose without dispelling the immersive feeling of the comic environment.

(5/5) This image shows Dexter sitting in his private booth telling visitors about a deal he’s got. The ‘deal’ is a Canadian buyer’s points program for Levi’s stores. Visitors can find out all about it by reading the documents Dexter has laid out on his table. This presentation of Levi’s customer loyalty program added excitement and the feeling of exclusivity to the Levi’s club. Visitors get involved in the story and see themselves in it. The ‘Your Tabs’ document links to a database system which lets club members check their point totals online. And as usual, the jukebox offers quick menu access to the rest of the site.