Erik Gibb
Visual Design

Musicbank’s first experience was a simple list and play interface. When it came time to add features, we used a more user-centered design process and started with a new mental model making a distinction between the user who preferred a simple list-and-play experience vs. the more sophisticated user requiring advanced sorting and playlist creation capabilities. Along with a basic wireframe that logically divided all the site and application navigation and content areas, I sketched a rough design that correlated to our existing look and feel to help everyone get a feel for the new concepts.

(This is a pdf)

Continue reading “Musicbank: A New Mental Model” »

Musicbank required the user to validate her CDs using a Windows application called Bank-It. If the CD was valid, it would be added to the library where the user could view and play music on the web. I documented the different states of valid/blocked/unrecognized CDs and Tracks with rationale behind the choices, basic graphic explorations, and recommendations for placement.

(This is a pdf)

Continue reading “Musicbank: Library Status Icons” »

Netscape migrated from Meeting Maker to it’s own Calendar product. Before I joined, the team was asked to build a training module that served new users, but was particularly friendly for migrating users.

The Calendar Zone training module featured a Twilight Zone spoof theme with a training host named Rodzilla, a cleverly disguised Mozilla sporting a Rod Sterling Pompadour. (Mozilla was Netscape’s dragon mascot. Once a beloved character on the netscape.com website, he retired from public life in ‘98.)

I was responsible for upkeep of the module as new features were added to the product. I also added some javascript whizbang to the navigation that

• Kept the nav in sync with the content
• Cued the user where she was in the training (via the iTunes-like dots. Perhaps Apple was inspired by my work?)
• Allowed random access to content.

Continue reading “Netscape: The Calendar Zone Training Module” »

BuyerX was the e-commerce internal procurement system built on Netscape’s Application Server. It was a complex application used by almost everyone in the company. We were asked to build a training module to serve casual and dedicated users.

Calling on our team’s past successes, I concepted and prototyped “Buyer X Files: The truth is in here” featuring

• An arch theme, comfortably fitting into our popular suite of similarly spoof-based training
• Training hosts—”Agents Skoldy and Molder” were icebreaker characters asking both “dumb” and advanced/related questions which provided the human voice
• One of my more imaginative visual designs (Not my forté)
• Navigation that guided casual users needing a quick answer, as well as dedicated users requiring deep knowledge of the full product.
• “Advanced” (for the time) implementation featuring user cues like rollover buttons, javascripted menus and navigation, and a fully liquid layout.
• Common sense help content organized by functional application roles

Continue reading “Netscape: BuyerX Files Training Module” »

Our team was responsible for the creation, care, and feeding of all mission critical intranet sites, like the company address lookup, department sites, and IT applications. We traditionally maintained the primary portal page allowing access to the dozens of sites in our group along with the hundreds of other unofficial sites hosted around the company.

We were asked to concept and build an intranet portal that showcased features of the newly released Netscape 4. We treated this as an agency project, breaking into 3 teams to pitch different concepts. IT management helped narrow down the field to the MozHome Intranet Remote Control concept. I provided assisted with information architecture, lead interaction and visual design efforts, and prototyped some of the simpler functionality (Using an image mapped transparent layer above the non-square shaped buttons to create unique rollover effects and switching the search tabs.)

Key features of the remote included:

• A tear-off search bar thanks to a signed jar file which floated on the user’s desktop like a real application
• Dropdown menus providing deep links to information that was commonly requested, organized in ways that our testing indicated intranet user’s would find most comfortable
• A promotional area of triangular buttons
• A scrolling news pane
• A training mode providing rollover help for the entire panel

Continue reading “Netscape: MozHome Intranet Navigator” »

In Musicbank’s quest for cash, our executives asked us to demonstrate a shopping cart to potential investors. “Chimay” was an internal tool used by our developers to search the music library and add item’s to a test account. I did a quick and dirty recommendation for redesigning the tool to integrate it in the existing application flow and make it appear more consumer friendly for the demo.

(This is a pdf)

Continue reading “Musicbank: Music Shopping Cart” »