user interface

Following are highlights of user interface design and development work. I work with clients in various roles from collobrating as a team member to managing and producing the entire project. Some examples require a password before viewing to protect clients' privacy. I'll be happy to provide it for reasonable inquiries.

Porres Homepage

San Martín de Porres

LIVE Website

Porres is an organizaton that works with children afflicted with Autism and Aspergers Syndrome. They provide a complete grade school for children and offer a range of services on an individual and group basis. In addition they offer an adult program for when their students past school age to help them integrate better into daily life, taking care of themselves at home and in everyday jobs. It is respected as the most progressive organization that works with Autistic kids in all of Argentina.

I have visited the school several times to learn first hand how their program works, and meet with their administrators to develop a better web page to both inform the families of their kids and promote the organization worldwide. I did everything in this project from design to development, investigating their needs, and organizing the content that they wished to present in the best way for their users. I customized Wordpress to run their entire site and allow the staff of Porres direct access to update any of the content via any web browser. All is in the Spanish language, including the administration.

Enquisite Homepage

Enquisite

LIVE Website

For this project I worked with M-A-D studio, who designed it. My role was more dedicated to developing the website within a Wordpress framework. I created the stylesheets, and Wordpress theme. I had to adapt a large amount of existing content to the framework, and provide complete access to the content via Wordpress the adminstrator, though this is far more sophisticated than a typical Wordpress site. I carefully evaluates plug-ins, and integrated them sparingly to accomplish some of the functionality, and worked directly with the Enquisite staff to make sure the system was usable for them and met their needs.

Sprout Homepage

Sprout Oregon

LIVE Website

Sprout is a non-profit community based organization which investigates and implements alternative approaches to agriculture. The client had an existing website hosted by another organization. It was static and without its own identity. The content had not been changed in over a year. Sprout is constantly involved in innovative research projects and seminars, with the input of various existing members and other community onlookers, and had needed a web presence to better reflect this.

I designed and developed the entire website on my own. I chose Drupal as the system to manage the content of the Sprout website; and I designed it to be more usable for its audience and for the editor who manages the content. The Sprout website now also includes some community features such as discussions within selected features, and a blog. The website now better represents the Sprout organization and is a vital tool for organizing events and sharing the documentation of projects, amongst other things. Furthermore it was designed and constructed in such a way that it will be able to grow more organically over time without needing a severe redesign.

Whoscreative.com Homepage

Whoscreative.com

LIVE WEBSITE

This was a startup business. The challenge was to create a website for professional self-made portfolios where the community element was also important. There is the public site, a singup process, managing and creating profiles, as well as a sophisticated but simple portfolio creation tool.

As part of a team of three who created this site, I was responsible for the information architecture, usability, and building all of the HTML/CSS for the user interface. I collaborated closely with my team members, as we solved problems together. After performing a series of user tests I delivered an analysis of the results to the client and to my colleagues which we used as a guide to improve the design in the process.

AMC Television

Wireframes (ask for access)

AMC television has had a website to feature movies and programs that appear on its national cable television network. I was brought in as the information architect to chage this to an exhaustive directory of 80,000 movies provided by a third party data source. My role was to study and translate the technical specifications of the data source to create a compelling experience that fit in with their website. I designed the organization, functionality, and user interface of the movie directory and a user-ranking system. In addition I designed a way to include an array of top-ten lists based on both these ratings and editorial choices. I delivered detailed wireframes and other supporting documents 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.

[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.