Summer 07 – Usability – Wireframes

The wireframes or storyboards can be found here.

After nailing down the navigation (this doesn’t mean it is not constantly evolving), the next step is to make stetches of how the navigation is supposed to look. In this revision, I decide for the creation of neighborhoods, that will allow an easier loading time for each area. While the original idea was to have everything happen in just one realm, the site contains different neighborhoods, and inside those neighborhoods, there are buildings. Translated into a regular website, it is like having the main level, followed by links that take you to the second level, and these links containing links to a third level as well.

-Alex

Summer 07 – Usability – Purely interactive

Aside from the movie websites I explored in the previous competitive analysis, there are other additional websites I’ll break down here. The following websites are not movie websites, but mini-game websites. Their sole purpose is to interact with a complex world that appears to be senseless at first hand, but the more you explore, the easier it gets. These are multiple use websites, since the user doesn’t tend to go through all the material in one sit.

The most important one is Makibishi.com In Makibishi, we find a world of space ninjas and robots in which the use of hidden Easter Eggs is prominent. The user clicks through the website, and subtle things happen that build up to a chain reaction of events that will reward the user with the completion of levels (it is as simple as unlocking the little ninjas). They make use of a clever cursor-activated 3d-looking background. By using layers, they achieve such a complex effect. It might seem small, but it brings the website to life.

Another website that is simple on the code, but big on the events, is MTV’s Staying Alive game. Staying Alive offers a simple yet effective use of background and animation to communicate a message of sexual awareness in teenagers. The website seems to be aimed at 3rd graders who don’t know much about life, yet are starting to experiment with sex and drugs. The interactive experience consists on the user cleaning up their room, followed by waiting at the bus, and finalizing in a party. It is a completely linear experience. Once the user has moved on from one level to the next, he cannot return to the previous place. What makes this website unique is how engaging the story is. Contrary to Makibishi, the user is lead by the hand in an obvious manner.

The Gorillaz’ website is a magnificent example of how fun cursor-based exploration can be. The user explores the Gorillaz building, and expands rooms by pushing the cursor to the corners of the screen. There are no characters, or story… it is just simple exploration. The meat of the website is the use of magnificent illustration, with an effective use of hidden easter eggs.

Marc The Crab: Episode 2 (Say it!!)

“The Crab is now dancing… Say it! Say it!”

That was me, and the gracious way I direct my friends into saying their lines.

Marc The Crab: Episode 2 has footage taken of an outing to the East Bay during the Fire Festival. We didn’t get our tickets in time, so we ended up at some weird bar with dancers that seemed to be taken out of a strip club. In the end, it was a win/win situation… because we all ended up having a good time… and so did Marc (it was his first party…)

-Alex

Summer 07 – Usability – Characters

Check out the Character prototypes here.

Parallel to the developement of the information architecture, I’m also designing different characters that, even though many of them are secondary in the website, they are still just as important in the creation of the different episodes. I’m attaching a PDF that includes my progress. As you can see, there are more characters now than there were when I first presented my thesis proposal. Granted, this is not their final design (at least for some of them), specially for the mantis. Yet, this helps communicate their spirit though.

The new peeps are the Romulus and Remus twins, Reeko Furry, Taiwagang member, and Madam Rosa.

-Alex

Summer 07 – Usability – Information Architecture

One of the most important things is to define what is going to be inside the website. You can find the Information Architecture either in this PDF or posted below. This is a breakdown of all the sections:

1. Character House

a) Tour of the house – The user gets invited to an MTV cribs tour of the house.
This allows the user to get to know Coco, Brenny, and Charona in their own en-
vironment. As they tour, the mantis are going to show the panties to the user,
and find out that they are missing. In that moment, president Dick Tator gives
the mantis a call, and tells them to turn on the tv.
b) TV disaster – A giant robot monster is threatening to “attack the city tonight
at 7:46pm, SHARP, and the Mantis in Pantis better be there… wearing their spe-
cial panties of power… or else, Silicon City will be destroyed… forever.”
c) Phone rings – Charona picks up the phone, and the president tells her “You
left me on hold.” “Oh, sorry… I thought I had. Umm…” “Yeah… its ok. I’m
good.” “So, anyway, yeah… so the giant robot/monster is attacking…” After a
comedic awkward exchange, the president begs the mantis to save the city at
7:45pm.”
d) Counter – Countdown to 7:45pm starts. It is reflected in one of the screen’s
corner. User wont have enough time to retrieve the pantis before 7:45pm… so
the counter will be reset as a comic relief with comments like, “This user is so
lame!”
e) Missing pantis mini-game – User is instructed to search for the missing
pantis. The first one is right on sight, to motivate the user to seek the rest.

