user interface

Following are highlights of user interface design and development work. Some examples require a password before viewing to protect clients' privacy. I'll be happy to provide it for reasonable inquiries.

AMC Television

Wireframes (ask for access)

Designed the organization, functionality, and user interface for a web-based movie directory and ranking system. I created detailed wireframes and other supporting documents as the information architect for the project.

Blue Radish Homepage

Blue Radish Group

Wireframes | Prototype | Live Site

Blue Radish Group owns a chain of gourmet restaurants in Manhattan, New York. They specialize in delivering quality meals to office workers. My task was to design the architecture of their corporate web site and to create the first iterations of online ordering system. In this role, I delivered wireframes, research, and other supporting documents to client. Also, I coded all the dynamic HTML and CSS for the published site.

Readio Library Finder

Readio, Learn-to-Read System/Community

Prototype | Blog (local version) | Live Site

I designed the user interface of the alpha version of online system. Readio is an interactive voice-recognition application for families, and I was responsible for creating the UI for the online part where parents select books, review reports, and set up users. I worked with the stake-holders and backend engineers to develop a system that worked well with both their needs, and of course for the needs of the users. I also integrated an open-source blog tool (WordPress) to the needs of Readio and to the design of the rest of the website.

Schoolnet.com

Prototype (ask for access)

Educational Online Teaching/Tracking System. Developed working prototype of product adapted to new features and branding. The purpose of this prototype is as a proposal for soliciting a major client, and to serve as a functioning model for user testing. I developed a modular prototype using php, with documentation, so that it could continue to be updated through various iterations.

CTB-Mc Graw Hill

Example Wireframe Document (ask for access)

Standardized Test-Scoring Architecture. I worked with internal teams and over-seas developers or a major standardized test company. I was responsible for creating wireframe documents for different stages of development. I also performed user-research at active testing centers.

Progressive Calculator

Progressive Insurance

Insurance Insurance Quote Survey
Insurance Policy Manager UI
Insurance Saving Calculator

I have worked on these projects in conjunction with IA designers and application developers to build user interface for Flash-based prototypes. These prototypes were developed for usability testing and product design. They were built with the intention of becoming full-fledged web-based applications. I was solely responsible for the Flash production of each prototype.

TV Guide Online Display

TV Guide Online

TV Guide Online Prototype

This is another functioning Flash-based prototype that was used in the design and development of a web-based interactive program guide for TV Guide subscribers.

[Leapfrog Schoolhouse]

LeapFrog Schoolhouse

TEMPLATE WIREFRAMES | APPLICATION FLOW | PROTOTYPE

Leapfrog is a leader in the educational toy industry. We planned, designed, and developed this software system to adapt their popular Leap Pad product into an assessment-based educational system called LeapTrack. This is a diagnostic and learning system for students in grades K-5, for school districts throughout the country. I was Senior User Experience person for this kiosk/web-based project. I was in charge of the user experience deliverables for the client and for communicating between engineering and design. The deliverables I produced were schematics and the application design (site map).

[HotBot]

Hotbot.com

LOCAL PROTOTYPE

Responsible for design and development of HotBot.com. This search/portal site serves dynamic pages to a mass audience. Optimize performance and presentation of pages. I have served as liason between design, engineering, production, marketing, and content. Provide day-to-day guidance to development team. Propose design and development strategies for new features and redesigns.

[Lycos Music]

Lycos.com

LYCOS MUSIC | YELLOW PAGES

I teamed up with the Design Director and Interface Director to redesign the Lycos sites while contributing to the network-wide styleguide. Here are the examples of two sub-sites that I redesigned by working closely with product managers and partners.

[Wired CNS Intranet]

Wired

LOCAL VERSION

Wired Digital's intranet was long overdue and far from complete when I was hired to complete it. Over the course of 3 months I met with the members of their staff and took charge of building the working site and designing its architecture. I also was involved in improving its interface to better serve its audience. It had been an invaluable tool for the entire staff. Subsequently, I played a similar role for the corporate site.

[Flash Greeting Card]

Mini Flash Projects

The PLUS Coalition animated logo
GHMC Splash Page
One Magazine Interactive Map
Wired Digital Greeting Card
Young People's Chorus Music Player

These are examples of small Flash projects where I produced simple Flash presentations published on the Web. I also write about and teach Flash. Check out my online tutorials and other coverage, or Flash textbook.

[Swoon Home]

Swoon.com

EXAMPLE 1 | EXAMPLE 2

As with the entire site, I created all the HTML and JavaScript code and produced all of the images. I also developed a style guide. My role included other disciplines like site architecture and some design. I would work with the editors and Art Director during the conceptual and design phases. Then I would execute the actual page from a Photoshop layout provided by the Art Director. I would consult with the technical staff regarding CGI programming and server configurations. During development I performed extensive QA with various browsers and computers.

In developing JavaScript features for the site I was sure that all users on all browsers equivalent to Netscape 1 and above the page would function well even if differently. This also was true for all framed sections of the site.