On this page the following entries were made in the “Interaction Design” category.
Archive for “Interaction Design”
PlanetOut: Search and Refine
During the PlanetOut/Gay.com redesign I proposed adding different layout options to search results pages, in addition to surfacing the refine function in a handy minimizable tray.
Continue reading “PlanetOut: Search and Refine” »
PlanetOut: Member Browser Widget
As part of the Planetout/Gay.com redesign I createda compact, AJAX member browser widget, enabling the user to quickly browse through a list of “featured members” without having to reload the page.
Continue reading “PlanetOut: Member Browser Widget” »
PlanetOut: Buddy List Window
A system architecture quirk at PlanetOut/Gay.com required a small persistent floating window to fully utilize the site—If the user closed this nearly pointless window, instant messaging and chat would be disabled. I added the user’s buddy list and a mini-profile browser, turning this annoying window (and perennial customer service complaint) into a useful asset for the user.
Continue reading “PlanetOut: Buddy List Window” »
InterMap Systems: Wireframe
For InterMap, I reused layouts from my client-approved storyboard and added use cases as the interface specification.
(This is a pdf)
Continue reading “InterMap Systems: Wireframe” »
InterMap Systems: Storyboard
InterMap was asked to present a few different ideas of how our product could be integrated into the client’s existing website. I created a storyboard and friendly narrative that walked Peggy and Arthur—persona hypotheses for our client’s typical users—through the client’s website with our product additions.
(This is a pdf)
Continue reading “InterMap Systems: Storyboard” »
PlanetOut: Example flow
This PlanetOut flow diagram incorporated interface detail hints which allowed people outside the development group to follow the process.
Continue reading “PlanetOut: Example flow” »
PlanetOut: Example Wireframe and UI Spec
My Planetout specs vary between high and low fidelity. In this hifi wireframe, I numbered every element with attention to system generated text and localized strings. The behaviors of each numbered element is described in the UI Spec.
Continue reading “PlanetOut: Example Wireframe and UI Spec” »
eTranslate: Workflow Creation
eTranslate’s software suite was substantial. This is a particularly challenging portion of one of the applications that enabled a very complex workflow setup. (Ease of use was compromised by engineering schedules.)
(This is a pdf)
Continue reading “eTranslate: Workflow Creation” »
eTranslate: Project Setup
At eTranslate I was tasked with fixing a complicated interface to set up a localization project. This entailed setting multiple preferences about the members of one’s team, the client, the document target languages, scopes, deadlines, etc. This leaned more towards documenting an existing system, as engineering schedules prohibited any major changes that would have made this substantially easier to use.
(This is a pdf)
Continue reading “eTranslate: Project Setup” »
Musicbank: A New Mental Model
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” »