2. Peeping Tower

a) Peeping game – user looks out the window to see what Walrusky’s neigh-
bors are up to.
b) Hidden pantis – The user finds another one of the three missing pantis.
He finds it looking out the window. He uses a fishing pole to retrieve it from
Jr.’s apartment.
c) Match.com tapes – The user finds some match.com VHS tapes that will
display dating profiles for the characters. This is another way of presenting
characters in a funny way.

3. Tarot Institute

a) Tarot game – User can ask a question to Madam Rosa (he chooses from
an already stablished set of questions), and as he chooses 3 cards, he real-
izes he has quite a far-fetched future.
b) IM Icons – After completing a tarot game, the user unlocks IM icons,
that are illustrations from the Tarot cards. Illustrations, of course, adapted
to fit the mantis world.
b) Animated trash can – User clicks on animated trash can. He is encour-
aged to throw out the trash. The trash can closes its mouth everytime the
user gets too close to achieving his goal.

4. Contact Booth

a) Phone Alex – User clicks on the phone, and finds pertinent contact informa-
tion to contact me.
b) Wallpaper (Phone book) – The user can flip through the yellow pages and
unlock fun wallpapers for their desktop.

5. City Hall Library

a) Screen Saver (Computer) – User can see through some mug shots that
act as character profiles. It unlocks the download of the sex offenders Screen
Saver.
b) Tip Sheet (main book in the foreground) – The tip sheet, which in-
cludes the genre, the length, who is involved, and basically all the technical
information is going to be one of the most prominent pieces of information.
Investors are going to be looking for this.

6. Cartoon Theatre

a) Tv Screen – The user will turn on the tv at the manager’s office, and find
the latest hit, Veal or No Veal. It is an animated spoof of Wheel of Fortune in
which a cow is tortured.
b) Mantis screenings – Mini films with skits, and documentaries explaining
the creative process can be found in this room.
c) Stripper game – User can gain money by stripping in the stripping room.
He needs to press the arrow keys to shake some booty. The reward is to be
able to take a picture of himself as a stripper, and to email it to his friends.
d) Hidden pantis – User collects one of the 3 missing pantis.

7. Secret Places

a) Making money – Tom Kat tells the user that, to be able to buy tickets
to enter the movie theatre, or to pay the psychic, he needs to either strip,
or sell him some fertilizer…. because he’s a special farmer.
The user strips at the adult movie theatre, and has to follow the instruc-
tions of the secret mystery character. In the end, the user makes
enough money to watch the mantis movies.
The other way of making money is by selling fertilizer to Tom Kat. The user
produces the fertilizer by going to the mantis backyward, and feeding the
pigs from the trash cans, after they poop, the user collects the poop, and
sells it to Tom Kat, who rewards the Mantis with money.
After the user talks with Tom Kat, he unlocks a secret location which is Tom
Kat’s car trunk. There he can find fun things, and tips to get by through the
mantis world.
Another fun thing to do (and the user can make money out of it) is to
gamble at cock fights. I want to add more drugs to the mantis content,
so I wish to include a macabre chemical factory from where the user can
get drugs. These drugs (crystal meth, speed, cocaine) help your cock win
all the fights, thus the user can make more money. This is an advanced
feature.
b) The Ending – After the user collects the pantis, and returns them to the
mantis, they put them on, and a movie is unlocked. In this movie, the Man-
tis in Pantis kick giant robot/monster ass, and save Silicon City from ulti-
mate destruction. The user can continue exploring the world afterwards or
can just choose to exit the website.